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/product_detail_response.dart';
import 'package:e_commerce_training/src/page/detail_product/detail_product_cubit.dart';
import 'package:e_commerce_training/src/page/detail_product/detail_product_state.dart';
import 'package:e_commerce_training/src/page/home/home_page.dart';
import 'package:e_commerce_training/src/page/product_properties/product_properties_page.dart';
import 'package:e_commerce_training/src/page/rate_product/rate_product.dart';
import 'package:e_commerce_training/src/page/search/search.dart';
import 'package:e_commerce_training/src/page/shopping_cart/shopping_cart_page.dart';
import 'package:e_commerce_training/src/page/webview_page/webview_page.dart';
import 'package:e_commerce_training/src/util/util.dart';
import 'package:e_commerce_training/src/widget/empty_widget.dart';
import 'package:e_commerce_training/src/widget/star_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:material_design_icons_flutter/material_design_icons_flutter.dart';
import 'package:popup_menu/popup_menu.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';
import 'package:visibility_detector/visibility_detector.dart';

class DetailProductPage extends StatefulWidget {
  final int id;
  final String productName;

  const DetailProductPage({Key? key, required this.id, required this.productName}) : super(key: key);

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

class _DetailProductPageState extends State<DetailProductPage> {
  late DetailProductCubit _cubit;
  RefreshController _refreshController = RefreshController();
  GlobalKey key = GlobalKey();
  final ValueNotifier<bool> _showBottom = ValueNotifier<bool>(false);
  int currentPage = 0;

  @override
  void initState() {
    // TODO: implement initState
    AppRepository repository = AppRepository();
    _cubit = DetailProductCubit(repository);
    _cubit.getListProduct(widget.id);
    super.initState();
  }

  void onClickMenu(MenuItemProvider item) {
    print('Click menu -> ${item.menuTitle}');
  }

  void onDismiss() {
    print('Menu is closed');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: R.color.grey100,
      appBar: AppBar(
        backgroundColor: R.color.primaryColor,
        title: Text(_cubit.productData?.vietnameseName ?? widget.productName),
        actions: [
          IconButton(onPressed: () => Util.navigatePage(context, SearchPage()), icon: Icon(MdiIcons.magnify)),
          IconButton(onPressed: () => Util.navigatePage(context, HomePage()), icon: Icon(MdiIcons.home)),
          IconButton(onPressed: () => Util.navigatePage(context, ShoppingCartPage()), icon: Icon(MdiIcons.cart)),
          IconButton(onPressed: () => maxColumn(), key: key, icon: Icon(MdiIcons.dotsHorizontal))
        ],
      ),
      body: BlocProvider(
        create: (context) => _cubit,
        child: BlocConsumer<DetailProductCubit, DetailProductState>(
          listener: (context, state) {
            // TODO: implement listener
            if (state is DetailProductFailure) Util.showErrorSnackBar(context, state.error);
            // if (state is PaymentSuccess)
            //   Util.navigatePage(context, PaymentPage());
            if (!(state is DetailProductStateLoading)) _refreshController.refreshCompleted();
            if (state is AddProductToCartSuccess) {
              Util.showToast(R.string.add_to_cart_success.tr());
            }
          },
          builder: (context, state) {
            DetailProductData? data = _cubit.productData;
            return Stack(
              children: [
                SmartRefresher(
                  controller: _refreshController,
                  onRefresh: () => _cubit.getListProduct(widget.id, isRefresh: true),
                  child: data == null
                      ? Center(
                          child: EmptyWidget(R.string.cart_empty.tr()),
                        )
                      : ListView(
                          padding: EdgeInsets.only(bottom: 100),
                          shrinkWrap: true,
                          children: [
                            Container(
                              color: R.color.white,
                              height: 250.h,
                              child: Stack(
                                children: [
                                  PageView.builder(
                                    scrollDirection: Axis.horizontal,
                                    itemCount: _cubit.productData!.itemImages!.length,
                                    pageSnapping: true,
                                    itemBuilder: (BuildContext context, int index) {
                                      return CachedNetworkImage(
                                          imageUrl:
                                              Util.getImageUrl(_cubit.productData!.itemImages![index].src, host: "https://cdn.chiaki.vn/") ?? "");
                                    },
                                    onPageChanged: (page) {
                                      setState(() {
                                        currentPage = page;
                                      });
                                    },
                                  ),
                                  Positioned(
                                    bottom: 10,
                                    right: 10,
                                    child: Container(
                                      height: 30.h,
                                      width: 40.w,
                                      decoration: BoxDecoration(
                                        borderRadius: BorderRadius.circular(20),
                                        color: R.color.white,
                                      ),
                                      child: Center(
                                        child: Text(
                                          "${currentPage + 1} / ${_cubit.productData!.itemImages!.length}",
                                        ),
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            Container(
                              padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
                              color: R.color.white,
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(
                                    data.vietnameseName ?? "",
                                    style: TextStyle(
                                      fontSize: 20.sp,
                                      fontWeight: FontWeight.w600,
                                      color: R.color.black,
                                    ),
                                  ),
                                  SizedBox(height: 10),
                                  RichText(
                                    text: TextSpan(
                                        text: R.string.productid.tr(),
                                        style: TextStyle(fontSize: 16.sp, color: R.color.gray),
                                        children: <TextSpan>[
                                          TextSpan(
                                            text: "${data.itemCode}",
                                            style: TextStyle(
                                              fontSize: 16.sp,
                                              color: R.color.black,
                                            ),
                                          ),
                                        ]),
                                  ),
                                  SizedBox(height: 10),
                                  Text(
                                    Util.formatMoney(data.price),
                                    style: TextStyle(
                                      fontSize: 20.sp,
                                      fontWeight: FontWeight.w600,
                                      color: R.color.red,
                                    ),
                                  ),
                                  SizedBox(height: 10),
                                  Row(
                                    children: [
                                      Text(
                                        Util.formatMoney(data.maxPrice),
                                        style: TextStyle(
                                          fontSize: 16.sp,
                                          color: R.color.gray,
                                          decoration: TextDecoration.lineThrough,
                                          decorationThickness: 1.5,
                                        ),
                                      ),
                                      SizedBox(width: 10),
                                      Text(
                                        R.string.saving.tr(),
                                        style: TextStyle(
                                          fontSize: 16.sp,
                                          color: R.color.gray,
                                        ),
                                      ),
                                      SizedBox(width: 5),
                                      Text(
                                        Util.formatMoney(data.minPrice),
                                        style: TextStyle(
                                          fontSize: 16.sp,
                                          fontWeight: FontWeight.w600,
                                          color: R.color.red,
                                        ),
                                      ),
                                    ],
                                  ),
                                  SizedBox(height: 10),
                                  Row(
                                    children: [
                                      StarWidget(itemSize: 20),
                                      SizedBox(
                                        width: 5,
                                      ),
                                      Text(
                                        "(${R.string.seen.tr()} ${data.itemId} ${R.string.comment.tr()})",
                                        style: TextStyle(
                                          fontSize: 16.sp,
                                          color: R.color.primaryColor,
                                        ),
                                      ),
                                    ],
                                  ),
                                ],
                              ),
                            ),
                            SizedBox(height: 10),
                            InkWell(
                              onTap: () {
                                Util.navigatePage(
                                    context,
                                    ProductPropertiesPage(
                                      itemId: data.itemId!,
                                    ));
                              },
                              child: Container(
                                padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
                                color: R.color.white,
                                child: Column(
                                  children: [
                                    Container(
                                      padding: EdgeInsets.symmetric(horizontal: 15, vertical: 15),
                                      decoration: BoxDecoration(
                                        borderRadius: BorderRadius.circular(4),
                                        border: Border.all(color: R.color.grey, width: 1),
                                      ),
                                      child: Row(
                                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                        children: [
                                          Text(
                                            data.variants?[_cubit.index].variantCode ?? "",
                                            style: TextStyle(
                                              color: R.color.black,
                                              fontSize: 16.sp,
                                              fontWeight: FontWeight.w600,
                                            ),
                                          ),
                                          Text(
                                            R.string.replace.tr().toUpperCase(),
                                            style: TextStyle(
                                              color: R.color.primaryColor,
                                              fontSize: 16.sp,
                                              fontWeight: FontWeight.w500,
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                    SizedBox(height: 20),
                                    VisibilityDetector(
                                      key: Key(''),
                                      onVisibilityChanged: (VisibilityInfo visibilityInfo) {
                                        if (this.mounted) {
                                          _showBottom.value = visibilityInfo.visibleFraction < 0.5 && ModalRoute.of(context)?.isCurrent == true;
                                        }
                                      },
                                      child: InkWell(
                                        onTap: () {
                                          showModalBottomSheet<void>(
                                              shape: RoundedRectangleBorder(
                                                borderRadius: BorderRadius.only(topLeft: Radius.circular(12), topRight: Radius.circular(12)),
                                              ),
                                              context: context,
                                              builder: (BuildContext context) {
                                                return buildBottomSheet(
                                                  context,
                                                );
                                              });
                                        },
                                        child: Container(
                                          padding: EdgeInsets.symmetric(horizontal: 15, vertical: 15),
                                          decoration: BoxDecoration(
                                            borderRadius: BorderRadius.circular(4),
                                            color: R.color.accentColor,
                                          ),
                                          child: Center(
                                            child: Text(
                                              R.string.buy.tr().toUpperCase(),
                                              style: TextStyle(color: R.color.white, fontSize: 16.sp, fontWeight: FontWeight.w600),
                                            ),
                                          ),
                                        ),
                                      ),
                                    ),
                                    SizedBox(height: 10),
                                    Row(
                                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                      children: [
                                        buildGiveSpecial(R.drawable.ic_return, R.string.note_return.tr()),
                                        buildGiveSpecial(R.drawable.ic_commit, R.string.note_commit.tr()),
                                        buildGiveSpecial(R.drawable.ic_ship, R.string.note_ship.tr()),
                                      ],
                                    ),
                                  ],
                                ),
                              ),
                            ),
                            SizedBox(height: 10),
                            Container(
                              padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
                              color: R.color.white,
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: [
                                  Column(
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    children: [
                                      Text(
                                        "${data.itemId}${R.string.shop_sale.tr()}",
                                        style: TextStyle(
                                          fontSize: 16.sp,
                                          fontWeight: FontWeight.w500,
                                          color: R.color.black,
                                        ),
                                      ),
                                      SizedBox(height: 5),
                                      Row(
                                        children: [
                                          Text(
                                            "${R.string.price_from.tr()}",
                                            style: TextStyle(
                                              fontSize: 16.sp,
                                              fontWeight: FontWeight.w500,
                                              color: R.color.black,
                                            ),
                                          ),
                                          SizedBox(width: 5),
                                          Text(
                                            Util.formatMoney(data.price),
                                            style: TextStyle(
                                              fontSize: 16.sp,
                                            ),
                                          ),
                                        ],
                                      )
                                    ],
                                  ),
                                  Container(
                                    padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                                    decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(4),
                                      border: Border.all(
                                        color: R.color.primaryColor,
                                        width: 1,
                                      ),
                                    ),
                                    child: Center(
                                      child: Text(
                                        R.string.price_comparing.tr(),
                                        style: TextStyle(color: R.color.primaryColor, fontSize: 16.sp),
                                      ),
                                    ),
                                  )
                                ],
                              ),
                            ),
                            SizedBox(height: 10),
                            Container(
                              padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
                              color: R.color.white,
                              child: Row(
                                children: [
                                  Image.asset(
                                    R.drawable.ic_health,
                                    height: 80.h,
                                    width: 80.w,
                                  ),
                                  SizedBox(width: 10),
                                  Column(
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    children: [
                                      Text(
                                        R.string.chiaki_shop.tr(),
                                        style: TextStyle(
                                          color: R.color.black,
                                          fontSize: 16.sp,
                                          fontWeight: FontWeight.w600,
                                        ),
                                      ),
                                      StarWidget(itemSize: 20),
                                    ],
                                  ),
                                  Spacer(),
                                  InkWell(
                                    onTap: () {
                                      Util.navigatePage(
                                        context,
                                        WebviewPage(
                                          title: R.string.chiaki_shop.tr(),
                                          url: "https://chiaki.vn/tin-tuc/cach-dung-chi-nha-khoa",
                                        ),
                                      );
                                    },
                                    child: Container(
                                      padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                                      decoration: BoxDecoration(
                                        borderRadius: BorderRadius.circular(4),
                                        border: Border.all(
                                          color: R.color.primaryColor,
                                          width: 1,
                                        ),
                                      ),
                                      child: Center(
                                        child: Text(
                                          R.string.see_shop.tr().toUpperCase(),
                                          style: TextStyle(
                                            color: R.color.primaryColor,
                                            fontSize: 14.sp,
                                            fontWeight: FontWeight.w600,
                                          ),
                                        ),
                                      ),
                                    ),
                                  )
                                ],
                              ),
                            ),
                            SizedBox(height: 10),
                            Container(
                              color: R.color.white,
                              padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
                              child: Column(
                                children: [
                                  titleWidget(R.string.same_product.tr(), null),
                                  buildSameProduct(),
                                ],
                              ),
                            ),
                            SizedBox(height: 10),
                            Container(
                              color: R.color.white,
                              padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
                              child: Column(
                                children: [
                                  titleWidget(R.string.infor_product.tr(), null),
                                  SizedBox(height: 10),
                                  Divider(height: 1, color: R.color.grey),
                                  SizedBox(height: 10),
                                  buildRowText(
                                      R.string.producer.tr(),
                                      R.string.provide.tr(),
                                      R.string.status.tr(),
                                      R.string.origin.tr(),
                                      "${data.baseCategoryName}",
                                      R.string.chiaki_shop.tr(),
                                      "${data.baseCategoryName}",
                                      "${data.baseCategoryName}", () {
                                    Util.navigatePage(
                                      context,
                                      WebviewPage(
                                        title: "${data.baseCategoryName}",
                                        url: "https://chiaki.vn/tin-tuc/cach-dung-chi-nha-khoa",
                                      ),
                                    );
                                  }, () {
                                    Util.navigatePage(
                                      context,
                                      WebviewPage(
                                        title: R.string.chiaki_shop.tr(),
                                        url: "https://chiaki.vn/tin-tuc/cach-dung-chi-nha-khoa",
                                      ),
                                    );
                                  }),
                                  SizedBox(height: 10),
                                  Divider(height: 1, color: R.color.grey),
                                  SizedBox(height: 10),
                                  Center(
                                    child: InkWell(
                                      onTap: () {
                                        Util.navigatePage(
                                          context,
                                          WebviewPage(
                                            title: "${data.baseCategoryName}",
                                            url: "https://chiaki.vn/tin-tuc/cach-dung-chi-nha-khoa",
                                          ),
                                        );
                                      },
                                      child: Text(
                                        R.string.more.tr(),
                                        style: TextStyle(
                                          fontSize: 16.sp,
                                          fontWeight: FontWeight.w600,
                                          color: R.color.primaryColor,
                                        ),
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            SizedBox(height: 10),
                            Container(
                              color: R.color.white,
                              padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
                              child: Column(
                                children: [
                                  Row(
                                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                    children: [
                                      Expanded(
                                        child: Column(
                                          crossAxisAlignment: CrossAxisAlignment.start,
                                          children: [
                                            Text(
                                              R.string.report_product.tr(),
                                              style: TextStyle(
                                                fontSize: 16.sp,
                                                fontWeight: FontWeight.w600,
                                              ),
                                            ),
                                            SizedBox(height: 5),
                                            Row(
                                              children: [
                                                StarWidget(itemSize: 20),
                                                SizedBox(width: 5),
                                                Text(
                                                  "4.8/5",
                                                  style: TextStyle(fontSize: 16.sp, fontWeight: FontWeight.w600, color: R.color.red),
                                                ),
                                                SizedBox(width: 5),
                                                Expanded(
                                                  child: Text(
                                                    "(${R.string.seen.tr()} ${data.itemId} ${R.string.comment.tr()})",
                                                    style: TextStyle(
                                                      fontSize: 16.sp,
                                                      color: R.color.grey500,
                                                    ),
                                                    overflow: TextOverflow.ellipsis,
                                                  ),
                                                ),
                                              ],
                                            )
                                          ],
                                        ),
                                      ),
                                      Text(
                                        R.string.more.tr(),
                                        style: TextStyle(color: R.color.primaryColor, fontSize: 16.sp, fontWeight: FontWeight.w600),
                                      ),
                                    ],
                                  ),
                                  SizedBox(
                                    height: 40,
                                  ),
                                  Container(
                                    child: Column(
                                      crossAxisAlignment: CrossAxisAlignment.start,
                                      children: [
                                        ListView.builder(
                                          physics: NeverScrollableScrollPhysics(),
                                          shrinkWrap: true,
                                          itemCount: _cubit.productData!.itemReviews!.length,
                                          itemBuilder: (BuildContext context, int index) {
                                            ItemReview data = _cubit.productData!.itemReviews![index];
                                            return buildComment("${data.reviewHtml}", "${data.fullName}", "${data.comment}", "${data.reviewDate}");
                                          },
                                        ),
                                        InkWell(
                                          onTap: () {
                                            Util.navigatePage(
                                              context,
                                              WebviewPage(
                                                title: "${data.vietnameseName}",
                                                url: "https://www.google.com/shopping/ratings/account/metrics?q=chiaki.vn&c=VN&v=17&hl=vi",
                                              ),
                                            );
                                          },
                                          child: Text(
                                            R.string.see_report.tr(),
                                            style: TextStyle(fontSize: 16.sp, fontWeight: FontWeight.w600, color: R.color.primaryColor),
                                          ),
                                        ),
                                        SizedBox(height: 10),
                                        InkWell(
                                          onTap: () {
                                            Util.navigatePage(context, RateProductPage());
                                          },
                                          child: Container(
                                            padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
                                            decoration: BoxDecoration(
                                                borderRadius: BorderRadius.circular(4), border: Border.all(width: 1, color: R.color.primaryColor)),
                                            child: Center(
                                              child: Text(
                                                R.string.note_comment.tr(),
                                                style: TextStyle(color: R.color.primaryColor, fontSize: 16.sp, fontWeight: FontWeight.w600),
                                              ),
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                ),
                Positioned(
                  right: 0,
                  left: 0,
                  bottom: 0,
                  child: ValueListenableBuilder(
                    valueListenable: _showBottom,
                    child: Container(),
                    builder: (BuildContext context, bool value, Widget? child) {
                      return Container(
                        height: value ? 60.h : 0,
                        decoration: BoxDecoration(boxShadow: [
                          BoxShadow(
                            color: R.color.white,
                            spreadRadius: 0,
                            blurRadius: 5,
                            offset: Offset(
                              0,
                              -5,
                            ),
                          )
                        ]),
                        child: InkWell(
                          onTap: () {
                            _cubit.addProductDetailToCart();
                            Util.navigatePage(context, ShoppingCartPage());
                          },
                          child: Container(
                            margin: EdgeInsets.symmetric(horizontal: 15, vertical: 5),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(4),
                              color: R.color.accentColor,
                            ),
                            child: Center(
                              child: Text(
                                R.string.buy.tr().toUpperCase(),
                                style: TextStyle(
                                  color: R.color.white,
                                  fontSize: 16.sp,
                                  fontWeight: FontWeight.w600,
                                ),
                              ),
                            ),
                          ),
                        ),
                      );
                    },
                  ),
                ),
              ],
            );
          },
        ),
      ),
    );
  }

  Widget buildBottomSheet(BuildContext context) {
    DetailProductData? data = _cubit.productData;
    return Container(
      height: 240.h,
      padding: EdgeInsets.only(right: 10, top: 15, left: 10, bottom: 5),
      child: Column(
        children: [
          Row(
            children: [
              Icon(
                MdiIcons.checkCircleOutline,
                color: R.color.green,
                size: 20.h,
              ),
              SizedBox(width: 10),
              Expanded(
                child: Text(
                  R.string.title.tr(),
                  style: TextStyle(
                    color: R.color.green,
                    fontSize: 16.sp,
                    fontWeight: FontWeight.w300,
                  ),
                ),
              ),
              InkWell(
                onTap: () {
                  Navigator.pop(context);
                },
                child: Icon(
                  MdiIcons.close,
                  color: R.color.grey,
                  size: 20.h,
                ),
              ),
            ],
          ),
          SizedBox(height: 5),
          Row(
            children: [
              CachedNetworkImage(
                imageUrl: Util.getImageUrl(data?.image ?? "", host: "https://cdn.chiaki.vn/") ?? "",
                height: 80.h,
                width: 80.w,
              ),
              SizedBox(width: 20),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  SizedBox(
                    width: 100.w,
                    child: Text(
                      data?.vietnameseName ?? "",
                      style: TextStyle(),
                      overflow: TextOverflow.ellipsis,
                      maxLines: 1,
                    ),
                  ),
                  SizedBox(height: 5),
                  RichText(
                    text: TextSpan(text: R.string.provide.tr(), style: TextStyle(fontSize: 16.sp, color: R.color.grey500), children: <TextSpan>[
                      TextSpan(
                        text: "${data?.baseCategoryName}",
                        style: TextStyle(
                          fontSize: 16.sp,
                          color: R.color.red,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                    ]),
                  ),
                  SizedBox(height: 5),
                  RichText(
                    text: TextSpan(text: R.string.producer.tr(), style: TextStyle(fontSize: 16.sp, color: R.color.grey500), children: <TextSpan>[
                      TextSpan(
                        text: data?.brandName ?? "",
                        style: TextStyle(
                          fontSize: 16.sp,
                          color: R.color.red,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                    ]),
                  ),
                  SizedBox(height: 5),
                  Text(
                    Util.formatMoney(data?.price ?? ""),
                    style: TextStyle(
                      fontSize: 16.sp,
                      color: R.color.red,
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                ],
              ),
            ],
          ),
          SizedBox(height: 20),
          Divider(height: 1, color: R.color.grey500),
          SizedBox(height: 20),
          InkWell(
            onTap: () {
              _cubit.addProductDetailToCart();
              Navigator.pop(context);
              Util.navigatePage(context, ShoppingCartPage());
            },
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 15, vertical: 15),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(4),
                color: R.color.accentColor,
              ),
              child: Center(
                child: Text(
                  R.string.buy.tr().toUpperCase(),
                  style: TextStyle(
                    color: R.color.white,
                    fontSize: 16.sp,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget buildComment(String avatar, String nameUser, String content, String time) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
      child: Column(
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              CircleAvatar(
                radius: 30.h,
                backgroundColor: R.color.white,
                backgroundImage: CachedNetworkImageProvider(avatar),
              ),
              SizedBox(width: 10),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      nameUser,
                      style: TextStyle(
                        fontSize: 16.sp,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                    SizedBox(height: 5),
                    Row(
                      children: [
                        Expanded(
                          child: Row(
                            children: [
                              Icon(
                                MdiIcons.checkCircleOutline,
                                color: R.color.green,
                                size: 20.h,
                              ),
                              SizedBox(width: 5),
                              Text(
                                R.string.buy_in_chiaki.tr(),
                                style: TextStyle(
                                  fontSize: 16.sp,
                                  color: R.color.green,
                                ),
                              ),
                            ],
                          ),
                        ),
                        InkWell(
                          onTap: () {
                            _cubit.checkLike();
                          },
                          child: Icon(
                            _cubit.check ? MdiIcons.thumbUp : MdiIcons.thumbUpOutline,
                            color: R.color.gray,
                            size: 0.h,
                          ),
                        ),
                      ],
                    ),
                    SizedBox(height: 5),
                    StarWidget(itemSize: 20),
                    SizedBox(height: 5),
                    Text(
                      content,
                      style: TextStyle(fontSize: 16.sp),
                      overflow: TextOverflow.ellipsis,
                      maxLines: 2,
                    ),
                    SizedBox(height: 5),
                    Text(
                      time,
                      style: TextStyle(
                        fontSize: 16.sp,
                        color: R.color.grey500,
                        fontWeight: FontWeight.normal,
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
          SizedBox(height: 10),
          Divider(height: 1, color: R.color.grey500),
          SizedBox(height: 10),
        ],
      ),
    );
  }

  Widget buildRowText(String title1, String title2, String title3, String title4, String title5, String title6, String title7, String title8,
      VoidCallback callback, VoidCallback callback1) {
    return Row(
      children: [
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              title1,
              style: TextStyle(
                fontSize: 16.sp,
              ),
            ),
            SizedBox(height: 10),
            Text(
              title2,
              style: TextStyle(
                fontSize: 16.sp,
              ),
            ),
            SizedBox(height: 10),
            Text(
              title3,
              style: TextStyle(
                fontSize: 16.sp,
              ),
            ),
            SizedBox(height: 10),
            Text(
              title4,
              style: TextStyle(
                fontSize: 16.sp,
              ),
            ),
            SizedBox(height: 10),
          ],
        ),
        Spacer(flex: 1),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            InkWell(
              onTap: callback,
              child: Text(
                title5,
                style: TextStyle(fontSize: 16.sp, fontWeight: FontWeight.w300, color: R.color.black, decoration: TextDecoration.underline),
              ),
            ),
            SizedBox(height: 10),
            InkWell(
              onTap: callback1,
              child: Text(
                title6,
                style: TextStyle(fontSize: 16.sp, fontWeight: FontWeight.w300, color: R.color.black, decoration: TextDecoration.underline),
              ),
            ),
            SizedBox(height: 10),
            Text(
              title7,
              style: TextStyle(
                fontSize: 16.sp,
                fontWeight: FontWeight.w600,
                color: R.color.black,
              ),
            ),
            SizedBox(height: 10),
            Text(
              title8,
              style: TextStyle(
                fontSize: 16.sp,
                fontWeight: FontWeight.w600,
                color: R.color.black,
              ),
            ),
          ],
        ),
        Spacer(flex: 2),
      ],
    );
  }

  Widget buildSameProduct() {
    return Container(
      height: 250.h,
      padding: EdgeInsets.only(top: 15),
      child: Center(
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: _cubit.productData!.similarProduct!.length,
          itemBuilder: (BuildContext context, int index) {
            var data = _cubit.productData!.similarProduct![index];
            return Container(
              padding: EdgeInsets.symmetric(horizontal: 10),
              height: 160.h,
              width: 160.w,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  CachedNetworkImage(
                    imageUrl: Util.getImageUrl(data.image, host: "https://cdn.chiaki.vn/") ?? "",
                    height: 150.h,
                    width: 150.h,
                    fit: BoxFit.cover,
                  ),
                  SizedBox(height: 5),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        "${data.vietnameseValue}",
                        style: TextStyle(fontSize: 16.sp),
                        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 buildGiveSpecial(String image, String content) {
    return Container(
      width: 60.w,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Image.asset(
            image,
            height: 30.h,
            width: 30.w,
          ),
          Text(
            content,
            style: TextStyle(fontSize: 14.sp),
            overflow: TextOverflow.visible,
            textAlign: TextAlign.center,
            maxLines: 2,
          )
        ],
      ),
    );
  }

  Widget titleWidget(String? title, VoidCallback? voidCallback) {
    return Row(
      children: [
        Expanded(
            child: Text(title ?? "",
                style: TextStyle(
                  fontSize: 16.sp,
                  fontWeight: FontWeight.w600,
                ))),
        Visibility(
          visible: voidCallback != null,
          child: GestureDetector(
            onTap: () => voidCallback!(),
            child: Text(
              R.string.more.tr(),
              style: TextStyle(color: R.color.grey500, fontSize: 16.sp, fontWeight: FontWeight.w400),
            ),
          ),
        )
      ],
    );
  }

  void maxColumn() {
    PopupMenu menu = PopupMenu(
        maxColumn: 4,
        items: [
          MenuItem(
              title: R.string.home.tr(),
              image: Icon(
                Icons.home,
                color: R.color.white,
              )),
          MenuItem(
              title: R.string.category.tr(),
              image: Icon(
                Icons.menu,
                color: R.color.white,
              )),
          MenuItem(
              title: R.string.account.tr(),
              image: Icon(
                Icons.account_circle_outlined,
                color: R.color.white,
              )),
          MenuItem(
              title: R.string.share.tr(),
              image: Icon(
                Icons.share,
                color: R.color.white,
              ))
        ],
        onClickMenu: onClickMenu,
        onDismiss: onDismiss);
    menu.show(widgetKey: key);
  }
}
