import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:proxibuy/core/config/app_colors.dart';
import 'package:proxibuy/core/gen/assets.gen.dart';

class CategorySelectionCard extends StatelessWidget {
  final String name;
  final SvgGenImage icon;
  final bool isSelected;
  final bool showSelectableIndicator;
  final VoidCallback onTap;

  const CategorySelectionCard({
    Key? key,
    required this.name,
    required this.icon,
    required this.isSelected,
    required this.showSelectableIndicator,
    required this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // رنگ بردر و متن بر اساس انتخاب شدن تغییر می‌کند
    final textAndBorderColor = isSelected ? AppColors.confirm : AppColors.unselectedBorder;

    return GestureDetector(
      onTap: onTap,
      child: Column(
        children: [
          Expanded(
            child: Stack(
              alignment: Alignment.center,
              children: [
                // این ویجت تغییرات در دکوریشن را به صورت انیمیشنی نمایش می‌دهد
                AnimatedContainer(
                  duration: const Duration(milliseconds: 250),
                  curve: Curves.easeInOut,
                  width: double.infinity,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(12),
                    border: Border.all(color: textAndBorderColor, width: isSelected ? 2.0 : 1.5),
                    boxShadow: isSelected
                        ? [
                            BoxShadow(
                              color: AppColors.confirm.withOpacity(0.25),
                              blurRadius: 8,
                              spreadRadius: 2,
                            )
                          ]
                        : [],
                  ),
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Center(child: icon.svg(width: 70, height: 80)),
                  ),
                ),

                // این ویجت انیمیشن بین نمایش تیک، دایره یا هیچ‌کدام را مدیریت می‌کند
                Positioned(
                  top: 5,
                  right: 5,
                  child: AnimatedSwitcher(
                    duration: const Duration(milliseconds: 250),
                    transitionBuilder: (child, animation) {
                      // انیمیشن محو شدن و بزرگ شدن همزمان
                      return FadeTransition(
                        opacity: animation,
                        child: ScaleTransition(
                          scale: animation,
                          child: child,
                        ),
                      );
                    },
                    child: _buildIndicator(),
                  ),
                ),
              ],
            ),
          ),
          const SizedBox(height: 8),
          // رنگ متن هم به صورت انیمیشنی (توسط بازسازی ویجت) تغییر می‌کند
          Text(
            name,
            style: TextStyle(
                fontFamily: 'Dana',
                fontSize: 14,
                fontWeight: FontWeight.bold,
                color: AppColors.border),
            textAlign: TextAlign.center,
            maxLines: 2,
            overflow: TextOverflow.ellipsis,
          ),
        ],
      ),
    );
  }

  /// این متد کمکی مشخص می‌کند کدام نشانگر (تیک، دایره یا هیچکدام) نمایش داده شود
  Widget _buildIndicator() {
    if (isSelected) {
      // نمایش تیک در صورت انتخاب
      return SvgPicture.asset(
        Assets.icons.tickCircle.path,
        key: const ValueKey('tick'), // کلید برای کارکرد صحیح AnimatedSwitcher
      );
    }

    if (showSelectableIndicator) {
      // نمایش دایره در صورتی که آیتم‌های دیگر انتخاب شده‌اند
      return Container(
        key: const ValueKey('circle'), // کلید برای کارکرد صحیح AnimatedSwitcher
        width: 12,
        height: 12,
        decoration: BoxDecoration(
          color: Colors.white,
          shape: BoxShape.circle,
          border: Border.all(color: AppColors.unselectedBorder, width: 2),
        ),
      );
    }

    // در غیر این صورت، چیزی نمایش نده
    return const SizedBox.shrink(key: ValueKey('empty'));
  }
}