import Content from "./Content";
import EditField from "@/app/component/EditField";
import DateBirthday from "./DateBirthday";
import {
  insurance,
  gender,
  blood_group,
  marital_status,
  education,
  job,
} from "./listSelector";
import AutoSelector from "@/app/component/element/AutoSelector";

function Form({ data, changeData, selected, updateSelect }) {
  const findVal = (list, name) => list.find((g) => g.id === selected[name]);

  return (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-[24px]">
      <Content title="شماره موبایل" isConfirmed={true}>
        <EditField
          isTransparent={true}
          iconGray={true}
          type="number"
          changeData={changeData}
          data={data?.phone}
          name="phone"
        />
      </Content>
      <Content title="کد ملی" isConfirmed={false}>
        <EditField
          isTransparent={true}
          iconGray={true}
          type="number"
          changeData={changeData}
          data={data?.national_code}
          name="national_code"
        />
      </Content>
      <Content title="نام و نام خانوادگی" isConfirmed={false}>
        <EditField
          isTransparent={true}
          iconGray={true}
          changeData={changeData}
          data={data?.name}
          name="name"
        />
      </Content>
      <Content title="جنسیت">
        <AutoSelector
          updateData={(name, data) =>
            updateSelect(name, data === "زن" ? "female" : "male")
          }
          value={findVal(gender, "gender")}
          label="جنسیت"
          name="gender"
          list={gender}
        />
      </Content>
      <Content title="تاریخ تولد">
        <DateBirthday
          data={data?.date_of_birth}
          isConfirmed={false}
          changeData={changeData}
        />
      </Content>
      <Content title="نام پدر" isConfirmed={false}>
        <EditField
          isTransparent={true}
          iconGray={true}
          changeData={changeData}
          data={data?.father_name}
          name="father_name"
        />
      </Content>
      <Content title="نوع بیمه">
        <AutoSelector
          updateData={updateSelect}
          value={findVal(insurance, "insurance")}
          label="نوع بیمه"
          name="insurance"
          list={insurance}
        />
      </Content>
      <Content title="شماره بیمه" isConfirmed={false}>
        <EditField
          isTransparent={true}
          iconGray={true}
          type="number"
          changeData={changeData}
          data={data?.insurance_number}
          name="insurance_number"
        />
      </Content>
      <Content title="گروه خونی">
        <AutoSelector
          updateData={(name, value) =>
            updateSelect(name, blood_group.find((g) => g.label === value).id)
          }
          value={findVal(blood_group, "blood_group")}
          label="گروه خونی"
          name="blood_group"
          list={blood_group}
        />
      </Content>
      <Content title="وضعیت تاهل">
        <AutoSelector
          updateData={(name, value) =>
            updateSelect(name, marital_status.find((g) => g.label === value).id)
          }
          value={findVal(marital_status, "marital_status")}
          label="وضعیت تاهل"
          name="marital_status"
          list={marital_status}
        />
      </Content>
      <Content title="تلفن منزل" isConfirmed={false}>
        <EditField
          isTransparent={true}
          iconGray={true}
          type="number"
          changeData={changeData}
          data={data?.home_phone}
          name="home_phone"
        />
      </Content>
      <Content title="تحصیلات">
        <AutoSelector
          updateData={(name, value) =>
            updateSelect(name, education.find((g) => g.label === value).id)
          }
          value={findVal(education, "education")}
          label="تحصیلات"
          name="education"
          list={education}
        />
      </Content>
      <Content title="شغل">
        <AutoSelector
          updateData={(name, value) =>
            updateSelect(name, job.find((g) => g.label === value).id)
          }
          value={findVal(job, "job")}
          label="شغل"
          name="job"
          list={job}
        />
      </Content>
      <Content title="تلفن محل کار" isConfirmed={false}>
        <EditField
          isTransparent={true}
          type="number"
          iconGray={true}
          changeData={changeData}
          data={data?.work_phone}
          name="work_phone"
        />
      </Content>
    </div>
  );
}

export default Form;