import { Button } from "@mui/material";
import FieldDate from "./FieldDate";
import { degree, expertise } from "./listSelector";
import RadioGender from "./RadioGender";

// Components
import EditField from "@/app/component/EditField";
import ContentText from "@/app/component/ContentText";
import ArrowLeftPA from "@/components/icons/ArrowLeftPA";
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
import { checkAllValues } from "@/helper";

const validate_medical_number = {
  min: 1,
  max: 9999999999,
};

function Form({ setValue, parent, data, setData }) {
  const changeData = (value, type, name) =>
    type !== "isEdit" &&
    setData((prev) => {
      return {
        ...prev,
        [parent]: {
          ...prev[parent],
          [name]: {
            ...prev[parent][name],
            [type]: value,
          },
        },
      };
    });

  const updateNum = (value, type, name) => {
    const parseValue = +value;
    const { max } = validate_medical_number;
    const validateValue = parseValue > max ? data[name].value : value;
    changeData(validateValue, type, name);
  };

  return (
    <>
      <div className="mt-[24px] sm-modal scroll-mui md:mt-[26px] lg:mt-[28px] grid grid-cols-1 md:grid-cols-2 gap-x-[48px] gap-y-[24px]">
        <ContentText text="نام و نام خانوادگی">
          <EditField
            isTransparent={true}
            iconGray={true}
            changeData={changeData}
            data={data?.name}
            placeholder={data?.name.placeholder}
            name="name"
          />
        </ContentText>
        <ContentText text="شماره نظام پزشکی">
          <EditField
            isTransparent={true}
            iconGray={true}
            changeData={updateNum}
            data={data?.medical_system_number}
            noDisable={true}
            type="number"
            placeholder={data?.medical_system_number.placeholder}
            name="medical_system_number"
            props={{
              inputProps: validate_medical_number,
            }}
          />
        </ContentText>
        <ContentText text="تخصص">
          <AutoCompleteSelect
            updateData={changeData}
            label="انتخاب کنید..."
            name="expertise"
            list={expertise}
          />
        </ContentText>
        <ContentText text="مدرک">
          <AutoCompleteSelect
            updateData={changeData}
            type="number"
            label="انتخاب کنید..."
            name="degree"
            list={degree}
          />
        </ContentText>
        <ContentText text="توضیحات">
          <EditField
            multiline={5}
            placeholder="درباره سوابق خود توضیحاتی بنویسید..."
            isTransparent={true}
            iconGray={true}
            changeData={changeData}
            data={data?.description}
            name="description"
          />
        </ContentText>
        <ContentText text="مهارت ها">
          <EditField
            multiline={5}
            placeholder="مهارت های خود را بنویسید..."
            isTransparent={true}
            iconGray={true}
            changeData={changeData}
            data={data?.skills}
            name="skills"
          />
        </ContentText>
        <ContentText text="جنسیت">
          <RadioGender />
        </ContentText>
        <FieldDate changeListData={changeData} data={data?.time_work} />
      </div>
      <div className="mt-[40px] w-full flex justify-end">
        <Button
          className="!w-full md:!w-fit !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium"
          onClick={() => setValue((prev) => prev + 1)}
          disabled={!checkAllValues(data)}
          variant="contained"
        >
          ثبت اطلاعات
          <div className={!checkAllValues(data) ? "opacity-40" : "opacity-100"}>
            <ArrowLeftPA />
          </div>
        </Button>
      </div>
    </>
  );
}

export default Form;
