import React from 'react';
import { Alert, Table } from 'react-bootstrap';
import { formatSipsNumber, toNumber } from '../../types';

interface Props {
    suministros: Record<string, unknown>[];
}

function formatValue(value: unknown): string {
    if (value === null || value === undefined || value === '') {
        return 'ÔÇö';
    }
    if (typeof value === 'number') {
        return formatSipsNumber(value);
    }
    if (typeof value === 'boolean') {
        return value ? 'Sí' : 'No';
    }
    const asNum = toNumber(String(value));
    if (String(value).match(/^-?\d+(\.\d+)?$/) && !String(value).startsWith('0')) {
        return formatSipsNumber(asNum);
    }
    return String(value);
}

const AdxSuministroDetails: React.FC<Props> = ({ suministros }) => {
    if (!suministros.length) {
        return (
            <Alert variant="info" className="mb-0">
                No hay datos de suministro para este CUPS.
            </Alert>
        );
    }

    return (
        <div className="d-flex flex-column gap-4">
            {suministros.map((suministro, index) => {
                const entries = Object.entries(suministro).filter(
                    ([, value]) => value !== null && value !== '' && value !== undefined
                );

                return (
                    <div key={String(suministro.id ?? index)}>
                        {suministros.length > 1 && (
                            <h6 className="mb-2 text-muted">Suministro {index + 1}</h6>
                        )}
                        <div className="table-responsive">
                            <Table bordered striped className="align-middle mb-0 small">
                                <tbody>
                                    {entries.map(([key, value]) => (
                                        <tr key={key}>
                                            <th
                                                className="bg-light text-nowrap"
                                                style={{ width: '32%', fontWeight: 600 }}
                                            >
                                                {key}
                                            </th>
                                            <td style={{ wordBreak: 'break-word' }}>
                                                {formatValue(value)}
                                            </td>
                                        </tr>
                                    ))}
                                </tbody>
                            </Table>
                        </div>
                    </div>
                );
            })}
        </div>
    );
};

export default AdxSuministroDetails;