import { getParsedUserInfo } from "@/helper";
import Content from "./Content";
import DateBirthday from "./DateBirthday";
import Field from "../component/Field";
import { gender, blood_group, marital_status, job } from "./listSelector";
import education from "@/data/education.json";
import DefaultSelect from "@/app/component/selectors/DefaultSelect";

function Form({ insurance, errors, changeData, information }) {
  const findVal = (list, name) =>
    list &&
    list.length &&
    information &&
    information[name] &&
    list.find((g) => g.id === information[name]);
  const parsedUserInfo = getParsedUserInfo();

  return (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-x-[24px] gap-y-[10px]">
      <Content title="شماره موبایل" isConfirmed={true}>
        <Field
          type="text"
          disable={true}
          iconGray={true}
          name="mobile_number"
          isTransparent={true}
          changeData={changeData}
          value={
            parsedUserInfo?.mobile_number ??
            parsedUserInfo?.username ??
            information?.mobile_number ??
            ""
          }
        />
      </Content>
      <Content
        req={true}
        error={errors?.national_code}
        title="کد ملی"
        isConfirmed={false}
      >
        <Field
          req={true}
          error={errors?.national_code}
          type="text"
          iconGray={true}
          name="national_code"
          isTransparent={true}
          changeData={(val, name) =>
            changeData(val.replace(/\D/g, "").slice(0, 10), name)
          }
          value={information?.national_code ?? ""}
        />
      </Content>
      <Content req={true} error={errors?.name} title="نام" isConfirmed={false}>
        <Field
          error={errors?.name}
          isTransparent={true}
          iconGray={true}
          changeData={changeData}
          data={information?.name}
          name="name"
        />
      </Content>
      <Content
        req={true}
        error={errors?.family}
        title="نام خانوادگی"
        isConfirmed={false}
      >
        <Field
          error={errors?.family}
          isTransparent={true}
          iconGray={true}
          changeData={changeData}
          data={information?.family}
          name="family"
        />
      </Content>
      <Content req={true} error={errors?.gender} title="جنسیت">
        <DefaultSelect
          error={errors?.gender}
          updateData={(name, option) => changeData(option?.id ?? "", name)}
          value={findVal(gender, "gender")}
          label="جنسیت"
          name="gender"
          list={gender}
        />
      </Content>
      <Content req={true} error={errors?.birthday} title="تاریخ تولد">
        <DateBirthday
          error={errors?.birthday}
          data={information?.birthday}
          isConfirmed={false}
          changeData={changeData}
        />
      </Content>
      <Content
        req={true}
        error={errors?.fathers_name}
        title="نام پدر"
        isConfirmed={false}
      >
        <Field
          error={errors?.fathers_name}
          isTransparent={true}
          iconGray={true}
          changeData={changeData}
          data={information?.fathers_name}
          name="fathers_name"
        />
      </Content>
      <Content req={true} error={errors?.basic_insurance} title="نوع بیمه">
        <DefaultSelect
          error={errors?.basic_insurance}
          updateData={(name, val) => {
            changeData(val?.id ? [Number(val.id)] : [], name);
          }}
          value={insurance?.find(
            (g) =>
              Number(g.id) ===
              (information?.basic_insurance
                ? information?.basic_insurance[0]
                : false)
          )}
          name="basic_insurance"
          label="نوع بیمه"
          list={insurance}
        />
      </Content>
      <Content
        error={errors?.insurance_id}
        title="شماره بیمه"
        isConfirmed={false}
      >
        <Field
          req={true}
          error={errors?.insurance_id}
          isTransparent={true}
          iconGray={true}
          type="number"
          changeData={changeData}
          data={information?.insurance_id}
          name="insurance_id"
        />
      </Content>
      <Content req={true} error={errors?.blood_type} title="گروه خونی">
        <DefaultSelect
          error={errors?.blood_type}
          updateData={(name, option) => changeData(option?.id ?? "", name)}
          value={findVal(blood_group, "blood_type")}
          label="گروه خونی"
          name="blood_type"
          list={blood_group}
        />
      </Content>
      <Content req={true} error={errors?.marital_status} title="وضعیت تاهل">
        <DefaultSelect
          error={errors?.marital_status}
          updateData={(name, option) => changeData(option?.id ?? "", name)}
          value={findVal(marital_status, "marital_status")}
          label="وضعیت تاهل"
          name="marital_status"
          list={marital_status}
        />
      </Content>
      <Content title="تلفن منزل" isConfirmed={false}>
        <Field
          isTransparent={true}
          iconGray={true}
          type="number"
          changeData={changeData}
          data={information?.home_phone}
          name="home_phone"
        />
      </Content>
      <Content req={true} error={errors?.education} title="تحصیلات">
        <DefaultSelect
          error={errors?.education}
          updateData={(name, option) => changeData(option?.id ?? "", name)}
          value={findVal(education, "education")}
          label="تحصیلات"
          name="education"
          list={education}
        />
      </Content>
      <Content req={true} error={errors?.job} title="شغل">
        <DefaultSelect
          error={errors?.job}
          updateData={(name, option) => changeData(option?.id ?? "", name)}
          value={findVal(job, "job")}
          label="شغل"
          name="job"
          list={job}
        />
      </Content>
      <Content title="تلفن محل کار" isConfirmed={false}>
        <Field
          isTransparent={true}
          type="number"
          iconGray={true}
          changeData={changeData}
          data={information?.work_phone}
          name="work_phone"
        />
      </Content>
    </div>
  );
}

export default Form;
