import { Input, RadioGroup, Select } from "../../FormsFieldsTypes";
import { useRefData } from "../../../../app/hooks/useRefData";
import Link from "next/link";
import { calculateAge, validateBirthdate } from "../../../../app/utils/validationUsagerForm";
import { AutoComplete, AutoCompleteGroup } from "../../ui/AutoComplete";

export default function IdentificationTab({ data, onChange }: any) {
    const titre_usager = useRefData("titre_usager");
    const sexe_usager = useRefData("sexe_usager");
    const pays = useRefData("pays");
    const zone_pays = useRefData('zone_pays');
    const lieu_de_proximite = useRefData("lieu_de_proximite");
    const quartier = useRefData("quartier");
    const sit_matri = useRefData("situation_matrimoniale");
    const sit_travail_conj = useRefData("situation_de_travail");
    const type_logement = useRefData("type_logement");
    const secteur_logement = useRefData("secteur_logement");
    const qf = useRefData("questions_fermees");

    const birthdateError = validateBirthdate(data.date_naissance);

    const age = calculateAge(data.date_naissance);

    return (
        <>
            <div className="space-y-0">

                <div className="grid md:grid-cols-2 gap-0">

                    <div className="bg-white border border-[#dce8e2] rounded-xl p-3">

                        <h3 className="text-xs font-semibold uppercase text-[#2f5d4b] mb-1">
                            Identité et origine
                        </h3>

                        <div className="grid grid-cols-6 gap-1">

                            <Select
                                label="Genre"
                                options={sexe_usager.data}
                                name="sexe"
                                value={data.sexe}
                                onChange={onChange}
                                className="col-span-1"
                                required
                            />
                            <Select
                                label="Titre"
                                options={titre_usager.data}
                                name="titre"
                                value={data.titre}
                                onChange={onChange}
                                className="col-span-1"
                                required
                            />
                            <Input label="NOM"
                                name="nom"
                                value={data.nom}
                                onChange={onChange}
                                className="col-span-2"
                                required
                            />
                            <Input label="Prénom"
                                name="prenom"
                                value={data.prenom}
                                onChange={onChange}
                                className="col-span-2"
                                required
                            />
                        </div>

                        <RadioGroup
                            label="Un des 2 parents né à l'étranger"
                            name="un_des_parents_ne_etranger"
                            value={data.un_des_parents_ne_etranger}
                            onChange={onChange}
                            options={qf.data}
                        />
                    </div>

                    <div className="bg-white border border-[#dce8e2] rounded-xl p-3">
                        <h3 className="text-xs font-semibold uppercase text-[#2f5d4b] mb-1">
                            Naissance et nationalité
                        </h3>

                        <div className="grid grid-cols-3 gap-1">
                            <div className="flex flex-col">

                                <Input label="Date de naissance" type="date"
                                    name="date_naissance"
                                    value={data.date_naissance}
                                    onChange={onChange}
                                    required
                                    error={birthdateError}
                                />
                                {age !== null && (
                                    <div className="mt-1">
                                        <span className="
            inline-flex
            items-center
            rounded-full
            bg-[#eef8f3]
            px-3 py-1
            text-xs
            font-medium
            text-[#2f7d5f]
        ">
                                            {age} ans
                                        </span>
                                    </div>
                                )}
                            </div>

                            <Input label="Département/Ville de naissance"
                                name="dpt_naissance"
                                value={data.dpt_naissance}
                                placeholder={"ex: 34000/Hérault, Berlin, ..."}
                                onChange={onChange}
                                required
                            />

                            <Select label="Pays de naissance" options={zone_pays.data}
                                name="zone_pays_naissance"
                                value={data.zone_pays_naissance}
                                onChange={onChange}
                                required
                            />

                            {data.zone_pays_naissance !== "FR" && (
                                <AutoComplete
                                    label="Précision pays"
                                    options={
                                        pays.data
                                    }
                                    value={data.pays_naissance}
                                    placeholder="Rechercher un pays"
                                    onSelect={(option: any) => {

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

                            <Select label="Nationalité" options={zone_pays.data}
                                name="zone_nationalite"
                                value={data.zone_nationalite}
                                onChange={onChange}
                                required
                            />

                            {data.zone_nationalite !== "FR" && (
                                <AutoComplete
                                    label="Précision nationalité"
                                    options={
                                        pays.data
                                    }
                                    value={data.nationalite || ""}
                                    placeholder="Rechercher un pays"
                                    onSelect={(option: any) => {

                                        onChange(
                                            "nationalite",
                                            option.value
                                        );
                                    }}
                                />
                            )}
                        </div>
                    </div>
                </div>

                <div className="grid md:grid-cols-2">
                    <div className="bg-white border border-[#dce8e2] rounded-xl p-3">
                        <h3 className="text-xs font-semibold uppercase text-[#2f5d4b] mb-1">
                            Coordonnées
                        </h3>

                        <div className="grid grid-cols-4 gap-2">
                            <Input label="Adresse - ligne 1 (rue, avenue, ...)"
                                name="adresse_ligne_1"
                                value={data.adresse_ligne_1}
                                placeholder={"ex: 1 rue de test"}
                                className="col-span-2"
                                onChange={onChange}
                                required
                            />
                            <Input label="Complément adresse - ligne 2 (apt, esc.)"
                                name="adresse_ligne_2"
                                value={data.adresse_ligne_2}
                                placeholder={"ex: BAT 1, BAL 1"}
                                className="col-span-2"
                                onChange={onChange} />

                            <AutoComplete
                                label="Ville - Code Postal"
                                options={
                                    lieu_de_proximite.data
                                }
                                value={data.id_lieu_de_proximite || ""}
                                placeholder="Rechercher un lieu de proximité"
                                className="col-span-2"
                                required
                                onSelect={(option: any) => {

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

                            <AutoCompleteGroup
                                label="Quartier"
                                options={
                                    quartier.data
                                }
                                value={data.id_quartier}
                                placeholder="Rechercher un quartier"
                                className="col-span-2"
                                required
                                onSelect={(option: any) => {

                                    onChange(
                                        "id_quartier",
                                        option.value
                                    );
                                }}
                            />
                            <span className="text-xs text-[#6b7f77] mt-1">
                                Vérifier l'appartenance au QPV :{" "}
                                <Link href="https://sig.ville.gouv.fr/" className="text-[#2f7d5f]">
                                    https://sig.ville.gouv.fr/
                                </Link>
                            </span>
                        </div>
                    </div>
                    <div className="bg-white border border-[#dce8e2] rounded-xl p-3">
                        <h3 className="text-xs font-semibold uppercase text-[#2f5d4b] mb-1">
                            FAMILLE
                        </h3>
                        <div className="grid grid-cols-3 gap-2">
                            <Select
                                label="Situation matrimoniale"
                                options={sit_matri.data}
                                name="id_situation_matrimoniale"
                                value={data.id_situation_matrimoniale}
                                onChange={onChange}
                                required
                            />
                            <Input label="Nombre d'enfants à charge" type="number"
                                name="nb_enfants_a_charge"
                                value={data.nb_enfants_a_charge}
                                onChange={onChange}
                                required
                            />
                            <Select
                                label="Situation du conjoint"
                                options={sit_travail_conj.data}
                                name="id_situation_conjoint"
                                value={data.id_situation_conjoint}
                                onChange={onChange} />
                            <div className="flex flex-col">
                                <label className="mb-1 text-xs font-medium text-[#2f5d4b]">
                                    Commentaires (nombre enfants non à charge, âge, etc.)
                                </label>

                                <textarea
                                    rows={3}
                                    className="
  rounded-lg
  border
  border-[#cfded7]
  p-2
  text-xs
 "
                                    name="commentaire_famille"
                                    value={data.commentaire_famille || ""}
                                    onChange={(e) => onChange("commentaire_famille", e.target.value)} />
                            </div>
                        </div>
                    </div>
                </div>

                <div className="grid lg:grid-cols-2 gap-0">
                    <div className="bg-white border border-[#dce8e2] rounded-xl p-3">
                        <h3 className="text-xs font-semibold uppercase text-[#2f5d4b] mb-1">
                            Contact
                        </h3>
                        <div className="grid grid-cols-4 gap-1">
                            <Input label="Téléphone"
                                name="no_tel"
                                value={data.no_tel}
                                placeholder={"ex: +33 X XX XX XX XX"}
                                className="col-span-1"
                                onChange={onChange}
                            />
                            <Input label="Portable"
                                name="no_portable"
                                placeholder={"ex: +33 X XX XX XX XX"}
                                value={data.no_portable}
                                className="col-span-1"
                                required
                                onChange={onChange} />

                            <Input label="Courriel" type="text"
                                name="email"
                                value={data.email}
                                placeholder={"ex: nom.prenom@domaine.fr"}
                                className="col-span-2"
                                onChange={onChange}
                                required
                            />
                        </div>
                    </div>

                    <div className="bg-white border border-[#dce8e2] rounded-xl p-3">
                        <h3 className="text-xs font-semibold uppercase text-[#2f5d4b] mb-1">
                            LOGEMENT
                        </h3>
                        <div className="grid grid-cols-2 gap-2">
                            <Select
                                label="Type"
                                options={type_logement.data}
                                name="id_type_logement"
                                value={data.id_type_logement}
                                onChange={onChange}
                                required
                            />
                            <Select
                                label="Secteur"
                                options={secteur_logement.data}
                                name="id_secteur_logement"
                                value={data.id_secteur_logement}
                                onChange={onChange}
                                required
                            />
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}