import React from 'react';
import { Col, Form, Row } from 'react-bootstrap';
import {
    FormularioActivacion,
    PERIODOS,
    TarifaElectricaOption,
    TarifaGasOption,
    TIPO_ELECTRICO,
    periodosTarifa,
} from '../types';

interface Props {
    prefijoId: string;
    tipCups: number;
    form: FormularioActivacion;
    tarifasElectricas: TarifaElectricaOption[];
    tarifasGas: TarifaGasOption[];
    disabled?: boolean;
    onChange: (campo: keyof FormularioActivacion, valor: string) => void;
}

const TarifaPotenciasConsumo: React.FC<Props> = ({
    prefijoId,
    tipCups,
    form,
    tarifasElectricas,
    tarifasGas,
    disabled = false,
    onChange,
}) => {
    const electrico = tipCups === TIPO_ELECTRICO;
    const periodos = electrico ? periodosTarifa(tarifasElectricas, form.CodTar) : 0;

    return (
        <Row className="g-3">
            <Col md={4}>
                <Form.Label htmlFor={`${prefijoId}-tarifa`} className="fw-semibold">Tarifa</Form.Label>
                <Form.Select
                    id={`${prefijoId}-tarifa`}
                    size="sm"
                    value={form.CodTar}
                    disabled={disabled}
                    onChange={(e) => onChange('CodTar', e.target.value)}
                >
                    <option value="">Seleccione una tarifa</option>
                    {electrico
                        ? tarifasElectricas.map((t) => (
                            <option key={t.CodTarEle} value={t.CodTarEle}>{t.NomTarEle}</option>
                        ))
                        : tarifasGas.map((t) => (
                            <option key={t.CodTarGas} value={t.CodTarGas}>{t.NomTarGas}</option>
                        ))}
                </Form.Select>
            </Col>
            <Col md={4}>
                <Form.Label htmlFor={`${prefijoId}-consumo`} className="fw-semibold">
                    Consumo anual ({electrico ? 'kWh' : 'kWh gas'})
                </Form.Label>
                <Form.Control
                    id={`${prefijoId}-consumo`}
                    size="sm"
                    inputMode="decimal"
                    value={form.ConCup}
                    disabled={disabled}
                    onChange={(e) => onChange('ConCup', e.target.value)}
                />
            </Col>

            {electrico && (
                <Col xs={12}>
                    <Row className="g-2">
                        {PERIODOS.filter((p) => p <= periodos).map((p) => {
                            const campo = `PotEleConP${p}` as keyof FormularioActivacion;
                            return (
                                <Col key={p} xs={4} md={2}>
                                    <Form.Label htmlFor={`${prefijoId}-p${p}`} className="small fw-semibold mb-1">
                                        P{p} (kW)
                                    </Form.Label>
                                    <Form.Control
                                        id={`${prefijoId}-p${p}`}
                                        size="sm"
                                        inputMode="decimal"
                                        value={String(form[campo] ?? '')}
                                        disabled={disabled}
                                        onChange={(e) => onChange(campo, e.target.value)}
                                    />
                                </Col>
                            );
                        })}
                    </Row>
                </Col>
            )}
        </Row>
    );
};

export default TarifaPotenciasConsumo;