import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../../app.dart';

class CartItem extends StatelessWidget {
  final CartItemModel item;
  CartItem({
    required this.item,
  });

  @override
  Widget build(BuildContext context) {
    return GetBuilder<CartController>(
      init: CartController(),
      builder: (cc) => Container(
        padding: const EdgeInsets.all(8),
        child: Container(
          constraints: BoxConstraints(
            minHeight: 90.h,
          ),
          child: Row(
            children: [
              // image
              SizedBox(
                width: 90.w,
                height: 90.h,
                child: Container(
                  padding: EdgeInsets.all(2),
                  decoration: BoxDecoration(
                    color: Color(0xFFF5F6F9),
                    borderRadius: BorderRadius.circular(4),
                  ),
                  child: cachedImageNetwork(
                    item.product.images.length > 0 ? item.product.images.first.originalImageUrl : '',
                    BoxFit.fill,
                    const BorderRadius.all(Radius.circular(4.0)),
                    90.w,
                    90.h,
                  ),
                ),
              ),
              SizedBox(width: 20),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      item.product.name,
                      style: TextStyle(fontWeight: FontWeight.normal, fontSize: 13.sp),
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                    ),

                    SizedBox(height: 8.h),

                    // print attributes
                    item.product.superAttributes != null
                        ? Column(
                            children: item.product.superAttributes!
                                .map(
                                  (attribute) => Container(
                                    margin: const EdgeInsets.only(bottom: 8),
                                    child: Row(
                                      children: [
                                        Text(
                                          attribute.name + ': ',
                                          overflow: TextOverflow.ellipsis,
                                          style: TextStyle(fontSize: 13.sp),
                                        ),
                                        SizedBox(width: 4.w),
                                        Expanded(
                                          child: Text(
                                            attribute.label,
                                            style: TextStyle(fontWeight: FontWeight.w500, fontSize: 13.sp),
                                            maxLines: 1,
                                            overflow: TextOverflow.ellipsis,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                )
                                .toList(),
                          )
                        : SizedBox(height: 8.h),

                    Text(item.formattedPrice, style: new TextStyle(color: ThemeColor.mainColor, fontSize: 11.sp)),
                    SizedBox(height: 8.h),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        Container(
                          height: 28.h,
                          decoration: new BoxDecoration(
                            color: ThemeColor.colorEFF0F4,
                            borderRadius: BorderRadius.circular(8),
                          ),
                          child: FittedBox(
                            child: ItemQuantityCounter(
                              decrementCallback: () => cc.onIncDecTapped(context, item.id, item.quantity - 1),
                              incrementCallback: () => cc.onIncDecTapped(context, item.id, item.quantity + 1),
                              text: item.quantity.toString(),
                            ),
                          ),
                        ),
                        Spacer(),
                        FittedBox(
                          fit: BoxFit.scaleDown,
                          child: CircularSplashButton(
                            icon: 'assets/icons/love_icon.svg',
                            callback: () => cc.onWishlistTapped(context, item.product.id),
                          ),
                        ),
                        SizedBox(width: 8),
                        FittedBox(
                          fit: BoxFit.scaleDown,
                          child: CircularSplashButton(
                            icon: 'assets/icons/trash_icon.svg',
                            callback: () => cc.onTrashTapped(context, item.id),
                          ),
                        ),
                      ],
                    )
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}
