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 { turnTime, workplace } from "./listSelector";
import EditField from "@/app/component/EditField";
import { useState } from "react";

const validate_number_turns = {
  min: 1,
  max: 10,
};

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

  const updateNum = (value, type, name) => {
    const prevData = data;
    const prevVal = data[parent][dataChange.idx][name].value;
    const parseValue = +value;
    const { max } = validate_number_turns;
    const validateValue = parseValue > max ? prevVal : value;
    data[parent][dataChange.idx][name].value = validateValue;
    setUpdate(!update);
    setData(prevData);
  };

  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="تعداد نوبت">
          <EditField
            isTransparent={true}
            iconGray={true}
            changeData={updateNum}
            data={data[parent][dataChange.idx].number_turns}
            noDisable={true}
            type="number"
            placeholder="انتخاب کنید..."
            name="number_turns"
            props={{
              inputProps: validate_number_turns,
            }}
          />
        </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[parent]}
          />
        </ContentText>
        <ContentText text="زمان پایان">
          <TimePickerField
            dataChange={dataChange}
            isDisable={isVacation}
            disable={value === 1}
            setData={setData}
            timeStart={false}
            data={data[parent]}
          />
        </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] !max-w-[calc(50%_-_8px)] dark:!bg-[#C7CEF4] dark:!text-[#5559CE] !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] !max-w-[calc(50%_-_8px)] !font-medium !shadow-none !py-[5px] md:!py-[7px] lg:!py-[9px] !px-[46px]"
        >
          ذخیره
        </Button>
      </div>
    </div>
  );
}

export default Form;
