import Content from "./Content";
import EditField from "../../../app/component/fields/EditField";
import DefaultSelect from "@/app/component/selectors/DefaultSelect";

function Form({ changeData, insurance, supplementaryInsurance, data, isForAnother, errors = {} }) {
  const findBasicInsuranceVal = () => {
    return insurance?.find(
      (g) =>
        g.id ===
        (data?.basic_insurance?.value ? data?.basic_insurance.value.id : false)
    );
  };

  const findSupplementaryInsuranceVal = () => {
    return supplementaryInsurance?.find(
      (g) =>
        g.id ===
        (data?.supplementary_insurance?.value ? data?.supplementary_insurance.value.id : false)
    );
  };

  return (
    <div
      className="grid mt-[12px] sm:mt-[14px] md:mt-[17px] lg:mt-[20px] items-start justify-center gap-x-[24px] gap-y-[12px] md:gap-y-[14px] lg:gap-y-[16px] grid-cols-1 sm:grid-cols-2"
    >
      <Content title="شماره موبایل">
        {isForAnother ? (
          <EditField changeData={changeData} data={data?.phone} name="phone" error={errors?.phone} />
        ) : (
          <div className="flex items-center justify-between px-[14px] py-[12.5px] border border-[#D7D7D7] rounded-lg bg-[#F5F5F5]">
            <span className="text-[#3B3B3B]">{data?.phone?.value}</span>
            <span className="text-[#4CAF50] text-[14px]">تایید شده</span>
          </div>
        )}
      </Content>
      <Content title="کد ملی">
        <EditField
          changeData={changeData}
          data={data?.national_code}
          name="national_code"
          error={errors?.national_code}
        />
      </Content>
      <Content title="نام">
        <EditField changeData={changeData} data={data?.name} name="name" error={errors?.name} />
      </Content>
      <Content title="نام خانوادگی">
        <EditField changeData={changeData} data={data?.family} name="family" error={errors?.family} />
      </Content>
      <Content title="جنسیت">
        <DefaultSelect
          updateData={(name, val) => changeData(val, "value", name)}
          label="جنسیت"
          name="gender"
          list={[
            { id: "male", title: "مرد" },
            { id: "female", title: "زن" },
          ]}
          value={
            data?.gender?.value
              ? { id: data.gender.value, title: data.gender.value === "male" ? "مرد" : "زن" }
              : null
          }
          error={errors?.gender}
        />
      </Content>
      {isForAnother && (
        <Content title="علت مراجعه (اختیاری)">
          <EditField changeData={changeData} data={data?.patient_reason} name="patient_reason" error={errors?.patient_reason} />
        </Content>
      )}
      <Content title="شماره بیمه (اختیاری)">
        <EditField changeData={changeData} data={data?.insurance_id} name="insurance_id" error={errors?.insurance_id} />
      </Content>
      <Content title="نوع بیمه">
        <DefaultSelect
          updateData={(name, val) => changeData(val, "value", name)}
          label="نوع بیمه"
          name="basic_insurance"
          list={insurance}
          value={findBasicInsuranceVal()}
          error={errors?.basic_insurance}
        />
      </Content>
      <Content title="بیمه تکمیلی (اختیاری)">
        <DefaultSelect
          updateData={(name, val) => changeData(val, "value", name)}
          label="بیمه تکمیلی"
          name="supplementary_insurance"
          list={supplementaryInsurance}
          value={findSupplementaryInsuranceVal()}
          error={errors?.supplementary_insurance}
        />
      </Content>
    </div>
  );
}

export default Form;