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

export default function InfoDossierTab({ data, onChange }: any) {
  const conseillers = useRefData("conseillers");
  const prescripteurs = useRefData("prescripteurs");
  return (
    <div className="grid md:grid-cols-4 gap-1">

      <Input label="Date d'entrée" type="date"
        name="date_integration"
        value={data.date_integration}
        onChange={onChange}
      />
      <Select label="Conseiller référent" options={conseillers.data}
        name="id_conseiller_referent"
        value={data.id_conseiller_referent}
        onChange={onChange}
      />
      <AutoComplete
        label="Organisme prescripteur"
        options={
          prescripteurs.data
        }
        value={data.id_prescripteur}
        placeholder="Rechercher un organisme prescripteur"
        onSelect={(option: any) => {

          onChange(
            "id_prescripteur",
            option.value
          );
        }}
        required
      />
      <Input label="Détail Prescripteur"
        name="detail_prescripteur"
        value={data.detail_prescripteur}
        onChange={onChange}
      />
    </div>
  );
}