"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = PHXTableGroup;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const react_2 = require("react");
const TextV2_1 = require("../TextV2");
const thBase = 'whitespace-nowrap py-3 text-xs font-semibold text-gray-800 ';
function alignThClass(align) {
    if (align === 'right')
        return 'text-right';
    if (align === 'center')
        return 'text-center';
    return 'text-left';
}
function alignCellClass(align) {
    if (align === 'right')
        return 'flex justify-end';
    if (align === 'center')
        return 'flex justify-center';
    return '';
}
function PrimaryContent({ cell }) {
    return (react_1.default.createElement("div", { className: 'flex flex-col gap-1' },
        react_1.default.createElement("div", { className: 'flex items-center gap-1.5' },
            react_1.default.createElement(TextV2_1.PHXTextV2, { size: 'subtitle', color: 'primary', weight: 'medium' },
                cell.title,
                cell.titleSuffix && (react_1.default.createElement(TextV2_1.PHXTextV2, { as: 'span', size: 'caption', color: 'subdued', ml: 'atomic' }, cell.titleSuffix))),
            cell.action && (react_1.default.createElement("button", { type: 'button', className: 'inline-flex items-center rounded-full p-0.5 text-slate-500 transition-colors hover:text-slate-800', onClick: cell.action.onClick }, cell.action.icon))),
        cell.description && (react_1.default.createElement(TextV2_1.PHXTextV2, { size: 'caption', color: 'subdued', mt: 'atomic' }, cell.description))));
}
function renderCell(col, row, section) {
    if (col.getValue)
        return react_1.default.createElement(PrimaryContent, { cell: col.getValue(row, section) });
    return col.render(row, section);
}
function PHXTableGroup({ sections, columns, rowKey }) {
    const [primary, ...rest] = columns;
    return (react_1.default.createElement("div", { className: 'w-full overflow-hidden rounded-xl border border-gray-200 bg-white' },
        react_1.default.createElement("div", { className: 'hidden overflow-x-auto sm:block' },
            react_1.default.createElement("table", { className: 'w-full text-left' },
                react_1.default.createElement("tbody", { className: 'divide-y divide-gray-100' }, sections.map((section, sIdx) => (react_1.default.createElement(react_2.Fragment, { key: section.id },
                    react_1.default.createElement("tr", { className: sIdx > 0 ? 'border-t-2 border-gray-200' : '' },
                        react_1.default.createElement("td", { className: 'px-5 py-4' },
                            react_1.default.createElement("span", { className: 'text-sm font-semibold text-gray-800 ' }, section.label)),
                        rest.map((col) => (react_1.default.createElement("td", { key: col.key, style: col.width ? { width: col.width } : undefined, className: `px-4 ${thBase} ${alignThClass(col.align)}` }, col.header)))),
                    section.subSections.map((sub) => (react_1.default.createElement(react_2.Fragment, { key: sub.id },
                        sub.label && (react_1.default.createElement("tr", null,
                            react_1.default.createElement("td", { colSpan: columns.length, className: 'bg-gray-100/80 px-8 py-3 ' },
                                react_1.default.createElement("span", { className: 'text-xs font-semibold tracking-wider text-gray-800 ' }, sub.label)))),
                        sub.rows.map((row) => (react_1.default.createElement("tr", { key: rowKey(row), className: 'transition-colors hover:bg-gray-50/60' },
                            react_1.default.createElement("td", { className: 'px-8 py-4' }, renderCell(primary, row, section)),
                            rest.map((col) => (react_1.default.createElement("td", { key: col.key, style: col.width ? { width: col.width } : undefined, className: 'px-4 py-5' },
                                react_1.default.createElement("div", { className: alignCellClass(col.align) }, renderCell(col, row, section))))))))))))))))),
        react_1.default.createElement("div", { className: 'sm:hidden' }, sections.map((section, sIdx) => (react_1.default.createElement("div", { key: section.id },
            react_1.default.createElement("div", { className: `px-4 py-4${sIdx > 0 ? ' border-t-2 border-gray-200' : ''}` },
                react_1.default.createElement("span", { className: 'text-sm font-semibold text-gray-800 ' }, section.label)),
            section.subSections.map((sub) => (react_1.default.createElement("div", { key: sub.id },
                sub.label && (react_1.default.createElement("div", { className: 'bg-gray-100/80 px-5 py-3 ' },
                    react_1.default.createElement("span", { className: 'text-xs font-semibold tracking-wider text-gray-800 ' }, sub.label))),
                react_1.default.createElement("div", { className: 'divide-y divide-gray-100' }, sub.rows.map((row) => {
                    const fullWidthCols = rest.filter((c) => c.mobileFullWidth);
                    const inlineCols = rest.filter((c) => !c.mobileFullWidth);
                    return (react_1.default.createElement("div", { key: rowKey(row), className: 'px-4 py-4' },
                        react_1.default.createElement("div", { className: 'mb-2' }, renderCell(primary, row, section)),
                        fullWidthCols.map((col) => (react_1.default.createElement("div", { key: col.key, className: 'mb-2' }, renderCell(col, row, section)))),
                        inlineCols.length > 0 && (react_1.default.createElement("div", { className: 'flex flex-wrap items-center gap-x-5 gap-y-2' }, inlineCols.map((col) => (react_1.default.createElement("div", { key: col.key, className: 'flex items-center gap-2' },
                            col.header && (react_1.default.createElement(TextV2_1.PHXTextV2, { as: 'span', size: 'caption', color: 'subdued' }, col.header)),
                            renderCell(col, row, section))))))));
                })))))))))));
}
//# sourceMappingURL=TableGroup.js.map