import 'package:cached_network_image/cached_network_image.dart';
import 'package:e_commerce_training/res/R.dart';
import 'package:e_commerce_training/src/model/response/home_config_response.dart';
import 'package:e_commerce_training/src/model/response/list_product_response.dart';
import 'package:e_commerce_training/src/page/blogs/blog.dart';
import 'package:e_commerce_training/src/page/category/category_page.dart';
import 'package:e_commerce_training/src/page/choose_category/choose_category_page.dart';
import 'package:e_commerce_training/src/page/course_feedback/course_feedback_page.dart';
import 'package:e_commerce_training/src/page/course_quiz/course_quiz_page.dart';
import 'package:e_commerce_training/src/page/detail_category/detail_category.dart';
import 'package:e_commerce_training/src/page/detail_product/detail_product_page.dart';
import 'package:e_commerce_training/src/page/home/home_cubit.dart';
import 'package:e_commerce_training/src/page/home/home_state.dart';
import 'package:e_commerce_training/src/page/home/test.dart';
import 'package:e_commerce_training/src/page/home_favorite/home_favorite_page.dart';
import 'package:e_commerce_training/src/page/imi_club_standard/imi_club_standard.dart';
import 'package:e_commerce_training/src/page/individual/individual_page.dart';
import 'package:e_commerce_training/src/page/main/main_cubit.dart';
import 'package:e_commerce_training/src/page/member_ship/member_ship_page.dart';
import 'package:e_commerce_training/src/page/profile_avatar/profile_avatar_page.dart';
import 'package:e_commerce_training/src/page/register/register_page.dart';
import 'package:e_commerce_training/src/page/register_member_ship/register_member_ship_page.dart';
import 'package:e_commerce_training/src/page/search/search.dart';
import 'package:e_commerce_training/src/page/setting/setting_page.dart';
import 'package:e_commerce_training/src/page/shopping_cart/shopping_cart.dart';
import 'package:e_commerce_training/src/page/shopping_cart/shopping_cart_page.dart';
import 'package:e_commerce_training/src/page/viewed_products/viewed_products_page.dart';
import 'package:e_commerce_training/src/page/webview_page/webview_page.dart';
import 'package:e_commerce_training/src/util/const.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/pending_action.dart';
import 'package:e_commerce_training/src/widget/star_widget.dart';
import 'package:e_commerce_training/src/widget/video_widget.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

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

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

class _HomePageState extends State<HomePage> {
  List listImg = [
    "https://cdn.chiaki.vn/unsafe/0x385/left/top/smart/filters:quality(90)/https://chiaki.vn/upload//home-banner/30-06-2021/2075217346_banner-voucher.png",
    "https://cdn.chiaki.vn/unsafe/0x385/left/top/smart/filters:quality(90)/https://chiaki.vn/upload//home-banner/30-06-2021/2077811082_kem-chong-nang.png",
    "https://chiaki.vn/upload//home-banner/30-06-2021/2123326053_banner-item-top.png",
    "https://chiaki.vn/upload//home-banner/30-06-2021/2064098939_my-pham-lam-dep.png",
    "https://files.betacorp.vn/files/ecm/2021/02/26/1702x621-141710-260221-49.jpg",
  ];

  late MainCubit _mainCubit;
  late HomeCubit _cubit;
  RefreshController _refreshController = RefreshController();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _mainCubit = BlocProvider.of<MainCubit>(context);
    _mainCubit.slider = [];
    _cubit = BlocProvider.of<HomeCubit>(context);
    _cubit.getListNews();
    _cubit.getListBrand();
    _cubit.getListVideoHome();
    _cubit.getListProduct();
    _cubit.getHomeCategory();
    _cubit.getBaseCategory();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: R.color.grey200,
      body: BlocProvider(
        create: (context) => _cubit,
        child: BlocConsumer<HomeCubit, HomeState>(
          listener: (context, state) {
            if (state is HomeFailure) Util.showErrorSnackBar(context, state.error);
            if (!(state is HomeLoading)) {
              _refreshController.refreshCompleted();
              _refreshController.loadComplete();
            }
          },
          builder: (context, state) {
            return Stack(
              children: <Widget>[
                SmartRefresher(
                  enablePullUp: true,
                  controller: _refreshController,
                  onRefresh: () => _cubit.getListVideoHome(isRefresh: true),
                  onLoading: () => _cubit.getListVideoHome(isLoadMore: true),
                  child: SingleChildScrollView(
                    child: Column(
                      children: [
                        buildSwiper(),
                        Container(
                          color: R.color.white,
                          width: double.infinity,
                          height: 120.h,
                          child: Center(
                            child: GridView.count(
                              padding: EdgeInsets.symmetric(vertical: 10),
                              crossAxisCount: 1,
                              shrinkWrap: true,
                              scrollDirection: Axis.horizontal,
                              children: [
                                rowCategory(R.drawable.ic_baby, R.string.mom_and_baby.tr(), () {
                                  Util.navigatePage(context, CourseQuizPage());
                                }),
                                rowCategory(R.drawable.ic_health, R.string.take_care_of_health.tr(), () {
                                  NavigationUtil.rootNavigatePage(context, CourseFeedbackPage());
                                }),
                                rowCategory(R.drawable.ic_make_up, R.string.make_up.tr(), () {
                                  NavigationUtil.rootNavigatePage(context, HomeFavorite());
                                }),
                                rowCategory(R.drawable.ic_watch, R.string.watches.tr(), () {
                                  NavigationUtil.rootNavigatePage(context, MemberShipPage());
                                }),
                              ],
                            ),
                          ),
                        ),
                        SizedBox(height: 10.0),
                        Container(
                          padding: EdgeInsets.only(top: 10.0),
                          color: R.color.white,
                          child: Column(
                            children: [
                              titleWidget(R.string.category.tr(), () {
                                _mainCubit.selectTab(Const.CATEGORY);
                              }),
                              Container(
                                height: 300.h,
                                child: GridView.builder(
                                  shrinkWrap: true,
                                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                                      crossAxisCount: 2, crossAxisSpacing: 10.0, mainAxisSpacing: 15.0, childAspectRatio: 5 / 4),
                                  padding: EdgeInsets.only(left: 15, top: 10, bottom: 10),
                                  scrollDirection: Axis.horizontal,
                                  itemCount: _cubit.listHomeCategoryData.length,
                                  itemBuilder: (context, int index) {
                                    var data = _cubit.listHomeCategoryData[index];
                                    return buildCategory(
                                        image: data.image ?? "",
                                        title: data.vietnameseName ?? "",
                                        callback: () {
                                          NavigationUtil.rootNavigatePage(
                                            context,
                                            DetailCategory(
                                              id: data.brandId!,
                                              detailName: data.vietnameseName ?? "",
                                            ),
                                          );
                                        });
                                  },
                                ),
                              ),
                            ],
                          ),
                        ),
                        SizedBox(height: 10.0),
                        Container(
                          padding: EdgeInsets.only(top: 10, bottom: 10),
                          color: R.color.white,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              titleWidget(R.string.hot_product.tr(), null),
                              SizedBox(height: 10.0),
                              Container(
                                height: 30.h,
                                width: double.infinity,
                                padding: EdgeInsets.symmetric(horizontal: 10),
                                child: (_cubit.listBaseCategoryData.length == 0)
                                    ? SizedBox()
                                    : ListView.builder(
                                        scrollDirection: Axis.horizontal,
                                        itemCount: _cubit.listBaseCategoryData.length,
                                        itemBuilder: (BuildContext context, int index) {
                                          return InkWell(
                                            onTap: () {
                                              _cubit.onFilter(_cubit.listBaseCategoryData[index].baseCategoryId!);
                                              _cubit.isSelected(index);
                                            },
                                            child: Container(
                                              height: 30.h,
                                              padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                                              margin: EdgeInsets.symmetric(horizontal: 5.0),
                                              decoration: BoxDecoration(
                                                borderRadius: BorderRadius.circular(12),
                                                border: Border.all(
                                                  color: _cubit.selectedIndex == index ? R.color.primaryColor : R.color.gray,
                                                ),
                                              ),
                                              child: Center(
                                                child: Text(
                                                  _cubit.listBaseCategoryData[index].vietnameseName ?? "",
                                                  style: TextStyle(
                                                    fontSize: 16.sp,
                                                    fontWeight: FontWeight.w400,
                                                    color: _cubit.selectedIndex == index ? R.color.primaryColor : R.color.gray,
                                                  ),
                                                ),
                                              ),
                                            ),
                                          );
                                        },
                                      ),
                              ),
                              SizedBox(height: 15.0),
                              buildHotProduct(_cubit.listProductResult)
                            ],
                          ),
                        ),
                        SizedBox(height: 10.0),
                        Container(
                          padding: EdgeInsets.only(top: 10, bottom: 10),
                          color: R.color.white,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              titleWidget(R.string.famous_brand.tr(), null),
                              SizedBox(height: 15),
                              Container(
                                height: 120.h,
                                child: ListView.builder(
                                  padding: EdgeInsets.only(left: 20),
                                  scrollDirection: Axis.horizontal,
                                  itemCount: _cubit.listBrand.length,
                                  itemBuilder: (BuildContext context, int index) {
                                    var dataFamousBrand = _cubit.listBrand[index];
                                    return buildFamousBrand(
                                      image: dataFamousBrand.image ?? "",
                                      title: dataFamousBrand.vietnameseName ?? "",
                                    );
                                  },
                                ),
                              ),
                            ],
                          ),
                        ),
                        SizedBox(height: 10.0),
                        Container(
                          padding: EdgeInsets.only(top: 10, bottom: 10),
                          color: R.color.white,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              titleWidget(R.string.product_by_category.tr(), () {
                                Util.navigatePage(context, CategoryPage());
                              }),
                              SizedBox(height: 10.0),
                              Container(
                                height: 30.h,
                                padding: EdgeInsets.symmetric(horizontal: 10),
                                child: (_cubit.listBaseCategoryData.length == 0)
                                    ? SizedBox()
                                    : ListView.builder(
                                        scrollDirection: Axis.horizontal,
                                        itemCount: _cubit.listBaseCategoryData.length,
                                        itemBuilder: (BuildContext context, int index) {
                                          return InkWell(
                                            onTap: () {
                                              _cubit.onFilterCategory(_cubit.listBaseCategoryData[index].baseCategoryId!);
                                              _cubit.isSelected2(index);
                                            },
                                            child: Container(
                                              height: 30.h,
                                              padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                                              margin: EdgeInsets.symmetric(horizontal: 5.0),
                                              decoration: BoxDecoration(
                                                borderRadius: BorderRadius.circular(12),
                                                border: Border.all(
                                                  color: _cubit.selectedIndex1 == index ? R.color.primaryColor : R.color.gray,
                                                ),
                                              ),
                                              child: Center(
                                                child: Text(
                                                  _cubit.listBaseCategoryData[index].vietnameseName ?? "",
                                                  style: TextStyle(
                                                    fontSize: 16.sp,
                                                    fontWeight: FontWeight.w400,
                                                    color: _cubit.selectedIndex1 == index ? R.color.primaryColor : R.color.gray,
                                                  ),
                                                ),
                                              ),
                                            ),
                                          );
                                        },
                                      ),
                              ),
                              SizedBox(height: 10.0),
                              buildHotProduct(_cubit.listProductCategory)
                            ],
                          ),
                        ),
                        SizedBox(height: 10.0),
                        Container(
                          padding: EdgeInsets.only(top: 10, bottom: 10),
                          color: R.color.white,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              titleWidget(R.string.new_product.tr(), null),
                              SizedBox(height: 5.0),
                              buildHotProduct(_cubit.listProductNew),
                            ],
                          ),
                        ),
                        SizedBox(height: 10.0),
                        Container(
                          padding: EdgeInsets.only(top: 10, bottom: 10),
                          color: R.color.white,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              titleWidget(R.string.news.tr(), () {
                                Util.navigatePage(context, BlogPage());
                              }),
                              SizedBox(height: 10),
                              Container(
                                height: 200.h,
                                child: ListView.builder(
                                  shrinkWrap: true,
                                  scrollDirection: Axis.horizontal,
                                  padding: EdgeInsets.only(left: 10),
                                  itemCount: _cubit.listNews.length,
                                  itemBuilder: (BuildContext context, int index) {
                                    var dataNews = _cubit.listNews[index];
                                    return buildNews(
                                        image: dataNews.thumb,
                                        content: dataNews.content,
                                        callback: () {
                                          Util.navigatePage(
                                            context,
                                            WebviewPage(
                                              title: dataNews.content!,
                                              url: dataNews.url,
                                            ),
                                          );
                                        });
                                  },
                                ),
                              ),
                            ],
                          ),
                        ),
                        SizedBox(height: 10.0),
                        Container(
                          padding: EdgeInsets.only(top: 10, bottom: 10),
                          color: R.color.white,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              titleWidget(R.string.view_product.tr(), () {
                                Util.navigatePage(context, ViewedProducts());
                              }),
                              SizedBox(height: 10),
                              Container(
                                height: 150.h,
                                child: Center(
                                  child: ListView.builder(
                                    padding: EdgeInsets.only(left: 15),
                                    scrollDirection: Axis.horizontal,
                                    itemCount: _cubit.listProductData.length,
                                    itemBuilder: (BuildContext context, int index) {
                                      ListProductData data = _cubit.listProductData[index];
                                      return buildProductSeen(data.itemId!, data.image, data.price, () {
                                        NavigationUtil.rootNavigatePage(
                                            context, DetailProductPage(id: data.itemId!, productName: data.vietnameseName ?? ""));
                                      });
                                    },
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                        SizedBox(height: 10.0),
                        Column(
                          children: [
                            titleWidget(R.string.video_review.tr(), null),
                            Container(
                              color: R.color.white,
                              height: 180.h,
                              child: ListView.builder(
                                shrinkWrap: true,
                                padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
                                scrollDirection: Axis.horizontal,
                                itemCount: _cubit.listVideoHome.length,
                                itemBuilder: (BuildContext context, int index) {
                                  var data = _cubit.listVideoHome[index];
                                  return Card(
                                    child: InkWell(
                                      onTap: () {
                                        NavigationUtil.rootNavigatePage(
                                          context,
                                          VideoWidget(videoId: data.youtubeVideoId ?? ""),
                                        );
                                      },
                                      child: Container(
                                        color: R.color.grey100,
                                        height: 160.h,
                                        width: 160.h,
                                        child: Column(
                                          children: [
                                            Stack(
                                              children: [
                                                AspectRatio(
                                                  aspectRatio: 16 / 9,
                                                  child: ClipRRect(
                                                    borderRadius: BorderRadius.vertical(top: Radius.circular(5)),
                                                    child: CachedNetworkImage(
                                                      imageUrl: data.thumb ?? "",
                                                      fit: BoxFit.cover,
                                                    ),
                                                  ),
                                                ),
                                                Positioned(
                                                  top: 0,
                                                  left: 0,
                                                  right: 0,
                                                  bottom: 0,
                                                  child: Icon(
                                                    MdiIcons.playCircleOutline,
                                                    color: R.color.white,
                                                    size: 30.h,
                                                  ),
                                                )
                                              ],
                                            ),
                                            SizedBox(height: 10),
                                            Expanded(
                                              child: Text(
                                                "${data.vietnameseName}",
                                                style: TextStyle(
                                                  fontSize: 16.sp,
                                                  fontWeight: FontWeight.w400,
                                                  color: R.color.black,
                                                ),
                                                maxLines: 2,
                                                overflow: TextOverflow.ellipsis,
                                                textAlign: TextAlign.center,
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                    ),
                                  );
                                },
                              ),
                            ),
                          ],
                        ),
                        SizedBox(
                          height: 10,
                        ),
                        buildTodaySuggestion(context),
                        buildCustomerCare(voidCallback: () {
                          Util.launchURL(Util.getTypeUrlLauncher(Const.PHONE_NUMBER_SUPPORT, Const.TYPE_PHONE));
                        }),
                      ],
                    ),
                  ),
                ),
                Positioned(
                  top: 50,
                  left: 10,
                  right: 10,
                  child: Container(
                    child: Row(
                      children: [
                        Expanded(
                          child: InkWell(
                            onTap: () {
                              _mainCubit.selectTab(Const.SEARCH);
                              Util.navigatePage(context, SearchPage());
                            },
                            child: Container(
                              padding: EdgeInsets.only(left: 10, top: 5, bottom: 5),
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(2),
                                color: R.color.white,
                              ),
                              child: Row(
                                children: [
                                  Icon(
                                    MdiIcons.magnify,
                                    color: R.color.black,
                                  ),
                                  RichText(
                                    text: TextSpan(
                                      text: R.string.search_on.tr(),
                                      style: TextStyle(fontSize: 16.sp, color: R.color.grey),
                                      children: <TextSpan>[
                                        TextSpan(
                                          text: R.string.chiaki.tr(),
                                          style: TextStyle(
                                            fontSize: 16.sp,
                                            color: R.color.blue,
                                            fontWeight: FontWeight.w600,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ),
                        SizedBox(width: 10),
                        InkWell(
                          onTap: () {
                            NavigationUtil.rootNavigatePage(context, ShoppingCartPage());
                          },
                          child: Icon(
                            MdiIcons.cartMinus,
                            color: R.color.white,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                Visibility(
                  visible: state is HomeLoading,
                  child: PendingAction(),
                ),
              ],
            );
          },
        ),
      ),
    );
  }

  Widget buildTodaySuggestion(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(top: 15, bottom: 10),
      color: R.color.white,
      child: Column(
        children: [
          titleWidget(R.string.today_suggestion.tr(), null),
          GridView.builder(
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            itemCount: _cubit.listProductData.length,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              childAspectRatio: 2 / 3,
            ),
            itemBuilder: (context, index) {
              ListProductData data = _cubit.listProductData[index];
              return Stack(
                children: [
                  InkWell(
                    onTap: () {
                      NavigationUtil.rootNavigatePage(
                        context,
                        DetailProductPage(
                          id: data.itemId!,
                          productName: data.vietnameseName ?? "",
                        ),
                      );
                    },
                    child: Container(
                      padding: EdgeInsets.symmetric(vertical: 10, horizontal: 15),
                      decoration: BoxDecoration(
                        border: Border.all(width: 0.5, color: R.color.grey),
                        // color: Colors.R.color.grey,
                      ),
                      child: Column(
                        children: [
                          Expanded(
                            child: CachedNetworkImage(
                              fit: BoxFit.cover,
                              imageUrl: Util.getImageUrl(data.image ?? "", host: "https://cdn.chiaki.vn/") ?? "",
                            ),
                          ),
                          Text(
                            "${data.vietnameseName}",
                            maxLines: 2,
                            overflow: TextOverflow.ellipsis,
                            style: TextStyle(
                              fontSize: 16.sp,
                            ),
                          ),
                          SizedBox(height: 5),
                          Row(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              StarWidget(),
                              SizedBox(
                                width: 5,
                              ),
                              Text(
                                "(${data.discount})",
                                style: TextStyle(fontSize: 14.sp, color: R.color.grey500),
                              )
                            ],
                          ),
                          SizedBox(
                            height: 5,
                          ),
                          Row(
                            children: [
                              Expanded(
                                child: Text(
                                  Util.formatMoney(data.price),
                                  style: TextStyle(
                                    fontSize: 16.sp,
                                    fontWeight: FontWeight.bold,
                                    color: R.color.red,
                                  ),
                                  overflow: TextOverflow.ellipsis,
                                  textAlign: TextAlign.left,
                                ),
                              ),
                              Text(
                                Util.formatMoney(data.price),
                                style: TextStyle(
                                  fontSize: 14.sp,
                                  color: R.color.grey500,
                                  decoration: TextDecoration.lineThrough,
                                  decorationThickness: 1.5,
                                ),
                                textAlign: TextAlign.right,
                                overflow: TextOverflow.ellipsis,
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ),
                  Positioned(
                    right: 0,
                    top: 0,
                    child: Container(
                      height: 50.h,
                      width: 50.h,
                      child: Stack(
                        children: [
                          Image.asset(
                            R.drawable.circle,
                            color: R.color.red,
                          ),
                          Center(
                            child: Column(
                              children: [
                                Text(
                                  "${data.discount}",
                                  style: TextStyle(
                                    color: R.color.red,
                                    fontWeight: FontWeight.w700,
                                    fontSize: 14.sp,
                                  ),
                                ),
                                Text(
                                  R.string.off.tr(),
                                  style: TextStyle(
                                    color: R.color.red,
                                    fontWeight: FontWeight.bold,
                                    fontSize: 14.sp,
                                  ),
                                ),
                              ],
                              mainAxisAlignment: MainAxisAlignment.center,
                            ),
                          ),
                        ],
                      ),
                    ),
                  )
                ],
              );
            },
          ),
        ],
      ),
    );
  }

  Widget buildHotProduct(List<ListProductData> list) {
    return Container(
      height: 320.h,
      child: GridView.builder(
        shrinkWrap: true,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 10.0,
          mainAxisSpacing: 10.0,
          childAspectRatio: 5 / 4,
        ),
        padding: EdgeInsets.only(left: 15, top: 10),
        scrollDirection: Axis.horizontal,
        itemCount: list.length,
        itemBuilder: (context, int index) {
          var data = list[index];
          return InkWell(
            onTap: () {
              NavigationUtil.rootNavigatePage(
                  context,
                  DetailProductPage(
                    id: data.itemId!,
                    productName: data.vietnameseName ?? "",
                  ));
            },
            child: Container(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  CachedNetworkImage(
                    imageUrl: Util.getImageUrl(data.image ?? "", host: "https://cdn.chiaki.vn/") ?? "",
                    height: 80.h,
                    width: 80.h,
                    fit: BoxFit.cover,
                  ),
                  SizedBox(height: 5),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        width: 100.w,
                        child: Text(
                          "${data.vietnameseName}",
                          style: TextStyle(
                            fontSize: 16.sp,
                            fontWeight: FontWeight.w400,
                            color: R.color.black,
                          ),
                          overflow: TextOverflow.ellipsis,
                          textAlign: TextAlign.start,
                          maxLines: 2,
                        ),
                      ),
                      SizedBox(height: 5),
                      Text(
                        "${Util.formatMoney(data.price)}",
                        style: TextStyle(
                          fontSize: 16.sp,
                          fontWeight: FontWeight.w600,
                          color: R.color.red,
                        ),
                        overflow: TextOverflow.ellipsis,
                        textAlign: TextAlign.start,
                      ),
                    ],
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }

  Widget buildFamousBrand({String? image, String? title}) {
    return InkWell(
      onTap: () {
        NavigationUtil.rootNavigatePage(
          context,
          DetailCategory(
            id: _cubit.listBrand[1].brandId!,
            detailName: _cubit.listBrand[1].vietnameseName ?? "",
          ),
        );
      },
      child: Container(
          width: 100.w,
          padding: EdgeInsets.symmetric(horizontal: 10.0),
          child: Column(
            children: [
              CachedNetworkImage(
                imageUrl: Util.getImageUrl(image ?? "", host: "https://cdn.chiaki.vn/") ?? "",
                height: 60.h,
                width: 80.w,
                fit: BoxFit.cover,
              ),
              SizedBox(height: 10),
              Expanded(
                child: Center(
                  child: Text(
                    title ?? "",
                    overflow: TextOverflow.ellipsis,
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 16.sp,
                      fontWeight: FontWeight.w500,
                      color: R.color.black,
                    ),
                  ),
                ),
              ),
            ],
          )),
    );
  }

  Widget rowCategory(
    String image,
    String nameText,
    VoidCallback callback,
  ) {
    return InkWell(
      onTap: callback,
      child: Column(
        children: [
          Image.asset(
            image,
            height: 50.h,
            width: 50.h,
            fit: BoxFit.cover,
          ),
          SizedBox(height: 10),
          Container(
            width: 80.h,
            child: Text(
              nameText,
              style: TextStyle(fontSize: 14.sp),
              textAlign: TextAlign.center,
              maxLines: 2,
            ),
          ),
        ],
      ),
    );
  }

  Widget buildSwiper() {
    return _mainCubit.slider.length == 0
        ? CircularProgressIndicator()
        : Container(
            height: 200.h,
            child: Swiper(
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  child: ClipRRect(
                    child: CachedNetworkImage(
                      imageUrl: _mainCubit.slider[index].src ?? "",
                      fit: BoxFit.cover,
                    ),
                  ),
                );
              },
              itemCount: _mainCubit.slider.length,
              outer: false,
              autoplay: true,
            ),
          );
  }

  Widget buildCategory({String? image, String? title, VoidCallback? callback}) {
    return InkWell(
      onTap: callback,
      child: Container(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            CachedNetworkImage(
              imageUrl: image!,
              height: 80.h,
              width: 80.h,
              fit: BoxFit.cover,
            ),
            SizedBox(height: 10),
            Expanded(
              child: Container(
                width: 100.w,
                child: Text(
                  title!,
                  style: TextStyle(
                    fontSize: 14.sp,
                    fontWeight: FontWeight.w400,
                    color: R.color.black,
                  ),
                  overflow: TextOverflow.ellipsis,
                  textAlign: TextAlign.center,
                  maxLines: 2,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget buildNews({String? image, String? content, VoidCallback? callback}) {
    return InkWell(
      onTap: callback,
      child: Container(
        padding: EdgeInsets.only(left: 10),
        height: 150.h,
        width: 120.w,
        child: Column(
          children: [
            CachedNetworkImage(
              imageUrl: image ?? "",
              height: 120.h,
              width: 120.w,
              fit: BoxFit.cover,
            ),
            SizedBox(height: 10),
            Text(
              content!,
              style: TextStyle(fontSize: 16.sp, color: R.color.black),
              overflow: TextOverflow.ellipsis,
              textAlign: TextAlign.start,
              maxLines: 3,
            ),
          ],
        ),
      ),
    );
  }

  Widget buildProductSeen(int id, String? image, num? price, VoidCallback callback) {
    return InkWell(
      onTap: callback,
      child: Container(
        child: Column(
          children: [
            CachedNetworkImage(
              imageUrl: Util.getImageUrl(image ?? "", host: "https://cdn.chiaki.vn/") ?? "",
              height: 100.h,
              width: 100.w,
              fit: BoxFit.cover,
            ),
            SizedBox(height: 10),
            Center(
              child: Text(
                "${Util.formatMoney(price)}",
                style: TextStyle(
                  fontSize: 16.sp,
                  fontWeight: FontWeight.w600,
                  color: R.color.red,
                ),
                overflow: TextOverflow.ellipsis,
                textAlign: TextAlign.start,
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget titleWidget(String? title, VoidCallback? voidCallback) {
    return Container(
      color: R.color.white,
      padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
      child: Row(
        children: [
          Expanded(
              child: Text(title ?? "",
                  style: TextStyle(
                    fontSize: 16.sp,
                    fontWeight: FontWeight.w500,
                    color: R.color.black,
                  ))),
          Visibility(
            visible: voidCallback != null,
            child: GestureDetector(
              onTap: () => voidCallback!(),
              child: Row(
                children: [
                  Text(
                    R.string.more.tr(),
                    style: TextStyle(
                      color: R.color.gray,
                      fontSize: 14.sp,
                      fontWeight: FontWeight.w400,
                    ),
                  ),
                  Icon(
                    MdiIcons.chevronRight,
                    size: 14.h,
                    color: R.color.gray,
                  ),
                ],
              ),
            ),
          )
        ],
      ),
    );
  }

  Widget buildCustomerCare({VoidCallback? voidCallback}) {
    return InkWell(
      onTap: voidCallback,
      child: Container(
        margin: EdgeInsets.symmetric(horizontal: 90, vertical: 10),
        decoration: BoxDecoration(
          color: R.color.white,
          borderRadius: BorderRadius.all(
            Radius.circular(5),
          ),
        ),
        padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Expanded(
              child: Icon(
                Icons.headset_mic,
                size: 30.h,
                color: R.color.primaryColor,
              ),
            ),
            SizedBox(
              width: 10,
            ),
            Text(
              R.string.customer_care.tr(),
              style: TextStyle(fontSize: 16.sp),
            )
          ],
        ),
      ),
    );
  }
}
