import React from 'react';
import { Typeahead } from 'react-bootstrap-typeahead';
import { Eraser } from 'lucide-react';
import styles from './TypeaheadClienteConLimpiar.module.css';

export interface TypeaheadClienteConLimpiarProps<T extends object> {
    id: string;
    labelKey: string;
    placeholder: string;
    selected: T[];
    options: T[];
    isLoading?: boolean;
    isInvalid: boolean;
    errorId: string;
    onChange: (selected: T[]) => void;
    onLimpiar: () => void;
    mostrarBotonLimpiar: boolean;
    ariaLabelLimpiar?: string;
    positionFixed?: boolean;
    dropup?: boolean;
}

export function TypeaheadClienteConLimpiar<T extends object>({
    id,
    labelKey,
    placeholder,
    selected,
    options,
    isLoading = false,
    isInvalid,
    errorId,
    onChange,
    onLimpiar,
    mostrarBotonLimpiar,
    ariaLabelLimpiar = 'Limpiar selección',
    positionFixed = false,
    dropup = false,
}: TypeaheadClienteConLimpiarProps<T>) {
    return (
        <div className={styles.grupoTypeaheadConLimpiar}>
            <Typeahead
                id={id}
                labelKey={labelKey}
                selected={selected}
                onChange={onChange}
                options={options}
                placeholder={placeholder}
                isLoading={isLoading}
                minLength={1}
                isInvalid={isInvalid}
                positionFixed={positionFixed}
                dropup={dropup}
                flip={!dropup}
                inputProps={{
                    className: `form-control-sm ${isInvalid ? 'is-invalid' : ''}`,
                    'aria-invalid': isInvalid,
                    'aria-describedby': isInvalid ? errorId : undefined,
                }}
            />
            {mostrarBotonLimpiar ? (
                <button
                    type="button"
                    className={styles.botonLimpiarTypeahead}
                    onClick={onLimpiar}
                    onMouseDown={(event) => event.preventDefault()}
                    title={ariaLabelLimpiar}
                    aria-label={ariaLabelLimpiar}
                >
                    <Eraser size={14} aria-hidden />
                </button>
            ) : null}
        </div>
    );
}