import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:mc_common_app/extensions/string_extensions.dart';
import 'package:mc_common_app/models/general_models/widgets_models.dart';
import 'package:mc_common_app/theme/colors.dart';
import 'package:mc_common_app/widgets/extensions/extensions_widget.dart';

class FiltersList extends StatelessWidget {
  final List<FilterListModel> filterList;
  final Function(int, int) onFilterTapped;
  final bool needLeftPadding;
  final bool showImages;
  final EdgeInsets? padding;

  const FiltersList({
    super.key,
    this.padding,
    required this.filterList,
    this.needLeftPadding = true,
    this.showImages = false,
    required this.onFilterTapped,
  });

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 37,
      width: double.infinity,
      child: ListView.builder(
        padding: padding ?? EdgeInsets.only(left: needLeftPadding ? 12 : 0),
        itemCount: filterList.length,
        scrollDirection: Axis.horizontal,
        itemBuilder: (BuildContext context, int index) {
          return InkWell(
            onTap: () {
              onFilterTapped(index, filterList[index].id);
            },
            child: ConstrainedBox(
              constraints: const BoxConstraints(minWidth: 80), // Set a minimum width for each filter chip
              child: Container(
                alignment: Alignment.center,
                padding: const EdgeInsets.symmetric(horizontal: 8),
                margin: const EdgeInsets.symmetric(horizontal: 4),
                decoration: BoxDecoration(
                  color: filterList[index].isSelected ? MyColors.darkIconColor : null,
                  border: Border.all(
                    color: filterList[index].isSelected ? MyColors.darkIconColor : MyColors.primaryColor,
                    width: 2,
                  ),
                ),
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    // Icon before the text
                    if (showImages) ...[
                      if (index != 0 && filterList[index].iconUrl.isNotEmpty) ...[
                        filterList[index].iconUrl.buildNetworkImage(height: 25, width: 25, fit: BoxFit.contain),
                        const SizedBox(width: 4), // Space between icon and text
                      ],
                    ],
                    // Text displayed in the chip
                    filterList[index].title.toText(
                          fontSize: 13,
                          letterSpacing: -0.14,
                          color: filterList[index].isSelected ? MyColors.white : null,
                        ),
                  ],
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}
