import 'package:boilerplate/core/utils/navigator_util.dart';
import 'package:boilerplate/presentation/screen/products/list/product_list_screen.dart';
import 'package:boilerplate/presentation/widgets/ipm_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:shared_preferences/shared_preferences.dart';

import '../../../../core/i18n/translations.g.dart';
import '../../../../core/styles/my_colors.dart';
import '../../../../core/styles/my_dimensions.dart';
import '../../../../core/styles/my_font.dart';
import '../../../bloc/home/home_bloc.dart';
import '../../../widgets/ipm_title_text.dart';

class HomeCategories extends StatefulWidget {
  const HomeCategories({Key? key}) : super(key: key);

  @override
  State<HomeCategories> createState() => _HomeCategoriesState();
}

class _HomeCategoriesState extends State<HomeCategories> {
  late final ScrollController controller;

  double scrollIndecator = MyDimens.dimen30 * 0.2;
  late String lang = "";
  @override
  void initState() {
    super.initState();

    controller = ScrollController();
    getLang();
  }

  bool _onScroll(ScrollNotification notification) {
    final p = notification.metrics.pixels *
        100 /
        notification.metrics.maxScrollExtent;

    setState(() {
      if (MyDimens.dimen30 * (p / 100) <= MyDimens.dimen30 * 0.2) {
        scrollIndecator = MyDimens.dimen30 * 0.2;
      } else {
        scrollIndecator = MyDimens.dimen30 * (p / 100);
      }
    });

    return true;
  }

  @override
  void dispose() {
    controller.dispose();

    super.dispose();
  }

  getLang() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();

    setState(() {
      lang = prefs.getString('lang').toString();
      // print("kkkkkkkkk ${lang}");
    });
  }

  @override
  Widget build(BuildContext context) {
    // getLang();
    return BlocBuilder<HomeBloc, HomeState>(
      builder: (context, state) {
        if (state.data.categories.isEmpty) {
          return Container();
        }

        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              child: lang == "th" || lang == null
                  ? IPMTitleText(
                      title1: AppLocalizations.home.category_th_title1,
                      title2: AppLocalizations.home.category_th_title2,
                    )
                  : IPMTitleText(
                      title1: AppLocalizations.home.category_en_title1,
                      title2: AppLocalizations.home.category_en_title2,
                    ),
              alignment: Alignment.centerLeft,
              margin: EdgeInsets.only(left: 16, top: 16),
            ),
            Container(
              // height: MyDimens.dimen400,
              child: NotificationListener<ScrollNotification>(
                onNotification: _onScroll,
                child: GridView.builder(
                  controller: controller,
                  shrinkWrap: true,
                  physics: ScrollPhysics(),
                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 3, childAspectRatio: 8 / 6),
                  padding: EdgeInsets.symmetric(
                    vertical: MyDimens.dimen14,
                    horizontal: MyDimens.dimen16,
                  ),
                  scrollDirection: Axis.vertical,
                  itemCount: state.data.categories.length,
                  itemBuilder: (context, index) {
                    final item = state.data.categories[index];

                    return GestureDetector(
                      onTap: () {
                        NavigatorUtil.pushToPage(ProductListScreen(
                          typeId: item.id,
                          myTitle: item.name,
                        ));
                      },
                      child: Column(
                        children: [
                          Container(
                            margin: EdgeInsets.only(right: MyDimens.dimen12),
                            width: MyDimens.dimen35,
                            height: MyDimens.dimen35,
                            child: IPMImage(
                              url: item.cover ?? '',
                            ),
                          ),
                          SizedBox(height: MyDimens.dimen8),
                          SizedBox(
                            width: MyDimens.dimen70,
                            child: Text(
                              item.name ?? '',
                              style: MyFont.regular12.copyWith(
                                color: MyColor.headerColor,
                                overflow: TextOverflow.ellipsis,
                              ),
                              maxLines: 2,
                              textAlign: TextAlign.center,
                            ),
                          ),
                        ],
                      ),
                    );
                  },
                ),
              ),
            ),
            // Align(
            //   alignment: Alignment.center,
            //   child: Stack(
            //     children: [
            //       Container(
            //         height: MyDimens.dimen4,
            //         width: MyDimens.dimen30,
            //         decoration: BoxDecoration(
            //           color: const Color(0xFFD9D9D9),
            //           borderRadius: BorderRadius.circular(100),
            //         ),
            //       ),
            //       Container(
            //         height: MyDimens.dimen4,
            //         width: scrollIndecator,
            //         decoration: BoxDecoration(
            //           color: const Color(0xFFB21F29),
            //           borderRadius: BorderRadius.circular(100),
            //         ),
            //       ),
            //     ],
            //   ),
            // ),
            SizedBox(height: MyDimens.dimen12),
            Container(
              margin: EdgeInsets.symmetric(horizontal: MyDimens.dimen16),
              decoration: const BoxDecoration(
                border: Border(
                  bottom: BorderSide(
                    color: Color(0xffEAEAEA),
                    width: 1,
                  ),
                ),
              ),
            )
          ],
        );
      },
    );
  }
}
