import 'package:flutter/material.dart';
import 'package:mc_common_app/classes/consts.dart';
import 'package:mc_common_app/extensions/int_extensions.dart';
import 'package:mc_common_app/extensions/string_extensions.dart';
import 'package:mc_common_app/theme/colors.dart';
import 'package:mc_common_app/widgets/dropdown/dropdow_field.dart';

class RoleTypeTab extends StatefulWidget {
  int selectedIndex;
  final List<DropValue> dropList;
  final Function(DropValue value) onSelect;
  final double? width;

  RoleTypeTab(this.selectedIndex, this.dropList, {super.key, required this.onSelect, this.width});

  @override
  State<RoleTypeTab> createState() => _RoleTypeTabState();
}

class _RoleTypeTabState extends State<RoleTypeTab> {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      height: 50,
      child: ListView.separated(
        itemBuilder: (context, index) {
          return InkWell(
            onTap: () {
              setState(() {
                widget.selectedIndex = index;
                widget.onSelect(widget.dropList[index]);
              });
            },
            child: Container(
              width: widget.width ?? (MediaQuery.of(context).size.width / 2) - 30,
              height: 50,
              decoration: BoxDecoration(
                color: widget.selectedIndex == index ? MyColors.darkPrimaryColor : Colors.grey[200],
                // border: Border.all(color: type == ClassType.NUMBER ? MyColors.darkPrimaryColor : Colors.transparent, width: 2),
                borderRadius: const BorderRadius.all(
                  Radius.circular(0),
                ),
              ),
              child: Center(
                child: ((widget.dropList[index].value) == "ServiceProvider_Dealership" || (widget.dropList[index].value) == "ServiceProvider_Individual"
                        ? "${widget.dropList[index].value.split("_").first}\n${widget.dropList[index].value.split("_").last}"
                        : widget.dropList[index].value)
                    .toText(
                  textAlign: TextAlign.center,
                  height: 23 / 15,
                  fontSize: 15,
                  color: widget.selectedIndex == index ? MyColors.white : MyColors.darkTextColor,
                ),
              ),
            ),
          );
        },
        separatorBuilder: (context, index) {
          return 12.width;
        },
        itemCount: widget.dropList.length,
        scrollDirection: Axis.horizontal,
      ),
    );
  }
}
