import 'package:flutter/material.dart';
import 'package:hmg_patient_app_new/core/utils/size_utils.dart';
import 'package:hmg_patient_app_new/extensions/widget_extensions.dart';
import 'package:hmg_patient_app_new/features/doctor_filter/doctor_filter_view_model.dart';
import 'package:hmg_patient_app_new/theme/colors.dart';
import 'package:hmg_patient_app_new/widgets/chip/app_custom_chip_widget.dart';
import 'package:provider/provider.dart';

class RegionChips extends StatelessWidget {
  const RegionChips({super.key});

  @override
  Widget build(BuildContext context) {
    return Selector<DoctorFilterViewModel, List<String>>(
        selector: (_, model) => model.searchedRegionList,
        builder: (__, data, ___) =>
            Selector<DoctorFilterViewModel, List<String>?>(
              selector: (_, model) => model.selectedRegionForFilters,
              builder: (context, selectRegion, ___) => Row(
                children: [
                  Expanded(
                      child: ListView.separated(
                        scrollDirection: Axis.horizontal,
                          itemCount: data.length,
                          separatorBuilder: (_, __)=>SizedBox(width: 8.h,),

                          itemBuilder: (_, index) => AppCustomChipWidget(
                                      labelText: data[index],
                                      textColor: selectRegion?.any((selectedRegion)=>data[index] == selectedRegion) == true
                                          ? AppColors.primaryRedColor

                                          : AppColors.textColor,
                                      backgroundColor:
                                      selectRegion?.any((selectedRegion)=>data[index] == selectedRegion) == true
                                              ? AppColors.primaryRedColor
                                                  .withOpacity(0.1)
                                              : AppColors.whiteColor,
                                      shape: RoundedRectangleBorder(
                                          side: BorderSide(
                                            color: selectRegion?.any((selectedRegion)=>data[index] == selectedRegion) == true
                                                ? AppColors
                                                    .primaryRedBorderColor
                                                : AppColors
                                                    .chipBorderColorOpacity20,
                                            width: 1,
                                          ),
                                          borderRadius:
                                              BorderRadius.circular(10)))
                                  .onPress(() {
                                context
                                    .read<DoctorFilterViewModel>()
                                    .setSelectedRegion(data[index]);
                              })))
                ],
              ),
            ));
  }
}
