'use client';

import { RGPDFormData } from "../../../app/config/rgpd.types";
import { useEffect, useState } from "react";

interface Usager {
    id: number;
    nomPrenomUsager: string;
    referenceDossier?: string;
}

interface Props {
    value: any;
    updateField: (name: keyof RGPDFormData, value: any) => void;
    name: keyof RGPDFormData;
    fetchUsagers: () => Promise<Usager[]>;
}

export function UsagerSelect({ value, updateField, name, fetchUsagers }: Props) {
    const [options, setOptions] = useState<Usager[]>([]);
    const [search, setSearch] = useState("");

    useEffect(() => {
        fetchUsagers().then((data) => {
            setOptions(data);
        });
    }, []);

    const filtered = options.filter((u) => `${u.nomPrenomUsager} ${u.referenceDossier ?? ""}`.toLowerCase().includes(search.toLowerCase()));

    return (
        <div className="flex flex-col gap-1">

            <label className="text-sm font-medium text-[#2f5d4b]">
                Usager
            </label>

            <input
                className="border rounded-lg p-2"
                placeholder="Rechercher..."
                value={search}
                onChange={(e) => setSearch(e.target.value)}
            />

            <select
                className="border rounded-lg p-2"
                value={value ?? ""}
                onChange={(e) => {
                    const value = e.target.value
                        ? Number(e.target.value)
                        : null;
                    updateField(name, value);
                }}
            >
                <option value="">-- Sélectionner --</option>

                {filtered.map((u) => (
                    <option key={u.id} value={u.id}>
                        {u.nomPrenomUsager} {u.referenceDossier ? ` (${u.referenceDossier})` : ""}
                    </option>
                ))}
            </select>
        </div>
    );
}