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

export default function CorrectionSourceSearch({
    initial = '',
    search,
    title = 'Procurar origem pela referência',
    label = 'Número da recepção ou referência da operação',
    disabled = false,
}: {
    initial?: string;
    search: (value: string) => void;
    title?: string;
    label?: string;
    disabled?: boolean;
}) {
    const [value, setValue] = useState(initial);
    return (
        <details className="rounded border p-3 md:col-span-2">
            <summary className="cursor-pointer text-sm">{title}</summary>
            <div className="mt-3 flex flex-wrap items-end gap-3">
                <label className="grid gap-1 text-sm">
                    {label}
                    <input
                        className={controlClass}
                        maxLength={100}
                        value={value}
                        onChange={(event) => setValue(event.target.value)}
                        onKeyDown={(event) => {
                            if (event.key === 'Enter') {
                                event.preventDefault();
                                if (!disabled) search(value);
                            }
                        }}
                    />
                </label>
                <Button
                    type="button"
                    disabled={disabled}
                    variant="outline"
                    onClick={() => search(value)}
                >
                    Procurar
                </Button>
            </div>
            <p className="mt-2 text-sm text-muted-foreground">
                As origens elegíveis já seleccionadas e os dados introduzidos
                são conservados.
            </p>
        </details>
    );
}