import 'package:cached_network_image/cached_network_image.dart';
import 'package:dating_touchme_app/model/live/gift_product_model.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class ChatGiftItem extends StatelessWidget {
  final GiftProductModel item;
  final int active;
  final int index;
  final void Function(int) changeActive;

  const ChatGiftItem({
    super.key,
    required this.item,
    required this.active,
    required this.index,
    required this.changeActive,
  });

  @override
  Widget build(BuildContext context) {
    final isActive = active == index;

    return InkWell(
      onTap: () {
        changeActive(index);
      },
      child: Container(
        width: 83.w,
        height: 94.w,
        padding: EdgeInsets.only(top: 10.w),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(9.w)),
          color: Color.fromRGBO(
            117,
            98,
            249,
            isActive ? .2 : 0,
          ),
          border: Border.all(
            width: 1,
            color: Color.fromRGBO(
              117,
              98,
              249,
              isActive ? 1 : 0,
            ),
          ),
        ),
        child: Column(
          children: [
            _buildImage(),
            SizedBox(height: 7.w),
            Text(
              item.productTitle,
              style: TextStyle(
                fontSize: 11.w,
                color: const Color.fromRGBO(51, 51, 51, 1),
              ),
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
            ),
            SizedBox(height: 1.w),
            Text(
              "${item.unitSellingPrice.toInt()}支",
              style: TextStyle(
                fontSize: 7.w,
                color: const Color.fromRGBO(144, 144, 144, 1),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildImage() {
    if (item.mainPic.isNotEmpty) {
      return CachedNetworkImage(
        imageUrl: item.mainPic,
        width: 41.w,
        height: 41.w,
        fit: BoxFit.cover,
        placeholder: (context, url) => Container(
          width: 41.w,
          height: 41.w,
          color: Colors.grey[300],
          child: Center(
            child: SizedBox(
              width: 20.w,
              height: 20.w,
              child: CircularProgressIndicator(
                strokeWidth: 2,
                color: Colors.grey[600],
              ),
            ),
          ),
        ),
        errorWidget: (context, url, error) => Container(
          width: 41.w,
          height: 41.w,
          color: Colors.grey[300],
          child: Icon(Icons.error_outline, size: 20.w, color: Colors.grey),
        ),
      );
    } else {
      return Container(
        width: 41.w,
        height: 41.w,
        color: Colors.grey[300],
      );
    }
  }
}