import 'package:cached_network_image/cached_network_image.dart';
import 'package:e_commerce_training/res/R.dart';
import 'package:e_commerce_training/src/page/buy_later/buy_later.dart';
import 'package:e_commerce_training/src/util/util.dart';
import 'package:e_commerce_training/src/widget/custom_appbar.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_rating_bar/flutter_rating_bar.dart';
import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:smooth_star_rating/smooth_star_rating.dart';
import 'package:easy_localization/easy_localization.dart';

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

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

class _BuyLaterPageState extends State<BuyLaterPage> {
  late BuyLaterCubit _cubit;
  RefreshController _refreshController = RefreshController();

  @override
  void initState() {
    _cubit = BuyLaterCubit();
    // TODO: implement initState
    _cubit.addBuyLater();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: R.color.white,
      appBar: appBar(context, "${_cubit.listBuy[_cubit.index].name}", rightIcons: [MdiIcons.cartOutline]),
      body: BlocProvider(
        create: (BuildContext context) => _cubit,
        child: BlocConsumer<BuyLaterCubit, BuyLaterState>(
          listener: (context, state) {
            if (state is BuyLaterFailure) Util.showErrorSnackBar(context, state.error);
            if (!(state is BuyLaterLoading)) {
              _refreshController.refreshCompleted();
              _refreshController.loadComplete();
            }
          },
          builder: (context, state) {
            return ListView.separated(
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  margin: EdgeInsets.symmetric(horizontal: 5, vertical: 8),
                  padding: EdgeInsets.symmetric(horizontal: 5),
                  width: MediaQuery.of(context).size.width,
                  child: Row(
                    children: [
                      CachedNetworkImage(
                        height: 250.h,
                        width: 250.w,
                        imageUrl: "${_cubit.listBuy[_cubit.index].listBuyLater![index].thumb}",
                      ),
                      Expanded(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              "${_cubit.listBuy[_cubit.index].listBuyLater![index].title}",
                              style: TextStyle(fontSize: 16.sp),
                              maxLines: 2,
                            ),
                            SizedBox(height: 5),
                            Row(
                              children: [
                                Text(
                                  R.string.producer.tr(),
                                  style: TextStyle(fontSize: 14.sp, color: R.color.grey500),
                                ),
                                SizedBox(
                                  width: 5,
                                ),
                                Text(
                                  "${_cubit.listBuy[_cubit.index].listBuyLater![index].manufacturer} ",
                                  style: TextStyle(fontSize: 14.sp, color: R.color.black),
                                ),
                              ],
                            ),
                            SizedBox(height: 5),
                            Text(
                              Util.formatMoney(
                                "${_cubit.listBuy[_cubit.index].listBuyLater![index].price}",
                              ),
                              style: TextStyle(color: R.color.red),
                            ),
                            SizedBox(height: 5),
                            Row(
                              children: [
                                RatingBar.builder(
                                  itemSize: 60.h,
                                  initialRating: 3,
                                  minRating: 1,
                                  direction: Axis.horizontal,
                                  allowHalfRating: true,
                                  itemCount: 5,
                                  itemPadding: EdgeInsets.symmetric(horizontal: 2.0),
                                  itemBuilder: (context, _) => Icon(
                                    Icons.star,
                                    color: R.color.orange,
                                  ),
                                  onRatingUpdate: (rating) {
                                    // print(rating);
                                  },
                                ),
                                SizedBox(
                                  width: 3,
                                ),
                                Text(
                                  "${_cubit.listBuy[_cubit.index].listBuyLater![index].evaluate}",
                                  style: TextStyle(fontSize: 14.sp, color: R.color.grey500),
                                )
                              ],
                            ),
                          ],
                        ),
                      )
                    ],
                  ),
                );
              },
              separatorBuilder: (BuildContext context, int index) => Divider(
                color: R.color.grey500,
              ),
              itemCount: _cubit.listBuy[_cubit.index].listBuyLater!.length,
            );
          },
        ),
      ),
    );
  }
}
