'use client';
import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
import { classNames } from '../types';
import { applyUrlQuery, buildHeaderRows, buildRowSpan, getMaxDepth, renderCell } from './utils';
import TableBodyRows from './component/TableBodyRows';
import Search from './component/Search';
import { PHXEmptyRecord } from '../EmptyRecord';
import { PHXSkeleton } from '../Skeleton';
import Pagination from './component/Pagination';
import Header from './component/Header';
import SelectedAction from '../TableV3/SelectedAction';
import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
import { PHXEmptySearch } from '../EmptySearch';
import { PHXUseDirectLink } from '../../hooks/direct-link';
export function PHXTableReport({ tableData, thHeader, thBody, thBodyComponent, mergeConfig = { isMergeRowData: false, columnPosition: [] }, rowHighlightConfig, search = {
    enable: false,
    loading: false,
}, loading, pagination, readonly = false, onClick, type = 'default', selectedAllPeople, tableKey = 'table-report', border = true, spacing = true, textCenter = true, isHeaderBgWhite = false, isResetPagination = false, configUrlApply, onSelectionChange, forceClearSelection = false, }) {
    const checkbox = useRef();
    /**
     * Falls back to the shared direct-link hook when a router instance is not provided.
     *
     * @returns A direct-link navigation callback.
     */
    const directLink = PHXUseDirectLink();
    const [isSearch, setIsSearch] = useState(false);
    const [selectedPeople, setSelectedPeople] = useState([]);
    const [checked, setChecked] = useState(false);
    const [indeterminate, setIndeterminate] = useState(false);
    const [expandedRowKeys, setExpandedRowKeys] = useState([]);
    const [currentPage, setCurrentPage] = useState(1);
    const [offset, setOffset] = useState(0);
    const maxDepth = getMaxDepth(thHeader);
    const rows = buildHeaderRows(thHeader, 0, [], maxDepth, 0);
    const rowClassName = (keyIdx, dataIdx) => classNames('text-xs whitespace-nowrap text-gray-900', textCenter ? 'text-center' : 'pl-8 text-left', spacing ? 'px-2 py-2.5' : '', keyIdx !== 0 && border && 'border-l', dataIdx !== 0 && 'border-t', dataIdx === tableData.length - 1 && keyIdx === 0 && !(pagination === null || pagination === void 0 ? void 0 : pagination.enable) && 'rounded-bl-lg', dataIdx === tableData.length - 1 && keyIdx === thBody.length - 1 && !(pagination === null || pagination === void 0 ? void 0 : pagination.enable) && 'rounded-br-lg');
    const isHighLight = (data) => !!((rowHighlightConfig === null || rowHighlightConfig === void 0 ? void 0 : rowHighlightConfig.key) && data[rowHighlightConfig.key] === rowHighlightConfig.value);
    /**
     * Resolves a stable key for expansion state tracking.
     *
     * @param data - Current table row data.
     * @param dataIdx - Current row index.
     * @returns Stable row key.
     */
    const getRowKey = (data, dataIdx) => String(data.id || data._id || data.key || `${tableKey}-${dataIdx}`);
    /**
     * Finds the first body column that declares child rows.
     *
     * @param data - Current table row data.
     * @returns Child row configuration, or null when the row has no children.
     */
    const getRowChildren = (data) => {
        var _a;
        for (const [columnIndex, bodyKey] of thBody.entries()) {
            const children = renderCell(data, bodyKey, thBodyComponent).children;
            if (!((_a = children === null || children === void 0 ? void 0 : children.data) === null || _a === void 0 ? void 0 : _a.length)) {
                continue;
            }
            return { columnIndex, children };
        }
        return null;
    };
    /**
     * Toggles the expanded state for one table row.
     *
     * @param rowKey - Stable row key to toggle.
     * @returns void.
     */
    const toggleRowExpanded = (rowKey) => {
        setExpandedRowKeys((current) => current.includes(rowKey) ? current.filter((item) => item !== rowKey) : [...current, rowKey]);
    };
    const handleClick = (data, isHighlightRow) => {
        if (isHighlightRow && !(rowHighlightConfig === null || rowHighlightConfig === void 0 ? void 0 : rowHighlightConfig.readonly)) {
            if (onClick) {
                onClick(data);
            }
        }
        if (!isHighlightRow && onClick && !readonly) {
            onClick(data);
        }
    };
    useLayoutEffect(() => {
        const isIndeterminate = selectedPeople.length > 0 && selectedPeople.length < tableData.length;
        setChecked(selectedPeople.length === tableData.length && tableData.length > 0);
        setIndeterminate(isIndeterminate);
        if (checkbox.current) {
            checkbox.current.indeterminate = isIndeterminate;
        }
    }, [selectedPeople, tableData.length]);
    useEffect(() => {
        if (onSelectionChange) {
            onSelectionChange(selectedPeople);
        }
    }, [selectedPeople]);
    useEffect(() => {
        if (forceClearSelection) {
            setSelectedPeople([]);
        }
    }, [forceClearSelection]);
    useEffect(() => {
        var _a;
        if (isResetPagination) {
            setCurrentPage(1);
            setOffset(0);
            if (pagination === null || pagination === void 0 ? void 0 : pagination.onChange) {
                pagination.onChange(1);
            }
            if (configUrlApply) {
                applyUrlQuery.set(((_a = configUrlApply === null || configUrlApply === void 0 ? void 0 : configUrlApply.router) === null || _a === void 0 ? void 0 : _a.push) || directLink, configUrlApply.searchParams, [
                    { key: `pagi-${tableKey}`, value: '1' },
                ]);
            }
        }
    }, [isResetPagination]);
    const toggleAll = () => {
        setSelectedPeople(checked || indeterminate ? [] : tableData);
        setChecked(!checked && !indeterminate);
        setIndeterminate(false);
    };
    const brSetSelectedPeople = (value) => {
        const maxSelectedPeople = (selectedAllPeople === null || selectedAllPeople === void 0 ? void 0 : selectedAllPeople.maxSelectedPeople) || 0;
        setSelectedPeople(maxSelectedPeople > 0 ? value.slice(-maxSelectedPeople) : value);
    };
    return (React.createElement(React.Fragment, null,
        loading ? (React.createElement(PHXSkeleton, { type: 'table' })) : (React.createElement(React.Fragment, null, tableData.length > 0 || (tableData.length === 0 && isSearch) ? (React.createElement("div", { className: 'overflow-hidden rounded-lg bg-white shadow-[0rem_.3125rem_.3125rem_-.15625rem_rgba(0,0,0,.03),0rem_.1875rem_.1875rem_-.09375rem_rgba(0,0,0,.02),0rem_.125rem_.125rem_-.0625rem_rgba(0,0,0,.02),0rem_.0625rem_.0625rem_-.03125rem_rgba(0,0,0,.03),0rem_.03125rem_.03125rem_0rem_rgba(0,0,0,.04),0rem_0rem_0rem_.0625rem_rgba(0,0,0,.06)] ring-1 ring-gray-300' },
            search && search.enable && (React.createElement("div", { className: classNames('relative flex h-9 flex-row items-center rounded-tl-lg rounded-tr-lg px-3 ring-1 ring-gray-300', isSearch ? 'border-none' : 'justify-end', type === 'in-card' ? 'bg-gray-50' : 'bg-white') },
                React.createElement(Search, { isSearch: isSearch, search: search, setIsSearch: setIsSearch, type: type, setCurrentPage: setCurrentPage, setOffset: setOffset, paginationChange: pagination === null || pagination === void 0 ? void 0 : pagination.onChange, tableKey: tableKey, configUrlApply: configUrlApply }),
                React.createElement("button", { className: classNames('ml-1 flex rounded-lg bg-white px-2 py-1 text-xs font-normal text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 active:bg-gray-200 active:pb-[0.2rem] active:pt-[0.3rem] active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset] sm:ml-0', isSearch ? 'pointer-events-none opacity-0' : 'opacity-100'), onClick: () => setIsSearch(true), type: 'button' },
                    React.createElement(MagnifyingGlassIcon, { className: 'h-4 w-4' })),
                React.createElement("div", { className: 'absolute bottom-0 left-0 h-[1px] w-full bg-white' }))),
            React.createElement("div", { className: 'flex flex-col' }, tableData.length > 0 ? (React.createElement("div", { className: 'overflow-x-auto' },
                React.createElement("div", { className: classNames('overflow-auto ring-black ring-opacity-5', search && search.enable ? 'rounded-tl-none rounded-tr-none' : '') },
                    React.createElement(React.Fragment, null,
                        React.createElement("table", { className: 'min-w-full divide-y divide-gray-300' },
                            React.createElement("thead", null,
                                React.createElement(Header, { isHeaderBgWhite: isHeaderBgWhite, border: border, checkbox: checkbox, checked: checked, rows: rows, search: search, selectedAllPeople: selectedAllPeople, tableKey: tableKey, toggleAll: toggleAll, spacing: spacing, textCenter: textCenter })),
                            React.createElement("tbody", null,
                                React.createElement(TableBodyRows, { border: border, brSetSelectedPeople: brSetSelectedPeople, expandedRowKeys: expandedRowKeys, getRowChildren: getRowChildren, getRowKey: getRowKey, handleClick: handleClick, isHighLight: isHighLight, mergeConfig: mergeConfig, readonly: readonly, rowClassName: rowClassName, rowHighlightReadonly: !!(rowHighlightConfig === null || rowHighlightConfig === void 0 ? void 0 : rowHighlightConfig.readonly), rows: buildRowSpan(tableData, mergeConfig), selectedAllPeople: selectedAllPeople, selectedPeople: selectedPeople, spacing: spacing, tableKey: tableKey, textCenter: textCenter, thBody: thBody, thBodyComponent: thBodyComponent, toggleRowExpanded: toggleRowExpanded }))))))) : (React.createElement("div", { className: 'overflow-hidden rounded-lg' },
                React.createElement(PHXEmptySearch, null)))),
            tableData.length > 0 && pagination && (pagination === null || pagination === void 0 ? void 0 : pagination.enable) && (React.createElement(Pagination, { pagination: pagination, currentPage: currentPage, setCurrentPage: setCurrentPage, offset: offset, setOffset: setOffset, tableKey: tableKey, configUrlApply: configUrlApply })))) : (React.createElement("div", { className: 'overflow-hidden rounded-lg border' },
            React.createElement(PHXEmptyRecord, null))))),
        selectedAllPeople && selectedAllPeople.enable && (React.createElement(SelectedAction, { selectedBtn: selectedAllPeople.selectedAction.actions, selectedPeople: selectedPeople, slectedTitle: selectedAllPeople.selectedAction.label, toggleAll: toggleAll }))));
}
//# sourceMappingURL=TableReport.js.map