import MultiSelectInput from '@/Components/MultiSelectInput';
import { Recipient, User } from '@/types';
import axios from 'axios';
import React, { useEffect, useState } from 'react';

type WithOriginalId<T extends Recipient> = Omit<T, 'id'> & {
    id: string;
    original_id: number;
};

export default function RecipientsSelectInput<T extends Recipient>({
    onChange,
    selectedRecipients,
    errors,
    user,
    label = 'Invia a',
    description,
    renderSelected,
}: {
    selectedRecipients: T[];
    onChange: (recipients: T[]) => void;
    user: User;
    label?: string;
    description?: string;
    errors?: string[] | string | Record<string, string>;
    renderSelected?: (recipient: T) => React.ReactNode;
}) {
    const [availableRecipients, setAvailableRecipients] = useState<
        WithOriginalId<T>[]
    >([]);

    const getAvailableRecipientValue = (recipient: WithOriginalId<T>) =>
        `${recipient.label}`;

    const renderAvailableRecipient = (recipient: WithOriginalId<T>) => (
        <span className="text-zinc-500">{recipient.label}</span>
    );

    const renderSelectedRecipient = (recipient: WithOriginalId<T>) => {
        if (renderSelected) {
            return renderSelected(recipient as unknown as T);
        }
        return <div className="">{recipient.label}</div>;
    };

    const withOriginalId = (recipients: T[]): WithOriginalId<T>[] =>
        recipients.map(
            (recipient) =>
                ({
                    ...recipient,
                    original_id: recipient.id,
                    id: `${recipient.type}_${recipient.id}`,
                }) as unknown as WithOriginalId<T>,
        );

    const fetchRecipients = async () => {
        try {
            const response = await axios.get(route('search-user-recipients'), {
                params: {
                    user: user.id,
                },
            });
            setAvailableRecipients(withOriginalId(response.data));
        } catch (error) {
            console.error('Error fetching items:', error);
        }
    };

    useEffect(() => {
        fetchRecipients();
    }, [user.id]);

    const handleChange = (selectedOptions: WithOriginalId<T>[]) => {
        const recipients = selectedOptions.map((recipient) => {
            const { original_id, ...rest } = recipient;
            return { ...rest, id: original_id } as unknown as T;
        });
        onChange(recipients);
    };

    return (
        <MultiSelectInput
            label={label}
            description={description}
            listEmptyMessage="Nessun destinatario."
            selectEmptyMessage="Nessun destinatario trovato."
            availableOptions={availableRecipients}
            selectedOptions={withOriginalId(selectedRecipients)}
            getAvailableOptionValue={getAvailableRecipientValue}
            renderAvailableOption={renderAvailableRecipient}
            renderSelectedOption={renderSelectedRecipient}
            errors={errors}
            onChange={handleChange}
        />
    );
}