import 'package:enaklo_pos/core/components/custom_modal_dialog.dart';
import 'package:enaklo_pos/core/components/spaces.dart';
import 'package:enaklo_pos/core/constants/colors.dart';
import 'package:flutter/material.dart';

class TypeDialog extends StatefulWidget {
  const TypeDialog({super.key});

  @override
  State<TypeDialog> createState() => _TypeDialogState();
}

class _TypeDialogState extends State<TypeDialog> {
  String selectedType = 'dine_in';

  List<Map<String, dynamic>> types = [
    {'value': 'dine_in', 'label': 'Dine In', 'icon': Icons.restaurant_outlined},
    {
      'value': 'take_away',
      'label': 'Take Away',
      'icon': Icons.takeout_dining_outlined
    },
    {
      'value': 'delivery',
      'label': 'Delivery',
      'icon': Icons.delivery_dining_outlined
    },
  ];

  @override
  Widget build(BuildContext context) {
    return CustomModalDialog(
      title: 'Pilih Tipe',
      subtitle: 'Silahkan pilih tipe yang sesuai',
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: List.generate(types.length, (index) {
            return _buildItem(context, types[index]);
          }),
        ),
      ),
    );
  }

  Widget _buildItem(BuildContext context, Map<String, dynamic> type) {
    return GestureDetector(
      onTap: () {
        setState(() {
          selectedType = type['value']!;
        });
      },
      child: Container(
        padding: const EdgeInsets.symmetric(vertical: 12.0, horizontal: 16.0),
        margin: const EdgeInsets.only(bottom: 8.0),
        decoration: BoxDecoration(
          color: selectedType == type['value']
              ? AppColors.primary
              : AppColors.white,
          borderRadius: BorderRadius.circular(8.0),
          border: Border.all(
            color: selectedType == type['value']
                ? AppColors.primary
                : AppColors.grey,
            width: 1.0,
          ),
        ),
        child: Row(
          children: [
            Icon(type['icon'],
                color: selectedType == type['value']
                    ? AppColors.white
                    : AppColors.black),
            SpaceWidth(12.0),
            Expanded(
              child: Text(
                type['label']!,
                style: TextStyle(
                  fontSize: 16,
                  color: selectedType == type['value']
                      ? AppColors.white
                      : AppColors.black,
                  fontWeight: FontWeight.bold,
                ),
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
              ),
            ),
            SpaceWidth(12.0),
            Icon(
              Icons.check_circle,
              color: selectedType == type['value']
                  ? AppColors.green
                  : Colors.transparent,
            ),
          ],
        ),
      ),
    );
  }
}
