import Selector from "./fields/Selector";
import ContentText from "@/app/component/ContentText";
import EditField from "@/app/component/fields/EditField";
import GroupedSelect from "@/app/component/selectors/GroupedSelect";
import MultipleSelect from "@/app/component/selectors/MultipleSelect";

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

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

function Fields({ services, data, updateNum, changeData }) {
  return (
    <>
      <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="تخصص">
        <GroupedSelect
          updateData={changeData}
          data={data?.expertise.value}
          name="expertise"
          list={specialties}
          nameKey="name"
        />
      </ContentText>
      <ContentText text="مدرک">
        <Selector
          updateData={changeData}
          label="انتخاب کنید..."
          name="degree"
          data={data?.degree.value}
          list={education}
          nameKey="label"
        />
      </ContentText>
      <ContentText text="مهارت ها">
        <MultipleSelect
          name="skills"
          list={services}
          updateData={changeData}
          value={data?.skills.value}
        />
      </ContentText>
      <ContentText text="شماره موبایل">
        <EditField
          isTransparent={true}
          iconGray={true}
          changeData={changeData}
          data={data?.phone}
          type="number"
          placeholder={data?.phone.placeholder}
          name="phone"
        />
      </ContentText>
      <ContentText text="توضیحات">
        <EditField
          multiline={5}
          placeholder="درباره سوابق خود توضیحاتی بنویسید..."
          isTransparent={true}
          iconGray={true}
          changeData={changeData}
          data={data?.description}
          name="description"
        />
      </ContentText>
    </>
  );
}

export default Fields;