import { Input, Select } from "../../FormsFieldsTypes";
import { useRefData } from "../../../../app/hooks/useRefData";
import ExperienceFormationTable from "../ExperienceFormationTable";
import { AutoComplete } from "../../ui/AutoComplete";

export default function ExperienceFormationTab({ data, onChange }: any) {
  const niveau_qualif_diplome = useRefData("niveau_qualif_diplome");
  const pays = useRefData("pays");
  const zone_pays = useRefData('zone_pays');

  return (
    <><div className="grid md:grid-cols-4 gap-0">

      <Select
        label="Niveau de qualification"
        options={niveau_qualif_diplome.data}
        name="id_niv_qualif_diplome"
        value={data.id_niv_qualif_diplome}
        onChange={onChange}
      />

      <Input label="Diplôme obtenu"
        name="nom_diplome"
        value={data.nom_diplome}
        placeholder={"ex: Master Ingénerie Logicielle"}
        onChange={onChange}
      />
      <Select label="Pays d'obtention du diplôme" options={zone_pays.data}
        name="zone_lieu_diplome"
        value={data.zone_lieu_diplome}
        onChange={onChange}
        required
      />

      {data.zone_lieu_diplome !== "FR" && (
        <AutoComplete
          label="Précision pays diplôme"
          options={
            pays.data
          }
          value={data.id_lieu_diplome || ""}
          placeholder="Rechercher un pays"
          onSelect={(option: any) => {

            onChange(
              "id_lieu_diplome",
              option.value
            );
          }}
        />
      )}

    </div>
      <ExperienceFormationTable
        data={data.experiencesFormations}
        onChange={onChange}
      />
    </>
  );
}