import React from 'react';
import { Col, Form } from 'react-bootstrap';
import { Typeahead } from 'react-bootstrap-typeahead';
import { ComercializadoraSips, comercializadoraLabel } from '../types';

interface Props {
    comercializadoras: ComercializadoraSips[];
    selected: ComercializadoraSips[];
    onChange: (selected: ComercializadoraSips[]) => void;
    colSize?: number;
}

const ComercializadoraSelect: React.FC<Props> = ({
    comercializadoras,
    selected,
    onChange,
    colSize = 6,
}) => {
    const seleccionada = selected[0] ?? null;

    return (
        <Col md={colSize} className="mb-3">
            <Form.Label className="fw-semibold">Comercializadora</Form.Label>
            <Typeahead
                id="sips-comercializadora"
                labelKey={(option: ComercializadoraSips) => comercializadoraLabel(option)}
                options={comercializadoras}
                selected={selected}
                onChange={(value) => {
                    const picked = (value as ComercializadoraSips[])[0];
                    if (!picked) {
                        onChange([]);
                        return;
                    }
                    const full = comercializadoras.find(
                        (c) => Number(c.CodCom) === Number(picked.CodCom)
                    ) ?? picked;
                    onChange([full]);
                }}
                placeholder="Seleccionar comercializadora..."
                emptyLabel="No se encontraron comercializadoras activas"
                paginationText="Mostrar más resultados"
                maxResults={15}
                inputProps={{ 'aria-label': 'Comercializadora' }}
            />
            {seleccionada?.NomComCom &&
                seleccionada.NomComCom !== seleccionada.RazSocCom && (
                    <Form.Text className="text-muted">{seleccionada.NomComCom}</Form.Text>
                )}
        </Col>
    );
};

export default ComercializadoraSelect;