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

function TimePickerInput({ changeData, handleDisableHours, name, data }) {
  return (
    <div className="w-full relative field-date-picker">
      <LocalizationProvider dateAdapter={AdapterDayjs}>
        <TimePicker
          ampm={false}
          format="hh:mm"
          className="!w-full"
          views={["hours", "minutes"]}
          placeholder="انتخاب کنید..."
          shouldDisableTime={(e) => handleDisableHours(e, name)}
          onChange={(e) => {
            const hours = e.$H;
            const minute = e.$m;
            const newValue = `${handleTwoLength(hours)}:${handleTwoLength(
              minute
            )}`;
            // setValue(newValue);
            changeData(newValue, name);
          }}
          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 dark:bg-[#1F1D2B] md:dark:bg-[#222433] dark:!text-[#A1A1A1] 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"
        >
          {data[name]}
        </p>
      </LocalizationProvider>
    </div>
  );
}

export default TimePickerInput;