import 'package:cached_network_image/cached_network_image.dart';
import 'package:e_commerce_training/res/R.dart';
import 'package:e_commerce_training/src/model/repository/app_repository.dart';
import 'package:e_commerce_training/src/model/response/category.dart';
import 'package:e_commerce_training/src/page/category/category_cubit.dart';
import 'package:e_commerce_training/src/page/detail_category/detail_category_page.dart';
import 'package:e_commerce_training/src/util/navigation_util.dart';
import 'package:e_commerce_training/src/util/util.dart';
import 'package:e_commerce_training/src/widget/custom_appbar.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

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

  @override
  _CategoryPageState createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage> {
  late CategoryCubit _cubit;
  RefreshController _refreshController = RefreshController();
  int count = 0;

  @override
  void initState() {
    // TODO: implement initState
    _cubit = BlocProvider.of<CategoryCubit>(context);
    _cubit.onChangeCountIndex(0);
    _cubit.getCategory();
    if (!mounted) return;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: appBar(
        context,
        R.string.category_product.tr(),
        rightIcons: [MdiIcons.cartOutline],
      ),
      body: BlocProvider(
        create: (BuildContext context) => _cubit,
        child: BlocConsumer<CategoryCubit, CategoryState>(
          listener: (context, state) {
            if (state is CategoryFailure) Util.showErrorSnackBar(context, state.error);
            if (!(state is CategoryLoading)) _refreshController.refreshCompleted();
          },
          builder: (context, state) {
            return Row(
              children: [
                Container(
                  decoration: BoxDecoration(
                    color: R.color.white,
                    border: Border.all(width: 0.5, color: R.color.grey),
                    // color: Colors.R.color.grey,
                  ),
                  width: 90.w,
                  height: MediaQuery.of(context).size.height,
                  child: ListView.builder(
                    itemCount: _cubit.listCategory.length,
                    itemBuilder: (BuildContext context, int index) {
                      var data = _cubit.listCategory[index];
                      return InkWell(
                        onTap: () {
                          _cubit.onChangeIndex(index);
                          //_cubit.onChangeFirst(_cubit.listCategory[index].categoryId);
                        },
                        child: Column(
                          children: [
                            Container(
                                padding: EdgeInsets.symmetric(vertical: 10, horizontal: 5),
                                child: Column(
                                  children: [
                                    CachedNetworkImage(
                                      height: 80.h,
                                      width: 80.w,
                                      fit: BoxFit.contain,
                                      imageUrl: Util.getImageUrl(data.categoryImage ?? "", host: "https://cdn.chiaki.vn/") ?? "",
                                    ),
                                    Text(
                                      data.categoryName ?? "",
                                      style: TextStyle(
                                        fontSize: 16.sp,
                                      ),
                                      textAlign: TextAlign.center,
                                      maxLines: 2,
                                      overflow: TextOverflow.ellipsis,
                                    ),
                                  ],
                                ),
                                color: _cubit.index == index ? R.color.white : R.color.primaryColor.withOpacity(0.1)),
                            Divider(height: 1, color: R.color.grey)
                          ],
                        ),
                      );
                    },
                  ),
                ),
                Expanded(
                  child: _cubit.listCategory.length == 0
                      ? Container(
                          alignment: Alignment.center,
                          child: CircularProgressIndicator(strokeWidth: 2, value: 0.8),
                        )
                      : Container(
                          color: R.color.grey200,
                          height: MediaQuery.of(context).size.height,
                          child: SingleChildScrollView(
                            child: Column(
                              children: [
                                InkWell(
                                  onTap: () {
                                    NavigationUtil.rootNavigatePage(
                                      context,
                                      DetailCategory(
                                        id: _cubit.listCategory[_cubit.index].listSubCategory![count].subId!,
                                        detailName: _cubit.listCategory[_cubit.index].listSubCategory?[count].subName ?? "",
                                      ),
                                    );
                                  },
                                  child: Container(
                                    padding: EdgeInsets.symmetric(vertical: 8, horizontal: 10),
                                    color: R.color.white,
                                    child: Row(
                                      children: [
                                        Expanded(
                                          child: Text(
                                            "${_cubit.listCategory[_cubit.index].listSubCategory![count].subName}",
                                            style: TextStyle(fontSize: 16.sp, color: R.color.black),
                                          ),
                                        ),
                                        Icon(Icons.navigate_next, size: 22.h)
                                      ],
                                    ),
                                  ),
                                ),
                                SizedBox(
                                  height: 5,
                                ),
                                Padding(
                                  padding: EdgeInsets.symmetric(horizontal: 5),
                                  child: Column(
                                    children: [
                                      Padding(
                                        padding: EdgeInsets.all(4),
                                        child: ClipRRect(
                                          borderRadius: BorderRadius.circular(5),
                                          child: CachedNetworkImage(
                                            height: 150.h,
                                            width: MediaQuery.of(context).size.width,
                                            fit: BoxFit.cover,
                                            imageUrl: Util.getImageUrl(_cubit.listCategory[_cubit.index].listSubCategory![count].subImage ?? "",
                                                    host: "https://cdn.chiaki.vn/") ??
                                                "",
                                          ),
                                        ),
                                      ),
                                      Column(
                                        children: List.generate(
                                          _cubit.listCategory[_cubit.index].listSubCategory![count].listSub!.length,
                                          (index) {
                                            var dataSub = _cubit.listCategory[_cubit.index].listSubCategory![count].listSub!;
                                            return Card(
                                              child: Column(
                                                children: [
                                                  InkWell(
                                                    onTap: () {
                                                      NavigationUtil.rootNavigatePage(
                                                        context,
                                                        DetailCategory(
                                                          id: _cubit.listCategory[_cubit.index].listSubCategory![count].listSub![index].id!,
                                                          detailName:
                                                              _cubit.listCategory[_cubit.index].listSubCategory![count].listSub![index].name ?? "",
                                                        ),
                                                      );
                                                    },
                                                    child: Padding(
                                                      padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
                                                      child: Row(
                                                        children: [
                                                          Expanded(
                                                            child: Text(
                                                              "${dataSub[index].name}",
                                                              style: TextStyle(fontSize: 16.sp, color: R.color.black),
                                                            ),
                                                          ),
                                                          Text(
                                                            R.string.more.tr(),
                                                            style: TextStyle(fontSize: 16.sp, color: R.color.grey400),
                                                          ),
                                                        ],
                                                      ),
                                                    ),
                                                  ),
                                                  index == 0
                                                      ? GridView.count(
                                                          shrinkWrap: true,
                                                          primary: false,
                                                          crossAxisCount: 3,
                                                          childAspectRatio: 3 / 3,
                                                          children: List.generate(
                                                            dataSub[index].listItem!.length,
                                                            (counts) {
                                                              return Column(
                                                                children: [
                                                                  CachedNetworkImage(
                                                                    height: 50.h,
                                                                    width: 50.h,
                                                                    fit: BoxFit.cover,
                                                                    imageUrl: Util.getImageUrl(dataSub[index].listItem![counts].image ?? "",
                                                                            host: "https://cdn.chiaki.vn/") ??
                                                                        "",
                                                                    //  imageUrl:
                                                                    //    "https://cdn.chiaki.vn/unsafe/308x200/left/top/smart/filters:quality(75)/https://chiaki.vn/upload/category/2015/07/thuoc-tim-mach-28072015142917.jpg",
                                                                  ),
                                                                  SizedBox(
                                                                    height: 5,
                                                                  ),
                                                                  Text(
                                                                    "${dataSub[index].listItem![counts].name}",
                                                                    style: TextStyle(fontSize: 16.sp, color: R.color.black.withOpacity(0.6)),
                                                                    textAlign: TextAlign.center,
                                                                  )
                                                                ],
                                                              );
                                                            },
                                                          ),
                                                        )
                                                      : SizedBox(),
                                                ],
                                              ),
                                            );
                                          },
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                )
              ],
            );
          },
        ),
      ),
    );
  }
}
