import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:flutter_svg/svg.dart';
import 'package:initial_folder/helper/validator.dart';
import 'package:initial_folder/providers/cart_provider.dart';
import 'package:initial_folder/providers/order_provider.dart';
import 'package:initial_folder/providers/page_provider.dart';
import 'package:initial_folder/providers/whislist_provider.dart';
import 'package:initial_folder/providers/wishlist_post_provider.dart';
import 'package:initial_folder/screens/home/home_screen.dart';
import 'package:initial_folder/size_config.dart';
import 'package:initial_folder/theme.dart';
import 'package:provider/provider.dart';
import 'package:initial_folder/providers/carts_provider.dart' as cartsProv;

class CartList extends StatefulWidget {
  const CartList({
    Key? key,
    required this.image,
    required this.title,
    required this.instruktur,
    required this.price,
    required this.id,
    required this.idCourse,
    this.discountPrice,
    this.isSelected = false,
  }) : super(key: key);

  final String image, instruktur, title, price, id, idCourse;
  final String? discountPrice;
  final bool isSelected;

  @override
  State<CartList> createState() => _CartListState();
}

class _CartListState extends State<CartList> {
  @override
  Widget build(BuildContext context) {
    final pageProvider = Provider.of<PageProvider>(context);

    Future<void> getCartsLength() async {}

    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Padding(
        padding: EdgeInsets.only(bottom: getProportionateScreenHeight(20)),
        child: Container(
          width: getProportionateScreenWidth(330 + 108),
          child: Stack(
            children: [
              Container(
                height: getProportionateScreenHeight(98),
                width: getProportionateScreenWidth(330),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(5),
                  color: Theme.of(context).brightness == Brightness.dark
                      ? seventeenColor
                      : sixteenColor,
                ),
              ),
              Padding(
                padding: EdgeInsets.only(
                  top: getProportionateScreenHeight(9),
                  right: getProportionateScreenWidth(15),
                ),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Flexible(
                      flex: 11,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Container(
                            width: getProportionateScreenWidth(156),
                            height: getProportionateScreenWidth(88),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(2),
                              image: DecorationImage(
                                fit: BoxFit.cover,
                                image: NetworkImage(widget.image),
                              ),
                            ),
                          ),
                          SizedBox(height: getProportionateScreenHeight(8)),
                        ],
                      ),
                    ),
                    SizedBox(width: getProportionateScreenWidth(10)),
                    Flexible(
                      flex: 7,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            widget.title,
                            style: thirdTextStyle.copyWith(
                              fontWeight: semiBold,
                              fontSize: getProportionateScreenWidth(14),
                            ),
                            maxLines: 2,
                            overflow: TextOverflow.ellipsis,
                          ),
                          SizedBox(height: getProportionateScreenHeight(2)),
                          Text(
                            'oleh ${widget.instruktur}',
                            style: primaryTextStyle.copyWith(
                              fontSize: getProportionateScreenWidth(12),
                              fontWeight: light,
                            ),
                          ),
                          Visibility(
                            visible: widget.discountPrice != "0",
                            child: Text(
                              numberFormat(widget.discountPrice),
                              style: thirdTextStyle.copyWith(
                                fontSize: getProportionateScreenWidth(10),
                                fontWeight: light,
                              ),
                            ),
                          ),
                          Visibility(
                            visible: widget.discountPrice == widget.price,
                            child: SizedBox(
                                height: getProportionateScreenHeight(2)),
                          ),
                          Visibility(
                            visible: widget.discountPrice != widget.price,
                            child: Text(
                              numberFormat(widget.price),
                              style: thirdTextStyle.copyWith(
                                decoration: TextDecoration.lineThrough,
                                color: secondaryColor,
                                fontSize: getProportionateScreenWidth(10),
                                fontWeight: light,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              // widget.isSelected
              //     ? Padding(
              //         padding: EdgeInsets.only(
              //           top: getProportionateScreenHeight(13),
              //           left: getProportionateScreenWidth(6),
              //         ),
              //         child:
              //             SvgPicture.asset("assets/icons/cart_checklist.svg"),
              //       )
              //     : Padding(
              //         padding: EdgeInsets.only(
              //           top: getProportionateScreenHeight(13),
              //           left: getProportionateScreenWidth(6),
              //         ),
              //         child:
              //             SvgPicture.asset("assets/icons/cart_unchecklist.svg"),
              //       ),
              widget.isSelected
                  ? Container(
                      height: getProportionateScreenHeight(98),
                      width: getProportionateScreenWidth(330),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(5),
                        color: Theme.of(context).brightness == Brightness.light
                            ? baruTexthitam.withOpacity(0.1)
                            : baruTexthitam.withOpacity(0.3),
                      ),
                    )
                  : Container(),
              Consumer<cartsProv.CartsProvider>(
                builder: (context, state, _) {
                  if (state.state == cartsProv.ResultState.Loading) {
                    return CircularProgressIndicator(
                      color: primaryColor,
                      strokeWidth: 2,
                    );
                  } else {
                    return Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: [
                        GestureDetector(
                          onTap: () async {
                            await Provider.of<WishlistPostProvider>(context,
                                    listen: false)
                                .addWishlist(int.parse(widget.idCourse));
                            await Provider.of<WishlistProvider>(context,
                                    listen: false)
                                .getWishlist();
                            showDialog(
                              context: context,
                              builder: (context) => AlertDialog(
                                backgroundColor:
                                    Theme.of(context).colorScheme.background,
                                elevation: 0.0,
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(10),
                                ),
                                contentPadding:
                                    EdgeInsets.fromLTRB(12, 26, 22, 15),
                                content: Padding(
                                  padding: EdgeInsets.only(
                                      bottom: getProportionateScreenHeight(14)),
                                  child: Text(
                                    textAlign: TextAlign.left,
                                    'Berhasil memindahkan kursus ke wishlist',
                                    style: thirdTextStyle.copyWith(
                                      fontSize: getProportionateScreenWidth(12),
                                    ),
                                  ),
                                ),
                                actions: [
                                  SizedBox(
                                      width: getProportionateScreenWidth(10)),
                                  GestureDetector(
                                    onTap: () {
                                      Navigator.of(context).pop();
                                    },
                                    child: Text(
                                      'Kembali',
                                      style: thirdTextStyle.copyWith(
                                        fontSize:
                                            getProportionateScreenWidth(12),
                                        color: primaryColor,
                                      ),
                                    ),
                                  ),
                                  SizedBox(
                                      width: getProportionateScreenWidth(3)),
                                  GestureDetector(
                                    onTap: () {
                                      pageProvider.currentIndex = 3;
                                      Navigator.pushAndRemoveUntil(
                                          context,
                                          MaterialPageRoute(
                                            builder: (context) => HomeScreen(),
                                          ),
                                          (route) => false);
                                    },
                                    child: Text(
                                      'Lihat Wishlist',
                                      style: thirdTextStyle.copyWith(
                                        fontSize:
                                            getProportionateScreenWidth(12),
                                        color: primaryColor,
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            );
                          },
                          child: SvgPicture.asset(
                            "assets/icons/cart_wishlist.svg",
                            height: getProportionateScreenHeight(96),
                            width: getProportionateScreenWidth(45),
                          ),
                        ),
                        GestureDetector(
                          onTap: () async {
                            await Provider.of<CartProvider>(context,
                                    listen: false)
                                .deleteCart(widget.id);
                            Provider.of<OrderProvider>(context, listen: false)
                                .removeOrder(
                              id: widget.idCourse,
                              title: widget.title,
                              price: widget.price,
                              imageUrl: widget.image,
                              discountPrice: widget.discountPrice,
                              instructor: widget.instruktur,
                            );
                            showDialog(
                              context: context,
                              builder: (context) => AlertDialog(
                                backgroundColor:
                                    Theme.of(context).colorScheme.background,
                                elevation: 0.0,
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(10),
                                ),
                                contentPadding:
                                    EdgeInsets.fromLTRB(12, 26, 22, 15),
                                content: Padding(
                                  padding: EdgeInsets.only(
                                      bottom: getProportionateScreenHeight(14)),
                                  child: Text(
                                    textAlign: TextAlign.center,
                                    'Berhasil menghapus kursus',
                                    style: thirdTextStyle.copyWith(
                                      fontSize: getProportionateScreenWidth(12),
                                    ),
                                  ),
                                ),
                              ),
                            );
                            await Provider.of<cartsProv.CartsProvider>(context,
                                    listen: false)
                                .getCarts();
                          },
                          child: SvgPicture.asset(
                            "assets/icons/cart_remove.svg",
                            height: getProportionateScreenHeight(96),
                            width: getProportionateScreenWidth(45),
                          ),
                        ),
                      ],
                    );
                  }
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}