import { useRef, useState } from "react";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { DesktopTimePicker, LocalizationProvider } from "@mui/x-date-pickers";
import { handleTwoLength } from "@/helper";
import ClockField from "@/components/icons/ClockField";

function TimePickerField({ dataChange, isVacation, disable, timeStart, data }) {
  const input = useRef();
  const [value, setValue] = useState("00:00");
  const [isOpen, setIsOpen] = useState(false);

  const openTimePicker = () => setIsOpen(true);
  const closeTimePicker = () => setIsOpen(false);

  return (
    <div className="w-full relative field-date-picker">
      <LocalizationProvider dateAdapter={AdapterDayjs}>
        <DesktopTimePicker
          ampm={false}
          open={isOpen}
          MobileDatePicke
          onClose={closeTimePicker}
          disabled={isVacation}
          format="hh:mm"
          ref={input}
          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);
            }
          }}
          renderInput={(params) => {
            return <TextField {...params} />;
          }}
          views={["hours", "minutes"]}
          placeholder="انتخاب کنید..."
          onChange={(e) => {
            const hours = e.$H;
            const minute = e.$m;
            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 cursor-pointer rounded-[8px] dark:bg-[#222433] dark:!text-[#A1A1A1] h-[calc(100%_-_6px)] flex items-center right-[4px] py-[8px] px-[8px] 
                w-[calc(100%_-_8px)] text-[#7E7E7E] bg-[#FFFFFF] text-[14px] font-normal top-1/2 -translate-y-1/2
                ${disable && "!text-[rgba(126,126,126,0.5)]"}`}
          onClick={openTimePicker}
        >
          {value}
        </p>
      </LocalizationProvider>
      <div
        className="absolute left-[12px] top-1/2 -translate-y-1/2 cursor-pointer"
        onClick={openTimePicker}
      >
        <ClockField />
      </div>
    </div>
  );
}

export default TimePickerField;