import { Button } from "@mui/material";
import ContentText from "@/app/component/ContentText";
import TimePickerField from "@/app/component/TimePickerField";
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
import { numberTurns, turnTime, workplace } from "./listSelector";

function Form({
  handleClose,
  isVacation,
  parent,
  setData,
  dataChange,
  data,
  value,
}) {
  const updateData = (value, type, name) =>
    setData((prev) => {
      const newData = prev;
      newData[parent][dataChange.idx][name] = value;
      return newData;
    });

  return (
    <div className="flex flex-col gap-[32px] md:gap-[36px] lg:gap-[40px] min-w-fit md:min-w-[420px]">
      <div className="flex relative flex-col gap-[16px]">
        <ContentText text="گروه خونی">
          <AutoCompleteSelect
            updateData={updateData}
            label="گروه خونی"
            name="number_turns"
            list={numberTurns}
          />
        </ContentText>
        <ContentText text="گروه خونی">
          <AutoCompleteSelect
            updateData={updateData}
            label="گروه خونی"
            name="turn_time"
            list={turnTime}
          />
        </ContentText>
        <ContentText text="گروه خونی">
          <AutoCompleteSelect
            updateData={updateData}
            label="گروه خونی"
            name="workplace"
            list={workplace}
          />
        </ContentText>
        <ContentText text="زمان شروع">
          <TimePickerField
            dataChange={dataChange}
            isDisable={isVacation}
            disable={value === 1}
            setData={setData}
            timeStart={true}
            data={data}
          />
        </ContentText>
        <ContentText text="زمان پایان">
          <TimePickerField
            dataChange={dataChange}
            isDisable={isVacation}
            disable={value === 1}
            setData={setData}
            timeStart={false}
            data={data}
          />
        </ContentText>
        <div
          className={`
            absolute transition-all duration-500 right-0 top-0 w-full h-full bg-[rgba(255,255,255,.85)] dark:bg-[rgba(34,36,51,.85)]
            ${isVacation ? "max-w-full" : "max-w-0"}`}
        ></div>
      </div>
      <div className="flex flex-wrap items-center justify-center gap-[16px]">
        <Button
          variant="outlined"
          onClick={handleClose}
          className="!text-[16px] !font-medium !border-[#5559CE] !py-[5px] md:!py-[7px] lg:!py-[9px] !shadow-none !px-[46px]"
        >
          انصراف
        </Button>
        <Button
          variant="contained"
          onClick={handleClose}
          className="!text-[16px] !font-medium !shadow-none !py-[5px] md:!py-[7px] lg:!py-[9px] !px-[46px]"
        >
          ذخیره
        </Button>
      </div>
    </div>
  );
}

export default Form;
