import { router, usePage } from '@inertiajs/react';
import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { controlClass } from '@/components/procurement';

export type CatalogueEntry = {
    id: number;
    version: number;
    stock_item_id: number;
    code: string;
    description: string;
    unit: string;
    category: string;
    purchase_type: string;
};
export type CatalogueOptions = {
    ready: boolean;
    search: string;
    items: CatalogueEntry[];
    more: boolean;
};
export function CatalogueSearch({ data }: { data: CatalogueOptions }) {
    const [search, setSearch] = useState(data.search);
    const path = usePage().url.split('?')[0];
    function lookup() {
        router.get(
            path,
            { catalogo: search },
            { only: ['catalogue'], preserveState: true, preserveScroll: true },
        );
    }
    return (
        <fieldset className="mb-4 space-y-3 rounded-lg border p-4">
            <legend>Artigos do catálogo da empresa</legend>
            <p className="text-sm">
                Seleccione uma fonte em cada linha. Descrição, categoria,
                unidade e tipo são reutilizados; quantidade, estimativa e IVA
                são dados deste pedido.
            </p>
            <div className="flex flex-wrap gap-2">
                <input
                    aria-label="Pesquisar catálogo"
                    className={controlClass}
                    value={search}
                    maxLength={100}
                    onChange={(event) => setSearch(event.target.value)}
                    onKeyDown={(event) => {
                        if (event.key === 'Enter') {
                            event.preventDefault();
                            lookup();
                        }
                    }}
                />
                <Button type="button" variant="outline" onClick={lookup}>
                    Pesquisar catálogo
                </Button>
            </div>
            {data.more && <p>Há mais artigos; refine a pesquisa.</p>}
        </fieldset>
    );
}