import MultiSelectInput from '@/Components/MultiSelectInput';
import { capitalize, t } from '@/lib/utils';
import { Disease } from '@/types';
import axios from 'axios';
import { useState } from 'react';

export default function DiseasesSelectInput({
    onChange,
    selectedDiseases,
    errors,
    readOnly = false,
}: {
    selectedDiseases: Disease[];
    onChange: (disease: Disease[]) => void;
    readOnly?: boolean;
    errors?: string[] | string | Record<string, string>;
}) {
    const [availableDiseases, setAvailableDiseases] = useState<Disease[]>([]);

    const getAvailableDiseaseValue = (disease: Disease) => disease.name;

    const renderAvailableDisease = (disease: Disease) => (
        <span className="text-zinc-500">{capitalize(t(disease.name))}</span>
    );

    const renderSelectedDisease = (disease: Disease) => (
        <div className="">{capitalize(t(disease.name))}</div>
    );

    const fetchDiseases = async (search: string) => {
        try {
            const response = await axios.get(route('search-diseases'), {
                params: {
                    search,
                },
            });
            setAvailableDiseases(response.data);
        } catch (error) {
            console.error('Error fetching items:', error);
        }
    };

    return (
        <MultiSelectInput
            label="Malattie croniche"
            readOnly={readOnly}
            listEmptyMessage="Nessuna malattia cronica."
            selectEmptyMessage="Nessun malattia trovata."
            availableOptions={availableDiseases}
            selectedOptions={selectedDiseases}
            onSearchChange={fetchDiseases}
            getAvailableOptionValue={getAvailableDiseaseValue}
            renderAvailableOption={renderAvailableDisease}
            renderSelectedOption={renderSelectedDisease}
            errors={errors}
            onChange={onChange}
        />
    );
}