import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:lba/data/model/workingHours.dart';
import 'package:lba/gen/assets.gen.dart';
import 'package:lba/res/colors.dart';
import 'package:lba/screens/product/item.dart';
import 'package:lba/screens/product/shop.dart';

class Productdetail extends StatefulWidget {
  const Productdetail({super.key});

  @override
  State<Productdetail> createState() => _ProductdetailState();
}

class _ProductdetailState extends State<Productdetail>
    with SingleTickerProviderStateMixin {
  String selectedImage = Assets.images.media.path;
  int selectedIndex = 0;

  final List<String> imageList = [
    Assets.images.media.path,
    Assets.images.topDealsAndStores.path,
    Assets.images.image.path,
    Assets.images.topDealsAndStores.path,
  ];

  late AnimationController _controller;
  late Animation<double> _fadeAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 300),
    );
    _fadeAnimation = CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut,
    );
    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _onToggleTap(int index) {
    setState(() {
      selectedIndex = index;
      _controller.forward(from: 0);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: [
            Stack(
              children: [
                SizedBox(
                  height: 400,
                  width: double.infinity,
                  child: Stack(
                    children: [
                      AnimatedSwitcher(
                        duration: const Duration(milliseconds: 300),
                        child: Image.asset(
                          selectedImage,
                          key: ValueKey<String>(selectedImage),
                          fit: BoxFit.cover,
                          height: 350,
                          width: double.infinity,
                        ),
                      ),
                      Positioned(
                        top: 40,
                        left: 16,
                        child: IconButton(
                          icon: SvgPicture.asset(
                            Assets.icons.mDSPublicTWButton.path,
                          ),
                          onPressed: () => Navigator.pop(context),
                        ),
                      ),
                      Positioned(
                        top: 40,
                        right: 16,
                        child: IconButton(
                          icon: SvgPicture.asset(Assets.icons.favorite.path),
                          onPressed: () {},
                        ),
                      ),
                      Positioned(
                        bottom: 0,
                        left: 0,
                        right: 0,
                        child: Container(
                          height: 105,
                          padding: const EdgeInsets.symmetric(vertical: 8),
                          decoration: BoxDecoration(
                            boxShadow: [
                              BoxShadow(
                                color: Colors.black.withOpacity(0.2),
                                blurRadius: 10,
                                offset: const Offset(0, -2),
                              ),
                            ],
                          ),
                          child: ListView.separated(
                            scrollDirection: Axis.horizontal,
                            padding: const EdgeInsets.symmetric(horizontal: 16),
                            itemCount: imageList.length,
                            separatorBuilder:
                                (_, __) => const SizedBox(width: 8),
                            itemBuilder: (context, index) {
                              final img = imageList[index];
                              final isSelected = selectedImage == img;
                              return GestureDetector(
                                onTap:
                                    () => setState(() => selectedImage = img),
                                child: Container(
                                  decoration: BoxDecoration(
                                    border: Border.all(
                                      color:
                                          isSelected
                                              ? LightAppColors.confirmButton
                                              : Colors.transparent,
                                      width: 2,
                                    ),
                                    borderRadius: BorderRadius.circular(8),
                                  ),
                                  child: ClipRRect(
                                    borderRadius: BorderRadius.circular(8),
                                    child: ColorFiltered(
                                      colorFilter:
                                          selectedIndex == 1 &&
                                                  isSelected == false
                                              ? ColorFilter.matrix(<double>[
                                                0.2126,
                                                0.7152,
                                                0.0722,
                                                0,
                                                0,
                                                0.2126,
                                                0.7152,
                                                0.0722,
                                                0,
                                                0,
                                                0.2126,
                                                0.7152,
                                                0.0722,
                                                0,
                                                0,
                                                0,
                                                0,
                                                0,
                                                1,
                                                0,
                                              ])
                                              : ColorFilter.mode(
                                                Colors.transparent,
                                                BlendMode.dstOut,
                                              ),
                                      child: Image.asset(
                                        img,
                                        width: 100,
                                        height: 100,
                                        fit: BoxFit.cover,
                                      ),
                                    ),
                                  ),
                                ),
                              );
                            },
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
            const SizedBox(height: 20),
            SizedBox(
              width: 350,
              height: 50,
              child: Row(
                children: [
                  Expanded(
                    child: _buildToggleButton(
                      text: 'Item',
                      isSelected: selectedIndex == 0,
                      onTap: () => _onToggleTap(0),
                    ),
                  ),
                  Expanded(
                    child: _buildToggleButton(
                      text: 'Shop',
                      isSelected: selectedIndex == 1,
                      onTap: () => _onToggleTap(1),
                    ),
                  ),
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20),
              child: const Divider(thickness: 1.2, height: 2),
            ),
            FadeTransition(
              opacity: _fadeAnimation,
              child:
                  selectedIndex == 0
                      ? Item(
                        title: "Bosse Swivel Chair - Nature",
                        brand: "Papadatos",
                        dimensions: "L 59 cm | D 69 cm | H 89 cm",
                        colour:
                            "Navy Blue, Burnt Sienna, Mustard Yellow, Olive Green",
                        material:
                            " Cover: Polyester, Frame construction: Plywood Lacquered, Foot/Base: Oak Solid wood Lacquered, Upholstering: 28 kg/m³ Polyurethane",
                        description:
                            "A dining chair which swivels through 360 degrees offers a number of advantages. It allows easy movement and flexibility when sitting, which increases comfort and makes it easier to reach different areas around the table. A swivel chair in the dining room also makes it easier to sit down and get up, even where space is a little limited. This largely eliminates the hassle of moving dining chairs around. In addition, the swivel function encourages dynamic interaction during meals or conversations.",
                      )
                      : Shop(
                        shopName: "Chattels & More",
                        star: 3.6,
                        place: "Mall of the Emirates، City Centre Mirdif",
                        branches: [
                          "Mall of the Emirates، City Centre Mirdif",
                          "UEA",
                        ],

                        workingHours: [
                          WorkingHours(
                            day: 'mo',
                            shifts: [Shift(openAt: '01:00', closeAt: '23:00')],
                          ),
                          WorkingHours(
                            day: 'tu',
                            shifts: [Shift(openAt: '09:00', closeAt: '17:00')],
                          ),
                          WorkingHours(
                            day: 'fr',
                            shifts: [
                              Shift(openAt: '09:00', closeAt: '12:00'),
                              Shift(openAt: '14:00', closeAt: '18:00'),
                            ],
                          ),
                        ],
                        facilities: "White Glove Delivery Service",
                      ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildToggleButton({
    required String text,
    required bool isSelected,
    required VoidCallback onTap,
  }) {
    return GestureDetector(
      onTap: onTap,
      child: Stack(
        children: [
          Container(
            height: 50,
            color: Colors.white,
            alignment: Alignment.center,
            child: Text(
              text,
              style: TextStyle(
                color:
                    isSelected
                        ? LightAppColors.primary
                        : LightAppColors.productDetailDivider,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          if (isSelected)
            Positioned(
              bottom: 0,
              left: 0,
              right: 0,
              child: SvgPicture.asset(
                Assets.icons.shape.path,
                height: 5,
                color: LightAppColors.primary,
              ),
            ),
        ],
      ),
    );
  }
}