"use client";
import { useTimePickerStore } from "@store/TimePicker.Store";
import { StaticTimePicker } from "@mui/x-date-pickers/StaticTimePicker";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import style from "./TimePicker.module.css";
import classNames from "classnames";
import { ThemeProvider } from "@emotion/react";
import turnosXpressTheme from "@core/app/theme/turnosXpress";
import dayjs from "dayjs";
import "dayjs/locale/es";

dayjs.locale("es");

export default function TimePicker(): React.ReactElement {
    const timePickerState = useTimePickerStore();

    const getClassNames = () => {
        const classList: classNames.ArgumentArray = [];

        if (timePickerState.visible) {
            classList.push(style.timePickerContainerVisible);
        } else {
            classList.push(style.timePickerContainerHidden);
        }

        return classNames(classList);
    };

    return (
        <>
            <div className={getClassNames()}>
                <ThemeProvider theme={turnosXpressTheme}>
                    <LocalizationProvider dateAdapter={AdapterDayjs}>
                        <StaticTimePicker
                            ampm={false}
                            minutesStep={timePickerState.timeFraction}
                            value={timePickerState.value}
                            defaultValue={timePickerState.defaultValue}
                            sx={{ borderRadius: "8px" }}
                            className={style.timePicker}
                            onClose={() => timePickerState.hide()}
                            onAccept={(newValue: dayjs.Dayjs | null) => {
                                if (newValue) {
                                    timePickerState.setValue(newValue);
                                    timePickerState.onAccept(newValue);
                                }
                            }}
                            slotProps={{ actionBar: { actions: ['cancel', 'accept'] } }}
                        />
                    </LocalizationProvider>
                </ThemeProvider>
            </div>
        </>
    );
}
