import SearchInput from '@/Components/SearchInput';
import SelectInput from '@/Components/SelectInput';
import { ALL_TYPES_VALUE } from '@/Pages/Document/documentFile';
import { DocumentType } from '@/types';
import { ChangeEvent, ReactNode } from 'react';

interface DocumentFiltersProps {
    search: string;
    typeId: string;
    documentTypes: DocumentType[];
    onSearchChange: (value: string) => void;
    onTypeChange: (value: string) => void;
    /** Optional trailing slot, used for the upload button. */
    children?: ReactNode;
}

/**
 * Search box and type filter, shared by the management list and the read only
 * patient list.
 */
export default function DocumentFilters({
    search,
    typeId,
    documentTypes,
    onSearchChange,
    onTypeChange,
    children,
}: DocumentFiltersProps) {
    const typeOptions = [
        { value: ALL_TYPES_VALUE, label: 'Tutte le tipologie' },
        ...documentTypes.map((documentType) => ({
            value: String(documentType.id),
            label: documentType.name,
        })),
    ];

    const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) =>
        onSearchChange(e.target.value);

    return (
        <div className="flex w-full flex-col items-stretch gap-4 py-4 sm:flex-row sm:items-baseline">
            <SearchInput
                value={search}
                onChange={handleSearchChange}
                className="grow"
            />
            <SelectInput
                options={typeOptions}
                value={typeId}
                onChange={onTypeChange}
                className="w-full bg-white sm:w-64"
            />
            {children}
        </div>
    );
}