import React from 'react';
import { Col, Form, Row } from 'react-bootstrap';
import {
    SERVICIOS_CONTRATO_FIELDS,
    ServicioContratoKey,
} from './serviciosContratoConfig';

interface FormSectionProps {
    values: Record<string, boolean | string | undefined>;
    onChange: (key: ServicioContratoKey, checked: boolean) => void;
    idPrefix?: string;
}

export const ServiciosContratoFormSection: React.FC<FormSectionProps> = ({
    values,
    onChange,
    idPrefix = 'servicio',
}) => (
    <div className="mb-4">
        <h6 className="text-muted mb-3 fw-semibold border-bottom pb-2">
            <i className="bx bx-briefcase me-2"></i>
            Servicios de contrato
        </h6>
        <Row className="g-3">
            {SERVICIOS_CONTRATO_FIELDS.map((field) => (
                <Col lg={3} md={6} sm={6} key={field.key}>
                    <Form.Check
                        type="checkbox"
                        id={`${idPrefix}-${field.key}`}
                        label={field.label}
                        checked={
                            values[field.key] === true
                            || values[field.key] === '1'
                            || values[field.key] === 1
                        }
                        onChange={(e) => onChange(field.key, e.target.checked)}
                        className="fw-medium"
                    />
                </Col>
            ))}
        </Row>
    </div>
);

interface TableProps {
    row: Record<string, unknown>;
    index: number;
    onFieldChange: (index: number, field: string, value: string) => void;
    styles?: { thHeaderSmall?: string; thStickyHeader?: string; checkboxInput?: string };
}

export const ServiciosContratoTableHeaders: React.FC<{ styles?: TableProps['styles'] }> = ({ styles }) => (
    <>
        {SERVICIOS_CONTRATO_FIELDS.map((field) => (
            <th
                key={field.key}
                scope="col"
                title={field.label}
                className={`${styles?.thHeaderSmall ?? ''} ${styles?.thStickyHeader ?? ''}`.trim()}
            >
                {field.abbrev}
            </th>
        ))}
    </>
);

export const ServiciosContratoTableCells: React.FC<TableProps> = ({
    row,
    index,
    onFieldChange,
    styles,
}) => (
    <>
        {SERVICIOS_CONTRATO_FIELDS.map((field) => (
            <td key={field.key} style={{ textAlign: 'center' }}>
                <input
                    type="checkbox"
                    className={styles?.checkboxInput}
                    title={field.label}
                    checked={row[field.key] == '1' || row[field.key] === true}
                    onChange={(e) => onFieldChange(index, field.key, e.target.checked ? '1' : '0')}
                />
            </td>
        ))}
    </>
);

export const SERVICIOS_CONTRATO_FILTER_DEFAULTS: Record<ServicioContratoKey, string> =
    SERVICIOS_CONTRATO_FIELDS.reduce((acc, field) => {
        acc[field.key] = '';
        return acc;
    }, {} as Record<ServicioContratoKey, string>);