
import 'package:citycards_customer/common_packages/custom_filled_button.dart';
import 'package:citycards_customer/common_packages/custom_text.dart';
import 'package:citycards_customer/itinerary_creation/bloc/itinerary_steps_selection_bloc.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

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

  @override
  State<DietarySelectionView> createState() => _DietarySelectionViewState();
}

class _DietarySelectionViewState extends State<DietarySelectionView> {
  int selectedIndex = -1;

  final List<Map<String, String>> options = [
    {
      "icon": "assets/icons/no_restrictions_food.png",
      "name": "No Restrictions",
    },
    {"icon": "assets/icons/veg.png", "name": "Vegetarian"},
    {"icon": "assets/icons/vegan.png", "name": "Vegan"},
    {"icon": "assets/icons/pesc.png", "name": "Pescatarian"},
    {"icon": "assets/icons/halal.png", "name": "Halal"},
    {"icon": "assets/icons/kosher.png", "name": "Kosher"},
  ];

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          "👋 Hello! We'd love to know more about you. Do you follow any dietary preferences?",
          style: TextStyle(
            color: Color(0xFF101828),
            fontSize: 24.sp,
            fontWeight: FontWeight.w500,
          ),
          textAlign: TextAlign.center,
        ),
        SizedBox(height: 12.h),
        CustomText(
          text: "Select all that apply",
          size: 14.sp,
          color: const Color(0xFF6A7282),
        ),
        SizedBox(height: 38.h),
        SizedBox(
          height: 350.h,
          child: GridView.builder(
            physics: NeverScrollableScrollPhysics(),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              mainAxisSpacing: 12,
              crossAxisSpacing: 16,
              crossAxisCount: 2,
              childAspectRatio: 1.7,
            ),
            itemCount: options.length,
            itemBuilder: (BuildContext context, int index) {
              final item = options[index];
              return GestureDetector(
                onTap: () {},
                child: Container(
                  width: 168.w,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(24),
                  ),
                  alignment: Alignment.center,
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Image.asset(item["icon"] ?? "", scale: 4),
                      SizedBox(height: 8),
                      CustomText(
                        text: item["name"] ?? "",
                        size: 16.sp,
                        weight: FontWeight.w500,
                        color: const Color(0xFF364153),
                      ),
                    ],
                  ),
                ),
              );
            },
          ),
        ),

        SizedBox(height: 41.h),
        CustomFilledButton(
          onTap: () {
            context.read<ItineraryStepNavigationBloc>().add(
              ItineraryStepNavigationNextEvent(),
            );
          },
          label: "Continue",
          showArrow: true,
        ),
      ],
    );
  }
}
