import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:grostore/app_lang.dart';
import 'package:grostore/configs/style_config.dart';
import 'package:grostore/configs/theme_config.dart';
import 'package:grostore/custom_ui/BoxDecorations.dart';
import 'package:grostore/custom_ui/Button.dart';
import 'package:grostore/custom_ui/category_ui.dart';
import 'package:grostore/custom_ui/product_card.dart';
import 'package:grostore/custom_ui/shimmers.dart';
import 'package:grostore/helpers/common_functions.dart';
import 'package:grostore/helpers/device_info_helper.dart';
import 'package:grostore/helpers/route.dart';
import 'package:grostore/presenters/home_presenter.dart';
import 'package:grostore/screens/filter.dart';
import 'package:provider/provider.dart';

class Home extends StatefulWidget {
  String? id;

  Home({Key? key, this.id}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  void initState() {
    Provider.of<HomePresenter>(context,listen: false).setContext(context);
    Provider.of<HomePresenter>(context, listen: false).initState(context);

    super.initState();
  }

  // @override
  // void dispose() {
  //   Provider.of<HomePresenter>(context, listen: false).dispose();
  //   super.dispose();
  // }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: ThemeConfig.xxlightGrey,
        appBar: buildSearchOption(context),
        body: Consumer<HomePresenter>(builder: (context, data, child) {
          return RefreshIndicator(
            onRefresh: data.onRefresh,
            child: SingleChildScrollView(
              controller: data.homeScrollController,
              child: SafeArea(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    buildSliderSection(data),
                    const SizedBox(
                      height: 14,
                    ),
                    Padding(
                      padding:
                          EdgeInsets.symmetric(horizontal: StyleConfig.padding),
                      child: Row(
                        children: [
                          Text(
                            AppLang.local(context).top_categories_ucf,
                            style: StyleConfig.fs16fwBold,
                          ),
                          const SizedBox(
                            width: 8,
                          ),
                          Image.asset(
                            getAssetIcon("fire.png"),
                            height: 20,
                            width: 20,
                          )
                        ],
                      ),
                    ),
                    const SizedBox(
                      height: 10,
                    ),
                    buildTopCategorySection(data),
                    const SizedBox(
                      height: 14,
                    ),
                    Padding(
                      padding:
                          EdgeInsets.symmetric(horizontal: StyleConfig.padding),
                      child: Row(
                        children: [
                          Text(
                            AppLang.local(context).best_selling_products_ucf,
                            style: StyleConfig.fs16fwBold,
                          ),
                          const SizedBox(
                            width: 8,
                          ),
                          Image.asset(
                            getAssetIcon("fire.png"),
                            height: 20,
                            width: 20,
                          )
                        ],
                      ),
                    ),
                    const SizedBox(
                      height: 10,
                    ),
                    SizedBox(
                     // color: Colors.red,
                      height:225,
                        child: buildBestSellingProductSection(data)),
                    const SizedBox(height: 14,),
                    Padding(
                      padding:
                      EdgeInsets.symmetric(horizontal: StyleConfig.padding),
                      child: Row(
                        children: [
                          Text(
                            AppLang.local(context).all_products_ucf,
                            style: StyleConfig.fs16fwBold,
                          ),
                          const SizedBox(
                            width: 8,
                          ),
                          Image.asset(
                            getAssetIcon("fire.png"),
                            height: 20,
                            width: 20,
                          )
                        ],
                      ),
                    ),
                    const SizedBox(
                      height: 10,
                    ),
                    allProducts(data),
                    const SizedBox(
                      height: 14,
                    ),
                  ],
                ),
              ),
            ),
          );
        }),
      ),
    );
  }

  Container buildTopCategorySection(HomePresenter data) {
    return Container(
      height: 100,
      child: data.isTopCategoryInitial
          ? ListView.separated(
              scrollDirection: Axis.horizontal,
              padding: EdgeInsets.symmetric(horizontal: StyleConfig.padding),
              itemBuilder: (context, index) {
                return Button(
                  minWidth: 40,
                  onPressed: (){
                    MakeRoute.go(context, Filter(category_id:data.topCategoryList[index].id.toString() ,));
                  },
                  child: SizedBox(
                    width: 100,
                    child: CategoryUi(
                        img: data.topCategoryList[index].thumbnailImage,
                        name: data.topCategoryList[index].name),
                  ),
                );
              },
              separatorBuilder: (context, index) {
                return const SizedBox(
                  width: 8,
                );
              },
              itemCount: data.topCategoryList.length)
          : categoryShimmer(),
    );
  }

  SizedBox buildSliderSection(HomePresenter data) {
    return SizedBox(
      height: 170,
      child: CarouselSlider(
        items:
            data.isHomeBannerInitial ? data.homeBannerImages : sliderShimmer(),
        options: CarouselOptions(
          aspectRatio: 2,
          viewportFraction: 0.94,
          height: 150,
         // enlargeCenterPage: true,
          scrollDirection: Axis.horizontal,
          autoPlay: true,
          onPageChanged: (index, reason) {
            data.onChangeBannerIndex(index);
          },
        ),
      ),
    );
  }

  PreferredSize buildSearchOption(BuildContext context) {
    return PreferredSize(
        preferredSize: Size(getWidth(context), 54),
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 14),
          margin: const EdgeInsets.only(top:12, left: 24, right: 24),
          width: getWidth(context),
          decoration: BoxDecorations.shadow(radius: 6.0),
          child: Button(
            onPressed: ()=>MakeRoute.go(context, Filter(isFocus: true,)),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Image.asset(
                  getAssetIcon("search.png"),
                  height: 16,
                  width: 16,
                ),
                const SizedBox(
                  width: 8,
                ),
                Text(
                  AppLang.local(context).search_product_ucf,
                  style: StyleConfig.fs12cGrey,
                )
              ],
            ),
          ),
        ));
  }

  List<Widget> sliderShimmer() {
    return [
      Shimmers(width: getWidth(context) - 40, height: 200),
      Shimmers(width: getWidth(context) - 40, height: 200),
      Shimmers(width: getWidth(context) - 40, height: 200),
      Shimmers(width: getWidth(context) - 40, height: 200),
    ];
  }

  ListView categoryShimmer() {
    return ListView.separated(
        padding: EdgeInsets.symmetric(horizontal: StyleConfig.padding),
        scrollDirection: Axis.horizontal,
        itemBuilder: (context, index) {
          return Shimmers(
            width: 76,
            height: 87,
            radius: 6.0,
          );
        },
        separatorBuilder: (context, index) {
          return const SizedBox(
            width: 8,
            height: 10,
          );
        },
        itemCount: 10);
  }

  Widget allProductShimmer() {
    return GridView.builder(
        padding: EdgeInsets.symmetric(horizontal: StyleConfig.padding),
        shrinkWrap: true,
        physics: const NeverScrollableScrollPhysics(),
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            crossAxisSpacing: 16,
            mainAxisSpacing: 16,
            childAspectRatio: 2/3),
        itemCount: 10,
        itemBuilder: (context, index) {
          return Shimmers(width: 160, height: 186,radius: 8,);
        });
  }
  
Widget  buildBestSellingProductSection(HomePresenter data){
   return
     data.isBestSellingProductInitial ?
       ListView.separated(
         padding: EdgeInsets.symmetric(horizontal: StyleConfig.padding),
         scrollDirection: Axis.horizontal,
           itemBuilder: (context, index) {
         return ProductCard(
           product: data.bestSellingProductList[index],context: this.context,);
       },
           separatorBuilder: (context,index)=>const SizedBox(width: 10,), itemCount: data.bestSellingProductList.length)
       :Shimmers.horizontalList(10, 160, 160);
  }


Widget  allProducts(HomePresenter data){
 String datas = '';
   return data.isAllProductInitial?GridView.builder(
        padding: EdgeInsets.only(left: StyleConfig.padding,right: StyleConfig.padding,bottom: 20),
       shrinkWrap: true,
       physics: const NeverScrollableScrollPhysics(),
        itemCount: data.products.length,
        itemBuilder: (context, index) {
          datas = data.products[index].name;
          return ProductCard(product: data.products[index],context: this.context,);
        },
       gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
       crossAxisCount: 2,
       crossAxisSpacing: 16,
       mainAxisSpacing: 16,
       childAspectRatio:  0.72,
       // childAspectRatio: 2.1/3
   ),
        ):allProductShimmer();
  }
}