import DeviceStatusIcon from '@/Components/DeviceStatusIcon';
import DeviceTypeIcon from '@/Components/DeviceTypeIcon';
import MultiSelectInput from '@/Components/MultiSelectInput';
import { Device } from '@/types';

export default function DevicesSelectInput({
    availableDevices,
    onChange,
    selectedDevices,
    errors,
    readOnly,
}: {
    availableDevices: Device[];
    selectedDevices: Device[];
    onChange: (devices: Device[]) => void;
    errors?: string[] | string | Record<string, string>;
    readOnly?: boolean;
}) {
    const getAvailableDeviceValue = (device: Device) =>
        `${device.manufacturer} ${device.model} ${device.serial_number}`;

    const renderAvailableDevice = (device: Device) => (
        <span className="flex items-center justify-between text-zinc-500">
            <span className="mr-2">
                <DeviceTypeIcon type={device.type} />
            </span>
            <span>
                {device.manufacturer} {device.model} ({device.serial_number})
            </span>
        </span>
    );

    const renderSelectedDevice = (device: Device) => (
        <div className="flex items-center justify-between gap-4">
            <div>
                <DeviceTypeIcon type={device.type} />
            </div>
            <div className="grow">
                <div>
                    {device.manufacturer} {device.model}
                </div>
                <div>
                    {device.serial_number}{' '}
                    <span className="inline-block align-middle">
                        <DeviceStatusIcon device={device} />
                    </span>
                </div>
            </div>
        </div>
    );

    return (
        <MultiSelectInput
            label="Dispositivi"
            readOnly={readOnly}
            listEmptyMessage="Nessun dispositivo associato."
            selectEmptyMessage="Nessun dispositivo disponibile."
            availableOptions={availableDevices}
            selectedOptions={selectedDevices}
            getAvailableOptionValue={getAvailableDeviceValue}
            renderAvailableOption={renderAvailableDevice}
            renderSelectedOption={renderSelectedDevice}
            errors={errors}
            onChange={onChange}
        />
    );
}