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_dimensions.dart';
import '../../../../../core/styles/my_font.dart';
import '../../../../bloc/products_list/products_bloc.dart';
import 'product_list_filter_chip.dart';

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

  @override
  State<ProductListCategoriesFilter> createState() =>
      _ProductListCategoriesFilterState();
}

class _ProductListCategoriesFilterState
    extends State<ProductListCategoriesFilter> {
  bool isShowAll = false;
  late String lang = "";

  @override
  void initState() {
    super.initState();

    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      setState(() {
        final bloc = BlocProvider.of<ProductListBloc>(context);

        isShowAll =
            bloc.state.data.filterData?.categoriesSelected.isNotEmpty ?? false;
      });
    });
    getLang();
  }

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

    setState(() {
      lang = prefs.getString('lang').toString();
    });
  }

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<ProductListBloc, ProductListState>(
      builder: (context, state) {
        return Padding(
          padding: EdgeInsets.only(top: MyDimens.dimen12),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                lang == "th" || lang == ""
                    ? AppLocalizations.products.category_filter_title
                    : AppLocalizations.products.category_filter_title_en,
                style: MyFont.medium16,
              ),
              SizedBox(height: MyDimens.dimen8),
              RichText(
                maxLines: isShowAll ? 130 : 3,
                text: TextSpan(
                  children: [
                    ...List.generate(
                      state.data.filterData?.categories.length ?? 0,
                      (index) {
                        final item = state.data.filterData!.categories[index];
                        return WidgetSpan(
                          child: Padding(
                            padding: EdgeInsets.only(
                                right: MyDimens.dimen8,
                                top: MyDimens.dimen8,
                                bottom: MyDimens.dimen8),
                            child: ProductListFilterChip(
                              initialValue: state
                                  .data.filterData!.categoriesSelected
                                  .where((element) => element == item.id)
                                  .isNotEmpty,
                              id: item.id,
                              text: item.name ?? '',
                              onSelect: (id) {
                                BlocProvider.of<ProductListBloc>(context).add(
                                  SelectCategoriesFilterEvent(id),
                                );
                              },
                            ),
                          ),
                        );
                      },
                    ),
                  ],
                ),
              ),
              // if (!isShowAll)
              //   Container(
              //     alignment: Alignment.center,
              //     padding: EdgeInsets.only(top: MyDimens.dimen12),
              //     child: GestureDetector(
              //       onTap: () {
              //         setState(() {
              //           isShowAll = true;
              //         });
              //       },
              //       child: Text(
              //         AppLocalizations.products.show_more,
              //         style: MyFont.medium12.copyWith(
              //           color: Color(0xFF494949),
              //         ),
              //       ),
              //     ),
              //   ),
            ],
          ),
        );
      },
    );
  }
}
