import 'package:concierge/presentation/theme/app_colors.dart';
import 'package:concierge/presentation/widgets/toggle_checkmark.dart';
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';

class ToggleListItem extends StatelessWidget {
  const ToggleListItem({
    super.key,
    required this.icon,
    required this.title,
    required this.subtitle,
    required this.isSelected,
    required this.onClick,
    this.onSelectedExtra,
  });

  final IconData icon;
  final String title;
  final String subtitle;
  final bool isSelected;
  final Widget? onSelectedExtra;
  final void Function(bool) onClick;

  @override
  Widget build(BuildContext context) {
    final Color bgColor;
    final Color iconBgColor;
    final Border? borderSide;
    if (isSelected) {
      bgColor = AppColors.colorSecondary;
      iconBgColor = Color(0xFFD7C9B9);
      borderSide = null;
    } else {
      bgColor = Colors.white;
      iconBgColor = AppColors.colorSecondary;
      borderSide = Border.all(color: Colors.grey.shade300, width: 1);
    }

    return Ink(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(16),
        color: bgColor,
        border: borderSide,
      ),
      child: InkWell(
        borderRadius: BorderRadius.circular(16),
        onTap: () {
          onClick(!isSelected);
        },
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              Row(
                children: [
                  Container(
                    width: 36,
                    height: 36,
                    decoration: BoxDecoration(shape: BoxShape.circle, color: iconBgColor),
                    child: Icon(
                      icon,
                      size: 20,
                      color: Colors.black,
                    ),
                  ),
                  Gap(12),
                  Expanded(
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          title,
                          style: TextStyle(color: Colors.black),
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                        ),
                        Text(
                          subtitle,
                          style: TextStyle(
                            color: Colors.black.withAlpha((0.5 * 255).toInt()),
                            fontSize: 12,
                          ),
                        ),
                      ],
                    ),
                  ),
                  Gap(12),
                  ToggleCheckmark(
                    isSelected: isSelected,
                    size: 32,
                  ),
                ],
              ),
              if (isSelected) onSelectedExtra ?? const SizedBox(),
            ],
          ),
        ),
      ),
    );
  }
}