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 }) {
  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="شماره موبایل" isConfirmed={isForAnother ? false : true}>
        <EditField changeData={changeData} data={data?.phone} name="phone" />
      </Content>
      <Content title="کد ملی">
        <EditField
          changeData={changeData}
          data={data?.national_code}
          name="national_code"
        />
      </Content>
      <Content title="نام">
        <EditField changeData={changeData} data={data?.name} name="name" />
      </Content>
      <Content title="نام خانوادگی">
        <EditField changeData={changeData} data={data?.family} name="family" />
      </Content>
      <Content title="نوع بیمه">
        <DefaultSelect
          updateData={(name, val) => changeData(val, "value", name)}
          label="نوع بیمه"
          name="basic_insurance"
          list={insurance}
          value={findBasicInsuranceVal()}
        />
      </Content>
      <Content title="بیمه تکمیلی">
        <DefaultSelect
          updateData={(name, val) => changeData(val, "value", name)}
          label="بیمه تکمیلی"
          name="supplementary_insurance"
          list={supplementaryInsurance}
          value={findSupplementaryInsuranceVal()}
        />
      </Content>
    </div>
  );
}

export default Form;