import React from 'react';
import { Col, Form, InputGroup, Row } from 'react-bootstrap';
import FormDateInputEs from '../../../../../Components/Common/FormDateInputEs';
import { BotonBusquedaAccion } from './BotonBusquedaAccion';
import styles from '../css/UniClienteUniPunto.module.css';

export interface SeccionFechasVentanaProps {
    ventana: string;
    fechaInicio: string;
    fechaFin: string;
    ventanaBloqueada: boolean;
    onAbrirModalPrecios: () => void;
    onCambiarFechaInicio: (iso: string) => void;
    onCambiarFechaFin: (iso: string) => void;
    errores?: {
        ventana?: string;
        fechaInicio?: string;
        fechaFin?: string;
    };
    mostrarErrores?: boolean;
    prefijoId?: string;
}

function formatearVentana(valor: string): string {
    return valor.trim() === '' ? 'Sin dato' : valor;
}

export const SeccionFechasVentana: React.FC<SeccionFechasVentanaProps> = ({
    ventana,
    fechaInicio,
    fechaFin,
    ventanaBloqueada,
    onAbrirModalPrecios,
    onCambiarFechaInicio,
    onCambiarFechaFin,
    errores = {},
    mostrarErrores = false,
    prefijoId = 'fechas',
}) => {
    return (
        <Row className="g-3 align-items-end">
            <Col lg={5} md={6} xs={12}>
                <Form.Label
                    htmlFor={`${prefijoId}-ventana`}
                    className={`form-label fw-medium ${styles.etiquetaInformativa}`}
                >
                    Ventana
                </Form.Label>
                <InputGroup className={styles.grupoBusquedaCups}>
                    <Form.Control
                        id={`${prefijoId}-ventana`}
                        readOnly
                        tabIndex={-1}
                        aria-readonly="true"
                        size="sm"
                        className={styles.campoInformativo}
                        value={formatearVentana(ventana)}
                    />
                    <BotonBusquedaAccion
                        onClick={onAbrirModalPrecios}
                        ariaLabel="Buscar ventana de precios"
                    />
                </InputGroup>
                {mostrarErrores && errores.ventana ? (
                    <div className="invalid-feedback d-block">{errores.ventana}</div>
                ) : null}
            </Col>
            <Col lg={3} md={3} xs={12}>
                <Form.Label htmlFor={`${prefijoId}-inicio`} className="form-label fw-medium">
                    Fecha Inicio
                </Form.Label>
                <FormDateInputEs
                    id={`${prefijoId}-inicio`}
                    value={fechaInicio || ''}
                    onChange={onCambiarFechaInicio}
                    bsSize="sm"
                    disabled={ventanaBloqueada}
                    isInvalid={mostrarErrores && !!errores.fechaInicio}
                />
                {mostrarErrores && errores.fechaInicio ? (
                    <Form.Control.Feedback type="invalid">{errores.fechaInicio}</Form.Control.Feedback>
                ) : null}
            </Col>
            <Col lg={3} md={3} xs={12}>
                <Form.Label htmlFor={`${prefijoId}-fin`} className="form-label fw-medium">
                    Fecha Fin
                </Form.Label>
                <FormDateInputEs
                    id={`${prefijoId}-fin`}
                    value={fechaFin || ''}
                    onChange={onCambiarFechaFin}
                    bsSize="sm"
                    disabled={ventanaBloqueada}
                    isInvalid={mostrarErrores && !!errores.fechaFin}
                />
                {mostrarErrores && errores.fechaFin ? (
                    <Form.Control.Feedback type="invalid">{errores.fechaFin}</Form.Control.Feedback>
                ) : null}
            </Col>
        </Row>
    );
};