import ToggleButton from "@mui/material/ToggleButton";
import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
import { ThemeProvider } from "@emotion/react";
import turnosXpressTheme from "@core/app/theme/turnosXpress";
import { useEffect, useState } from "react";

export interface WeekDaySelectorProps {
    value: number;
    onChange?: (value: number) => void;
}

export default function WeekDaySelector(props: WeekDaySelectorProps): React.ReactElement {
    const [selectedDay, setSelectedDay] = useState<number>(props.value);

    useEffect(() => {
        setSelectedDay(props.value);
    }, [props.value]);

    const handleDayChanged = (event: React.MouseEvent<HTMLElement>, newday: number) => {
        if (!newday) {
            return;
        }
        if (selectedDay == newday) {
            return;
        }

        props.onChange?.(newday);
    };

    return (
        <>
            <ThemeProvider theme={turnosXpressTheme}>
                <ToggleButtonGroup
                    color="primary"
                    exclusive
                    aria-label="Platform"
                    value={selectedDay}
                    onChange={handleDayChanged}
                    fullWidth
                >
                    <ToggleButton value={1}>Lun</ToggleButton>
                    <ToggleButton value={2}>Mar</ToggleButton>
                    <ToggleButton value={3}>Mie</ToggleButton>
                    <ToggleButton value={4}>Jue</ToggleButton>
                    <ToggleButton value={5}>Vie</ToggleButton>
                    <ToggleButton value={6}>Sab</ToggleButton>
                    <ToggleButton value={7}>Dom</ToggleButton>
                </ToggleButtonGroup>
            </ThemeProvider>
        </>
    );
}