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({
    super.key,
    required this.name,
    required this.icon,
    required this.isSelected,
    required this.showSelectableIndicator,
    required this.onTap,
  });

  @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(
                              // ignore: deprecated_member_use
                              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'),
      );
    }

    if (showSelectableIndicator) {
      return Container(
        key: const ValueKey('circle'),
        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'));
  }
}