import 'package:flutter/material.dart';
import 'package:krow/core/presentation/styles/kw_text_styles.dart';
import 'package:krow/core/presentation/styles/theme.dart';

class KwOptionSelector extends StatelessWidget {
  const KwOptionSelector({
    super.key,
    required this.selectedIndex,
    required this.onChanged,
    this.title,
    required this.items,
    this.height = 46,
    this.spacer = 4,
    this.backgroundColor,
    this.selectedColor = AppColors.bgColorDark,
    this.itemColor,
    this.itemBorder,
    this.borderRadius,
    this.itemAlign,
    this.selectedTextStyle,
    this.textStyle,
    double? selectorHeight,
  }) : _selectorHeight = selectorHeight ?? height;

  final int? selectedIndex;
  final double height;
  final double spacer;
  final Function(int index) onChanged;
  final String? title;
  final List<String> items;
  final Color? backgroundColor;
  final BorderRadius? borderRadius;
  final Color selectedColor;
  final Color? itemColor;
  final Border? itemBorder;
  final double _selectorHeight;
  final Alignment? itemAlign;

  final TextStyle? textStyle;
  final TextStyle? selectedTextStyle;

  @override
  Widget build(BuildContext context) {
    var borderRadius = BorderRadius.all(Radius.circular(height / 2));
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        if (title != null)
          Padding(
            padding: const EdgeInsets.only(left: 16, bottom: 4),
            child: Text(
              title!,
              style: AppTextStyles.bodyTinyReg
                  .copyWith(color: AppColors.blackGray),
            ),
          ),
        LayoutBuilder(
          builder: (builderContext, constraints) {
            final itemWidth =
                (constraints.maxWidth - spacer * (items.length - 1)) /
                    items.length;

            return Container(
              height: height,
              decoration: BoxDecoration(
                color: backgroundColor,
                borderRadius: borderRadius,
              ),
              child: Stack(
                children: [
                  if (selectedIndex != null)
                    AnimatedAlign(
                      alignment: Alignment(
                        selectedIndex! * 2 / (items.length - 1) - 1,
                        1,
                      ),
                      duration: Durations.short4,
                      child: Container(
                        height: _selectorHeight,
                        width: itemWidth,
                        decoration: BoxDecoration(
                          color: selectedColor,
                          borderRadius: borderRadius,
                        ),
                      ),
                    ),
                  Row(
                    spacing: spacer,
                    children: [
                      for (int index = 0; index < items.length; index++)
                        GestureDetector(
                          onTap: () {
                            onChanged(index);
                          },
                          child: AnimatedContainer(
                            height: height,
                            width: itemWidth,
                            decoration: BoxDecoration(
                              color: index == selectedIndex ? null : itemColor,
                              borderRadius: borderRadius,
                              border:
                                  index == selectedIndex ? null : itemBorder,
                            ),
                            duration: Durations.short2,
                            child: Align(
                              alignment: itemAlign ?? Alignment.center,
                              child: AnimatedDefaultTextStyle(
                                duration: Durations.short4,
                                style: index == selectedIndex
                                    ? (selectedTextStyle ??
                                        AppTextStyles.bodyMediumMed.copyWith(
                                            color: AppColors.grayWhite))
                                    : (textStyle ??
                                        AppTextStyles.bodyMediumReg.copyWith(
                                            color: AppColors.blackGray)),
                                child: Text(items[index]),
                              ),
                            ),
                          ),
                        ),
                    ],
                  ),
                ],
              ),
            );
          },
        )
      ],
    );
  }
}
