import 'package:flutter/material.dart';
import 'package:syncrow_web/utils/color_manager.dart';

class ConditionToggle extends StatelessWidget {
  final String? currentCondition;
  final void Function(String condition) onChanged;

  const ConditionToggle({
    required this.onChanged,
    this.currentCondition,
    super.key,
  });

  static const _conditions = ["<", "==", ">"];
  static const _icons = [
    Icons.chevron_left,
    Icons.drag_handle,
    Icons.chevron_right
  ];

  @override
  Widget build(BuildContext context) {
    final selectedIndex = _conditions.indexOf(currentCondition ?? "==");

    return Container(
      height: 30,
      width: MediaQuery.of(context).size.width * 0.1,
      decoration: BoxDecoration(
        color: ColorsManager.softGray.withOpacity(0.5),
        borderRadius: BorderRadius.circular(50),
      ),
      clipBehavior: Clip.antiAlias,
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: List.generate(_conditions.length, (index) {
          final isSelected = index == selectedIndex;
          return Expanded(
            child: InkWell(
              onTap: () => onChanged(_conditions[index]),
              child: AnimatedContainer(
                duration: const Duration(milliseconds: 180),
                curve: Curves.ease,
                decoration: BoxDecoration(
                  color:
                      isSelected ? ColorsManager.vividBlue : Colors.transparent,
                ),
                child: Center(
                  child: Icon(
                    _icons[index],
                    size: 20,
                    color: isSelected
                        ? ColorsManager.whiteColors
                        : ColorsManager.blackColor,
                    weight: isSelected ? 700 : 500,
                  ),
                ),
              ),
            ),
          );
        }),
      ),
    );
  }
}