import { useState } from "react";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider, TimePicker } from "@mui/x-date-pickers"

function TimePickerField({ dataChange, disable, setData, timeStart, data }) {

    const [value, setValue] = useState('00:00');

    return (
        <div className="w-full relative">
            <LocalizationProvider dateAdapter={AdapterDayjs}>
                <TimePicker
                    ampm={false}
                    disabled={disable}
                    format="hh:mm"
                    className="!w-full"
                    shouldDisableTime={(timeValue, clockType) => {
                        if (clockType === 'hours') {
                            const { idx, is_morgen } = dataChange;
                            const value = data[idx][is_morgen ? 'morning_time' : 'evening_time'][0];
                            const hourSelected = value ? +value.split(':')[0] : false

                            const disableMinHour = timeStart || !value ? false :
                                (hourSelected + 1 > timeValue.$H)
                            return dataChange.is_morgen ?
                                !(16 > timeValue.$H && timeValue.$H > 5 && !disableMinHour) :
                                !(24 > timeValue.$H && timeValue.$H > 11 && !disableMinHour)

                        }
                    }}
                    views={['hours', 'minutes']}
                    placeholder="انتخاب کنید..."
                    onChange={e => {
                        const hours = e.$H;
                        const minute = e.$m;
                        const handleTwoLength = value => String(value).length === 1 ? `0${value}` : value
                        const newValue = `${handleTwoLength(hours)}:${handleTwoLength(minute)}`;

                        const newData = data;
                        const { idx, is_morgen } = dataChange;
                        newData[idx][is_morgen ? 'morning_time' : 'evening_time'][timeStart ? 0 : 1] = newValue;

                        setValue(newValue);
                    }}
                    sx={{
                        '& .MuiFormLabel-root': {
                            top: '-4px !important'
                        },
                        '& .MuiInputBase-input': { padding: '12.5px 14px' },
                        '& .MuiOutlinedInput-notchedOutline': { border: '1px solid #D7D7D7 !important' },
                        '& .MuiInputBase-root': {
                            borderRadius: '8px !important'
                        },
                        '.Mui-focused': {
                            '& .MuiOutlinedInput-notchedOutline': {
                                border: '1px solid #5559CE !important',
                                transition: '0.5s all'
                            }
                        },
                        '& .muirtl-jv54yp-MuiList-root-MuiMultiSectionDigitalClockSection-root::after': {
                            display: 'none !important'
                        }
                    }}
                />
                <p className={`absolute flex items-center right-[4px] h-[44px] py-[8px] px-[8px] 
                w-[calc(100%_-_52px)] text-[#7E7E7E] bg-[#FFFFFF] text-[14px] font-normal top-1/2 -translate-y-1/2
                ${disable && '!text-[rgba(126,126,126,0.5)]'}`}>{value}</p>
            </LocalizationProvider>
        </div>
    )
}

export default TimePickerField