import { ToggleGroup, ToggleGroupItem } from '@/Components/ui/toggle-group';
import dayjs from 'dayjs';

interface MultiTimePickerProps {
    onChange: (days: number[]) => void;
    value?: number[];
}

export default function WeekDaysSelect({
    onChange,
    value = [],
}: MultiTimePickerProps) {
    const dayIndexes = [1, 2, 3, 4, 5, 6, 0];

    const formattedValue = value?.map((value) => `${value}`);

    const dayItems = dayIndexes.map((dayIndex) => {
        const date = dayjs().day(dayIndex);
        const label = date.format('dd')[0];
        const value = `${dayIndex}`;
        return (
            <ToggleGroupItem
                key={value}
                value={value}
                className="rounded-full uppercase"
            >
                {label}
            </ToggleGroupItem>
        );
    });

    function handleChange(value: string[]) {
        onChange(value.map((value) => parseInt(value)));
    }

    return (
        <ToggleGroup
            type="multiple"
            className="mt-4 justify-evenly"
            onValueChange={handleChange}
            value={formattedValue}
        >
            {dayItems}
        </ToggleGroup>
    );
}