import FieldDate from "./fields/FieldDate";
import RadioGender from "./fields/RadioGender";
import SendReq from "./sendReq";
import Selector from "./fields/Selector";

// Components
import EditField from "@/app/component/EditField";
import ContentText from "@/app/component/ContentText";

// Data
import specialties from "@/data/specialties.json";
import education from "@/data/education.json";

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

function Form({ image, data, setData, resetData }) {
  const changeData = (value, type, name) => {
    type !== "isEdit" &&
      setData((prev) => {
        return {
          ...prev,
          [name]: {
            ...prev[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);
  };
  const filteredSpe = specialties.filter((item) => item.parent);

  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="تخصص">
          <Selector
            updateData={changeData}
            data={data?.expertise.value}
            label="انتخاب کنید..."
            name="expertise"
            list={filteredSpe}
            nameKey="name"
          />
        </ContentText>
        <ContentText text="مدرک">
          <Selector
            updateData={changeData}
            label="انتخاب کنید..."
            name="degree"
            data={data?.degree.value}
            list={education}
            nameKey="label"
          />
        </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="شماره موبایل">
          <EditField
            isTransparent={true}
            iconGray={true}
            changeData={changeData}
            data={data?.phone}
            type="number"
            placeholder={data?.phone.placeholder}
            name="phone"
          />
        </ContentText>
        <FieldDate changeListData={changeData} data={data?.time_work} />
        <ContentText text="جنسیت">
          <RadioGender changeData={changeData} name="gender" />
        </ContentText>
      </div>
      <SendReq img={image} data={data} resetData={resetData} />
    </>
  );
}

export default Form;