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_page.dart';
import 'package:e_commerce_training/src/page/product_properties/product_properties.dart';
import 'package:e_commerce_training/src/page/shopping_cart/shopping_cart.dart';
import 'package:e_commerce_training/src/util/navigation_util.dart';
import 'package:e_commerce_training/src/util/util.dart';
import 'package:e_commerce_training/src/widget/custom_appbar.dart';
import 'package:e_commerce_training/src/widget/empty_widget.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

class ProductPropertiesPage extends StatefulWidget {
  final int itemId;

  const ProductPropertiesPage({Key? key, required this.itemId}) : super(key: key);

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

class _ProductPropertiesPageState extends State<ProductPropertiesPage> {
  late PropertiesCubit _cubit;
  RefreshController _refreshController = RefreshController();
  int count = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: R.color.grey100,
      appBar: appBar(context, R.string.attribute_selection.tr(), rightIcons: [
        MdiIcons.cart
      ], rightCallbacks: [
        () => Util.navigatePage(context, ShoppingCartPage()),
      ]),
      body: BlocProvider(
        create: (context) => _cubit,
        child: BlocConsumer<PropertiesCubit, ProductPropertiesState>(
          listener: (context, state) {
            // TODO: implement listener
          },
          builder: (context, state) {
            DetailProductData? data = _cubit.productData;
            return Stack(
              children: [
                SmartRefresher(
                  enablePullUp: true,
                  controller: _refreshController,
                  child: data == null
                      ? Center(
                          child: EmptyWidget(R.string.cart_empty.tr()),
                        )
                      : Column(
                          children: [
                            Container(
                              padding: EdgeInsets.only(top: 10, right: 20, left: 20, bottom: 30),
                              color: R.color.white,
                              child: Row(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  CachedNetworkImage(
                                    imageUrl: Util.getImageUrl(
                                          data.variants?[_cubit.isSelected].image ?? "",
                                          host: "https://cdn.chiaki.vn/",
                                        ) ??
                                        "",
                                    height: 120.h,
                                    width: 120.h,
                                    fit: BoxFit.cover,
                                  ),
                                  SizedBox(width: 10),
                                  Expanded(
                                    child: Column(
                                      crossAxisAlignment: CrossAxisAlignment.start,
                                      children: [
                                        SizedBox(
                                          child: Text(
                                            data.variants?[_cubit.isSelected].vietnameseName ?? "",
                                            maxLines: 2,
                                            style: TextStyle(
                                              fontSize: 20.sp,
                                              fontWeight: FontWeight.w600,
                                            ),
                                          ),
                                        ),
                                        Text(
                                          data.variants?[_cubit.isSelected].variantCode ?? "",
                                          style: TextStyle(
                                            fontSize: 16.sp,
                                            fontWeight: FontWeight.w600,
                                          ),
                                        ),
                                        SizedBox(height: 10),
                                        Text(
                                          Util.formatMoney(data.variants?[_cubit.isSelected].price),
                                          style: TextStyle(
                                            fontSize: 18.sp,
                                            fontWeight: FontWeight.w600,
                                            color: R.color.red,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            SizedBox(height: 20),
                            Expanded(
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Padding(
                                    padding: EdgeInsets.symmetric(horizontal: 10),
                                    child: RichText(
                                      text: TextSpan(
                                          text: "${data.variants?[_cubit.isSelected].variantCode ?? ""}",
                                          style: TextStyle(fontSize: 16.sp, color: R.color.gray),
                                          children: <TextSpan>[
                                            TextSpan(
                                              text: " ${data.variants?[_cubit.isSelected].variantCode ?? ""}",
                                              style: TextStyle(
                                                fontSize: 16.sp,
                                                color: R.color.black,
                                                fontWeight: FontWeight.w600,
                                              ),
                                            ),
                                          ]),
                                    ),
                                  ),
                                  GridView.builder(
                                    padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
                                    shrinkWrap: true,
                                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                                      crossAxisCount: 3,
                                      crossAxisSpacing: 10.0,
                                      mainAxisSpacing: 10.0,
                                    ),
                                    itemCount: data.variants!.length,
                                    itemBuilder: (BuildContext context, int index) {
                                      return InkWell(
                                        onTap: () {
                                          _cubit.checkSelected(index);
                                        },
                                        child: Container(
                                          decoration: BoxDecoration(
                                            border: Border.all(
                                              width: 2,
                                              color: _cubit.isSelected == index ? R.color.primaryColor : R.color.gray,
                                            ),
                                          ),
                                          child: CachedNetworkImage(
                                            imageUrl: Util.getImageUrl(
                                                  data.variants?[index].image ?? "",
                                                  host: "https://cdn.chiaki.vn/",
                                                ) ??
                                                "",
                                            height: 200.h,
                                            width: 200.h,
                                          ),
                                        ),
                                      );
                                    },
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                ),
                Positioned(
                    bottom: 0,
                    left: 0,
                    child: InkWell(
                      onTap: () {
                        NavigationUtil.rootNavigatePage(
                            context,
                            DetailProductPage(
                              id: data!.variants![_cubit.isSelected].itemId!,
                              productName: data.variants![_cubit.isSelected].vietnameseName ?? "",
                            ));
                      },
                      child: Container(
                        width: MediaQuery.of(context).size.width,
                        padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
                        color: R.color.white,
                        child: Container(
                          padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(4),
                            color: R.color.primaryColor,
                          ),
                          child: Center(
                            child: Text(
                              R.string.done.tr(),
                              style: TextStyle(
                                fontSize: 20.sp,
                                fontWeight: FontWeight.w600,
                                color: R.color.white,
                              ),
                            ),
                          ),
                        ),
                      ),
                    )),
              ],
            );
          },
        ),
      ),
    );
  }
}
