import React from 'react';
import { Building2 } from 'lucide-react';
import { Row, Col, Form, InputGroup } from 'react-bootstrap';
import { SubseccionFormulario } from './SubseccionFormulario';

interface DatosComercialesProps {
    prefijoId: string;
    comercializadora: string;
    producto: string;
    anexo: string;
    tipoprecio: string;
    comercializadoras: any[];
    productosFiltrados: any[];
    anexosFiltrados: any[];
    tipoprecios: any[];
    showErrors: boolean;
    formErrors: { [key: string]: string };
    onComercializadoraChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
    onProductoChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
    onAnexoChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
    onTipoPrecioChange: (value: string) => void;
}

export const DatosComerciales: React.FC<DatosComercialesProps> = ({
    prefijoId,
    comercializadora,
    producto,
    anexo,
    tipoprecio,
    comercializadoras,
    productosFiltrados,
    anexosFiltrados,
    tipoprecios,
    showErrors,
    formErrors,
    onComercializadoraChange,
    onProductoChange,
    onAnexoChange,
    onTipoPrecioChange,
}) => {
    return (
        <SubseccionFormulario titulo="Datos Comerciales" icono={<Building2 size={16} aria-hidden />}>
            <Row className="g-3">
                {/* Comercializadora */}
                <Col lg={4} md={6} sm={12}>
                    <Form.Label htmlFor={`${prefijoId}-comercializadora`} className="form-label fw-medium">
                        Comercializadora
                    </Form.Label>
                    <InputGroup hasValidation>
                        <Form.Select
                            id={`${prefijoId}-comercializadora`}
                            name="comercializadora"
                            className="form-select form-select-sm"
                            value={comercializadora || ''}
                            onChange={onComercializadoraChange}
                            isInvalid={showErrors && !!formErrors.comercializadora}
                        >
                            <option value="">Seleccione una comercializadora</option>
                            {comercializadoras.map((registro: any) => (
                                <option key={registro.CodCom} value={registro.CodCom}>
                                    {registro.NomComCom}
                                </option>
                            ))}
                        </Form.Select>
                        <Form.Control.Feedback type="invalid">
                            {formErrors.comercializadora}
                        </Form.Control.Feedback>
                    </InputGroup>
                </Col>

                {/* Producto */}
                <Col lg={3} md={6} sm={12}>
                    <Form.Label htmlFor={`${prefijoId}-producto`} className="form-label fw-medium">
                        Producto
                    </Form.Label>
                    <InputGroup hasValidation>
                        <Form.Select
                            id={`${prefijoId}-producto`}
                            name="producto"
                            className="form-select form-select-sm"
                            value={producto || ''}
                            onChange={onProductoChange}
                            isInvalid={showErrors && !!formErrors.producto}
                        >
                            <option value="">Seleccione un producto</option>
                            {productosFiltrados.map((registro: any) => (
                                <option key={registro.CodPro} value={registro.CodPro}>
                                    {registro.DesPro}
                                </option>
                            ))}
                        </Form.Select>
                        <Form.Control.Feedback type="invalid">
                            {formErrors.producto}
                        </Form.Control.Feedback>
                    </InputGroup>
                </Col>

                {/* Anexo */}
                <Col lg={3} md={6} sm={12}>
                    <Form.Label htmlFor={`${prefijoId}-anexo`} className="form-label fw-medium">
                        Anexo
                    </Form.Label>
                    <Form.Select
                        id={`${prefijoId}-anexo`}
                        name="anexo"
                        className="form-select form-select-sm"
                        value={anexo || ''}
                        onChange={onAnexoChange}
                        isInvalid={showErrors && !!formErrors.anexo}
                    >
                        <option value="">Seleccione un anexo</option>
                        {anexosFiltrados.map((registro: any) => (
                            <option key={registro.CodAnePro} value={registro.CodAnePro}>
                                {registro.DesAnePro}
                            </option>
                        ))}
                    </Form.Select>
                    <Form.Control.Feedback type="invalid">
                        {formErrors.anexo}
                    </Form.Control.Feedback>
                </Col>

                {/* Tipo Precio */}
                <Col lg={2} md={6} sm={12}>
                    <Form.Label htmlFor={`${prefijoId}-tipoPrecio`} className="form-label fw-medium">
                        Tipo Precio
                    </Form.Label>
                    <Form.Select
                        id={`${prefijoId}-tipoPrecio`}
                        name="tipoprecio"
                        className="form-select form-select-sm"
                        onChange={(e) => onTipoPrecioChange(e.target.value)}
                        value={tipoprecio || ''}
                        isInvalid={showErrors && !!formErrors.tipoprecio}
                    >
                        <option value="">Seleccione tipo precio</option>
                        {tipoprecios.map((registro: any) => (
                            <option key={registro.id} value={registro.id}>
                                {registro.descripcion}
                            </option>
                        ))}
                    </Form.Select>
                    <Form.Control.Feedback type="invalid">
                        {formErrors.tipoprecio}
                    </Form.Control.Feedback>
                </Col>
            </Row>
        </SubseccionFormulario>
    );
};