"use strict";
'use client';
Object.defineProperty(exports, "__esModule", { value: true });
exports.PHXTableV6 = PHXTableV6;
const tslib_1 = require("tslib");
const react_1 = require("@headlessui/react");
const solid_1 = require("@heroicons/react/24/solid");
const react_2 = tslib_1.__importStar(require("react"));
const Button_1 = require("../Button");
const EmptyRecord_1 = require("../EmptyRecord");
const useDebounce_1 = tslib_1.__importDefault(require("../Func/useDebounce"));
const Loading_1 = require("../Loading");
const Skeleton_1 = require("../Skeleton");
const types_1 = require("../types");
const PHXGrpcClientV6_1 = require("../Func/GRPC/PHXGrpcClientV6");
const sort_1 = tslib_1.__importDefault(require("../TableV3/sort"));
const RowTable_1 = require("../TableV3/RowTable");
const PaginaitonSelectedV5_1 = tslib_1.__importDefault(require("../TableV5/PaginaitonSelectedV5"));
const PaginationV5_1 = tslib_1.__importDefault(require("../TableV5/PaginationV5"));
const EmptyStateAction_1 = require("../EmptyStateAction");
const HeaderTable_1 = tslib_1.__importDefault(require("../TableV3/HeaderTable"));
const SelectedAction_1 = tslib_1.__importDefault(require("../TableV3/SelectedAction"));
const helpers_1 = require("../../helpers/helpers");
const useStickyLeft_1 = require("../TableVertical/useStickyLeft");
const CompleteState_1 = require("../CompleteState");
const EmptySearch_1 = require("../EmptySearch");
const direct_link_1 = require("../../hooks/direct-link");
function PHXTableV6({ actionName, clickRow = true, clickType = 'edit', directDetail, editActionLink, filterLoading = false, fixedTableLayout = true, hidePagination, list, numericalOrder = {
    enable: true,
    title: 'STT',
    disableSpacing: false,
    sticky: false,
}, onChange, onClick, pagination, paginationData, router: routerDefault, routerCondition, rowNumber = 25, search, selectArray, selectedAllPeople, selectedBtn, setAggregate, setHeaderLoading, slectedTitle, sort, sortData, sortSelectData, thBody, thBodyComponent, thBodyFilter, thHeader, thHeaderComponent, typeLoading = { type: 'table' }, isSortEmpty = true, emptyStateAction = {
    enable: false,
    title: '',
    description: '',
    buttonContent: '',
    buttonType: 'primary',
    onAction: () => console.log('action'),
}, isCustomHeaderSelected = false, isUnaccentSearchValue = false, disableSpacing = { disable: false, indexStart: 0 }, border = false, isCenterText = false, searchValueData, stickyColumnNumber = 0, getDataTable, stickyColumnNumberRight = 0, isBackgroundReload = false, loaded, isResetPagination = false, tableKey = 'table', searchParams, completeState, completeStateTitle, completeStateDescription, type = 'default', title, replaceUrl = false, }) {
    const checkbox = (0, react_2.useRef)();
    const [checked, setChecked] = (0, react_2.useState)(false);
    const [indeterminate, setIndeterminate] = (0, react_2.useState)(false);
    const [isMainLoading, setIsMainLoading] = (0, react_2.useState)(true);
    const [dataTable, setDataTable] = (0, react_2.useState)([]);
    const [selectedPeople, setSelectedPeople] = (0, react_2.useState)([]);
    const [isSearchLoading, setIsSearchLoading] = (0, react_2.useState)(false);
    const [searchDataResult, setSearchDataResult] = (0, react_2.useState)([]);
    const [pagi, setPagi] = (0, react_2.useState)(0);
    const [numericalOderInPage, setNumericalOderInPage] = (0, react_2.useState)(0);
    const [count, setCount] = (0, react_2.useState)(0);
    const timKiemPlacholder = 'Tìm kiếm';
    const [activeMenu, setActiveMenu] = (0, react_2.useState)(sort === null || sort === void 0 ? void 0 : sort.defaultActive);
    const [isSelectSort, setIsSelectSort] = (0, react_2.useState)(false);
    const [isSort, setIsSort] = (0, react_2.useState)(false);
    const [isSortLoading, setIsSortLoading] = (0, react_2.useState)(false);
    const [numberOfFetchData, setNumberOfFetchData] = (0, react_2.useState)(0);
    const [pageInfo, setPageInfo] = (0, react_2.useState)();
    const [afterRecord, setAfterRecord] = (0, react_2.useState)('');
    const [beforeRecord, setBeforeRecord] = (0, react_2.useState)('');
    const directLink = (0, direct_link_1.PHXUseDirectLink)();
    const routerPush = (link) => {
        if (routerDefault) {
            routerDefault.push(link);
            return;
        }
        directLink(link);
    };
    const handleRouterQuery = (link) => {
        const method = replaceUrl ? 'replace' : 'push';
        if (routerDefault) {
            routerDefault[method](link);
            return;
        }
        directLink(link, { replace: replaceUrl });
    };
    const numericalOrderDefault = {
        ...numericalOrder,
        sticky: !!stickyColumnNumber,
    };
    // @ts-ignore
    const params = new URLSearchParams(searchParams);
    const [searchValue, setSearchValue] = (0, react_2.useState)(params.get(`search-${tableKey}`) || '');
    const [isSearch, setIsSearch] = (0, react_2.useState)(!!params.get(`search-${tableKey}`));
    const [isSearchCancel, setIsSearchCancel] = (0, react_2.useState)(false);
    const entries = Object.fromEntries(params.entries());
    const [rowQuantity, setRowQuantity] = (0, react_2.useState)((entries === null || entries === void 0 ? void 0 : entries[`row-${tableKey}`]) ? Number(entries === null || entries === void 0 ? void 0 : entries[`row-${tableKey}`]) : rowNumber);
    const [isChangeRowQty, setIsChangeRowQty] = (0, react_2.useState)(false);
    (0, react_2.useEffect)(() => {
        if ((entries === null || entries === void 0 ? void 0 : entries[`row-${tableKey}`]) ? Number(entries === null || entries === void 0 ? void 0 : entries[`row-${tableKey}`]) !== rowQuantity : rowNumber !== rowQuantity) {
            setRowQuantity((entries === null || entries === void 0 ? void 0 : entries[`row-${tableKey}`]) ? Number(entries === null || entries === void 0 ? void 0 : entries[`row-${tableKey}`]) : rowNumber);
            if (!isChangeRowQty) {
                setIsChangeRowQty(true);
            }
        }
    }, [entries === null || entries === void 0 ? void 0 : entries[`row-${tableKey}`], rowNumber]);
    const { lefts, refs } = (0, useStickyLeft_1.useStickyLefts)((numericalOrderDefault === null || numericalOrderDefault === void 0 ? void 0 : numericalOrderDefault.sticky) && selectedAllPeople && selectedAllPeople.enable
        ? stickyColumnNumber + 2
        : (numericalOrderDefault === null || numericalOrderDefault === void 0 ? void 0 : numericalOrderDefault.sticky) || (selectedAllPeople && selectedAllPeople.enable)
            ? stickyColumnNumber + 1
            : stickyColumnNumber, dataTable);
    const { refs: refRights, rights } = (0, useStickyLeft_1.useStickyRights)(stickyColumnNumberRight, dataTable);
    const queryHidePagi = list.query
        ? list.query.replace(/first\s*:\s*\d+\s*,?|last\s*:\s*\d+\s*,?|after\s*:\s*\d+\s*,?|before\s*:\s*\d+\s*,?/g, '')
        : '';
    const queryWithNextPage = (after) => list.query
        ? list.query
            .replace(/first\s*:\s*\d+/g, `first: ${rowQuantity}`)
            .replace(/\bafter\b\s*:\s*(["']).*?\1/g, after ? `after: "${after}"` : '')
            .replace(/last\s*:\s*\d+/g, '')
            .replace(/\bbefore\b\s*:\s*(["']).*?\1/g, '')
        : '';
    const queryWithPrevPage = (before) => list.query
        ? list.query
            .replace(/last\s*:\s*\d+/g, `last: ${rowQuantity}`)
            .replace(/\bbefore\b\s*:\s*(["']).*?\1/g, before ? `before: "${before}"` : '')
            .replace(/first\s*:\s*\d+/g, '')
            .replace(/\bafter\b\s*:\s*(["']).*?\1/g, '')
        : '';
    const dataQuery = (after, before) => {
        switch (true) {
            case hidePagination:
                return queryHidePagi;
            case !!after:
                return queryWithNextPage(after);
            case !!before:
                return queryWithPrevPage(before);
            default:
                return queryWithNextPage('');
        }
    };
    const { enable: enableEmptyStateAction, ...emptyStateActionAttribute } = emptyStateAction;
    const filterQuery = (query, value) => {
        const formatValue = isUnaccentSearchValue ? (0, helpers_1.unaccentValue)(value) : value;
        return query.replace(/%@value%/g, `${formatValue}`);
    };
    const searchQuery = search && search.query ? filterQuery(search.query, searchValue.trim()) : '';
    const searchQueryHidePagi = searchQuery
        .replace(/last\s*:\s*\d+/g, '')
        .replace(/\bbefore\b\s*:\s*(["']).*?\1/g, '')
        .replace(/first\s*:\s*\d+/g, '')
        .replace(/\bafter\b\s*:\s*(["']).*?\1/g, '');
    const searchQueryWithNextPage = (after) => searchQuery
        .replace(/first\s*:\s*\d+/g, `first: ${rowQuantity}`)
        .replace(/\bafter\b\s*:\s*(["']).*?\1/g, after ? `after: "${after}"` : '')
        .replace(/last\s*:\s*\d+/g, '')
        .replace(/\bbefore\b\s*:\s*(["']).*?\1/g, '');
    const searchQueryWithPrevPage = (before) => searchQuery
        .replace(/last\s*:\s*\d+/g, `last: ${rowQuantity}`)
        .replace(/\bbefore\b\s*:\s*(["']).*?\1/g, before ? `before: "${before}"` : '')
        .replace(/first\s*:\s*\d+/g, '')
        .replace(/\bafter\b\s*:\s*(["']).*?\1/g, '');
    const searchDataQuery = (after, before) => {
        switch (true) {
            case hidePagination:
                return searchQueryHidePagi;
            case !!after:
                return searchQueryWithNextPage(after);
            case !!before:
                return searchQueryWithPrevPage(before);
            default:
                return searchQueryWithNextPage('');
        }
    };
    const fetchSearchData = async () => {
        try {
            const variables = (search === null || search === void 0 ? void 0 : search.persistedId)
                ? {
                    ...search === null || search === void 0 ? void 0 : search.variables,
                    first: rowQuantity,
                    after: afterRecord,
                }
                : {};
            const queryFn = PHXGrpcClientV6_1.PHXClientQueryV6;
            return queryFn({
                query: searchDataQuery(afterRecord, beforeRecord),
                variables,
                persistedId: search === null || search === void 0 ? void 0 : search.persistedId,
                schemaGroup: search === null || search === void 0 ? void 0 : search.schemaGroup,
            });
        }
        catch (error) {
            console.log(error);
            return;
        }
    };
    const getData = (result) => result.data;
    const returnDataTable = async (data) => {
        if (getDataTable && data.length) {
            await getDataTable(data);
        }
    };
    const bindDataToTable = (dataTable) => {
        // @ts-ignore
        const data = [...dataTable];
        setDataTable(data);
        setSearchDataResult(data);
    };
    const [isChangePageLoading, setIsChangePageLoading] = (0, react_2.useState)(false);
    const [previousValue, setPreviousValue] = (0, react_2.useState)(params.get(`search-${tableKey}`) || '');
    const [currentPage, setCurrentPage] = (0, react_2.useState)(1);
    const handleChangePage = (page) => {
        if (page > 0 && page <= Math.ceil(count / rowQuantity)) {
            setIsChangePageLoading(true);
            setCurrentPage(page);
            setPagi(page - 1);
            paginationData(page - 1);
        }
    };
    (0, react_2.useLayoutEffect)(() => {
        const isIndeterminate = selectedPeople.length > 0 && selectedPeople.length < dataTable.length;
        setChecked(selectedPeople.length === dataTable.length && dataTable.length > 0);
        setIndeterminate(isIndeterminate);
        // @ts-ignore
        if (checkbox.current) {
            checkbox.current.indeterminate = isIndeterminate;
        }
    }, [selectedPeople]);
    function toggleAll() {
        // @ts-ignore
        if (searchValue) {
            setSelectedPeople(checked || indeterminate ? [] : searchDataResult.filter((item) => !(item === null || item === void 0 ? void 0 : item.entered_school)));
        }
        else {
            setSelectedPeople(checked || indeterminate ? [] : dataTable.filter((item) => !(item === null || item === void 0 ? void 0 : item.entered_school)));
        }
        if (onChange) {
            onChange(checked || indeterminate ? [] : dataTable.filter((item) => !(item === null || item === void 0 ? void 0 : item.entered_school)));
        }
        setChecked(!checked && !indeterminate);
        setIndeterminate(false);
    }
    function searchSetValue(value) {
        setSearchValue(value);
        if (searchValueData) {
            const formatValue = isUnaccentSearchValue ? (0, helpers_1.unaccentValue)(value.trim()) : value.trim();
            searchValueData(formatValue);
        }
        if (!value) {
            setIsSearchCancel(true);
        }
    }
    function brSetSelectedPeople(value) {
        const maxSelectedPeople = (selectedAllPeople === null || selectedAllPeople === void 0 ? void 0 : selectedAllPeople.maxSelectedPeople) || 0; // loại bỏ item cũ, chỉ giữ lại số item mới nhất, nếu mặc định là 0 thì giữ nguyên mảng gốc
        setSelectedPeople(value.slice(-maxSelectedPeople));
    }
    function renderInclude(person) {
        // @ts-ignore
        return selectedPeople.includes(person);
    }
    function searchChange(e) {
        const value = e.target.value;
        // Loại bỏ ký tự "\" từ chuỗi
        const replaceSensitiveValue = value.replace(/\\/g, '');
        searchSetValue(replaceSensitiveValue);
        paginationData(0);
        setCurrentPage(1);
        setPagi(0);
        setAfterRecord('');
        setBeforeRecord('');
        if (replaceSensitiveValue !== previousValue) {
            setPreviousValue(replaceSensitiveValue);
        }
        if (replaceSensitiveValue.trim().length === 0) {
            setSearchDataResult(dataTable);
        }
        params.set(`search-${tableKey}`, value);
        params.set(`pagi-${tableKey}`, '1');
        params.delete(`after-${tableKey}`);
        params.delete(`before-${tableKey}`);
        handleRouterQuery(`?${params + ''}`);
    }
    const debouncedSearch = (0, useDebounce_1.default)(searchValue, 300);
    const sortOnChange = (item) => {
        const isChangeSort = item.id !== activeMenu;
        setIsSort(true);
        sortData(item.field, item.sortDirection);
        setActiveMenu(item.id);
        if (isChangeSort) {
            setIsSortLoading(true);
        }
    };
    const sortSelectOnchange = (item, columnName) => {
        const isChangeSort = item.id !== activeMenu;
        setActiveMenu(item.id);
        sortSelectData(item, columnName);
        setIsSelectSort(true);
        if (isChangeSort) {
            setIsSortLoading(true);
        }
    };
    const actionClickAll = () => {
        actionName(selectedPeople, true);
    };
    const checkConditionRouter = (rowData) => {
        if (routerCondition.conditionArray.some((item) => item === rowData[routerCondition.conditionName])) {
            return true;
        }
        return false;
    };
    const handleSearch = async () => {
        setIsSearchLoading(true);
        const data = getData(await fetchSearchData());
        const dataTable = search.keyResult;
        setCount(data[dataTable].totalCount);
        if (setAggregate) {
            setAggregate(data[dataTable].totalCount);
        }
        if (previousValue !== searchValue) {
            setCurrentPage(1);
        }
        const tableData = data[dataTable].nodes;
        await returnDataTable(tableData);
        setSearchDataResult(tableData);
        setPageInfo(data[dataTable].pageInfo);
        setIsSearchLoading(false);
        setIsChangeRowQty(false);
        setIsChangePageLoading(false);
        setNumericalOderInPage(pagi);
        // khi search sẽ reset những row đã select
        // setSelectedPeople([]);
    };
    const paginationWithApplyUrl = () => {
        let currentPagination = 1;
        let afterParams = '';
        let beforeParams = '';
        if (!isResetPagination && !isChangeRowQty) {
            const entries = Object.fromEntries(params.entries());
            currentPagination = (entries === null || entries === void 0 ? void 0 : entries[`pagi-${tableKey}`]) ? Number(entries === null || entries === void 0 ? void 0 : entries[`pagi-${tableKey}`]) || 1 : 1;
            afterParams = (entries === null || entries === void 0 ? void 0 : entries[`after-${tableKey}`]) ? (entries === null || entries === void 0 ? void 0 : entries[`after-${tableKey}`]) || '' : '';
            beforeParams = (entries === null || entries === void 0 ? void 0 : entries[`before-${tableKey}`]) ? (entries === null || entries === void 0 ? void 0 : entries[`before-${tableKey}`]) || '' : '';
        }
        if (!isChangePageLoading && !hidePagination && !isChangeRowQty) {
            setCurrentPage(currentPagination);
            setPagi(currentPagination - 1);
            paginationData(currentPagination - 1);
            setAfterRecord(afterParams);
            setBeforeRecord(beforeParams);
        }
        return { currentPagination, afterParams, beforeParams };
    };
    const queryData = async () => {
        let query = dataQuery(afterRecord, beforeRecord);
        const { afterParams, beforeParams, currentPagination } = paginationWithApplyUrl();
        if (!isChangePageLoading) {
            query = dataQuery(afterParams, beforeParams);
        }
        try {
            const variables = (list === null || list === void 0 ? void 0 : list.persistedId)
                ? {
                    ...list === null || list === void 0 ? void 0 : list.variables,
                    first: rowQuantity,
                    after: !isChangePageLoading ? afterParams : afterRecord,
                }
                : {};
            const queryFn = PHXGrpcClientV6_1.PHXClientQueryV6;
            const data = getData(searchValue
                ? await fetchSearchData()
                : await queryFn({
                    query,
                    variables,
                    persistedId: list === null || list === void 0 ? void 0 : list.persistedId,
                    schemaGroup: list === null || list === void 0 ? void 0 : list.schemaGroup,
                }));
            if (!data)
                return;
            const isLoading = (!isBackgroundReload || (numberOfFetchData === 0 && isBackgroundReload)) &&
                !isSearchCancel &&
                !isChangePageLoading;
            if (isLoading) {
                setIsMainLoading(true);
            }
            const dataTable = list.keyResult;
            await returnDataTable(data[dataTable].nodes);
            bindDataToTable(data[dataTable].nodes);
            setCount(data[dataTable].totalCount);
            setPageInfo(data[dataTable].pageInfo);
            if (setAggregate) {
                setAggregate(data[dataTable].totalCount);
            }
            setIsMainLoading(false);
            if (setHeaderLoading)
                setHeaderLoading();
            setIsSearchLoading(false);
            setIsChangePageLoading(false);
            setIsChangeRowQty(false);
            setNumberOfFetchData(numberOfFetchData + 1);
            loaded === null || loaded === void 0 ? void 0 : loaded(true);
            if (!isChangePageLoading && !hidePagination && !isChangeRowQty) {
                setNumericalOderInPage(currentPagination - 1);
            }
            else {
                setNumericalOderInPage(pagi);
            }
            setIsSearchCancel(false);
        }
        catch (e) {
            console.log(e);
        }
    };
    (0, react_2.useEffect)(() => {
        if (!searchValue || numberOfFetchData === 0 || !(search === null || search === void 0 ? void 0 : search.enable)) {
            queryData();
        }
        else if (debouncedSearch) {
            handleSearch();
        }
    }, [pagi, debouncedSearch]);
    (0, react_2.useEffect)(() => {
        if (!isNaN(Number(pagination))) {
            setCurrentPage(Number(pagination) + 1);
        }
    }, [pagination]);
    (0, react_2.useEffect)(() => {
        if (dataTable) {
            setIsSortLoading(false);
        }
        // if (getDataTable && dataTable.length) {
        //   getDataTable(dataTable)
        // }
    }, [dataTable]);
    (0, react_2.useEffect)(() => {
        if ((!isChangePageLoading && filterLoading && !isSortLoading) || isChangeRowQty) {
            queryData();
            if (!isBackgroundReload || (numberOfFetchData === 0 && isBackgroundReload)) {
                setIsMainLoading(true);
            }
            setSelectedPeople([]);
        }
        if (search && search.enable && isChangePageLoading) {
            setIsSearchLoading(true);
        }
    }, [list, afterRecord, beforeRecord, rowQuantity]);
    (0, react_2.useEffect)(() => {
        if (isSortLoading) {
            queryData();
            setSelectedPeople([]);
        }
    }, [sort]);
    const funcItemReadOnly = thBodyComponent ? thBodyComponent === null || thBodyComponent === void 0 ? void 0 : thBodyComponent.readOnly : null;
    const onClickItem = (item) => {
        if (onClick && (!funcItemReadOnly || (funcItemReadOnly && !funcItemReadOnly(item)))) {
            onClick(item);
        }
    };
    const handleClickRow = (item) => {
        if (routerCondition) {
            const link = checkConditionRouter(item) ? `${routerCondition.link}${item.id}` : `${editActionLink}${item.id}`;
            routerPush(link);
            return;
        }
        if (clickType === 'edit') {
            routerPush(`${editActionLink}${item.id}`);
            return;
        }
        // @ts-ignore
        onClickItem(item);
    };
    return (react_2.default.createElement(react_2.default.Fragment, null,
        isMainLoading ? (react_2.default.createElement(Skeleton_1.PHXSkeleton, { filterQty: typeLoading === null || typeLoading === void 0 ? void 0 : typeLoading.filterQty, reportQty: typeLoading === null || typeLoading === void 0 ? void 0 : typeLoading.reportQty, type: typeLoading.type })) : (react_2.default.createElement(react_2.default.Fragment, null,
            title && react_2.default.createElement("div", { className: 'mb-4 text-sm font-semibold leading-5 text-gray-900' }, title),
            react_2.default.createElement("div", { className: '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-200' },
                react_2.default.createElement("div", { className: 'flex flex-col' },
                    (dataTable.length > 0 ||
                        (dataTable.length === 0 && isSearch) ||
                        (dataTable.length === 0 && isSelectSort) ||
                        (dataTable.length === 0 && isSort) ||
                        (dataTable.length === 0 && (sort === null || sort === void 0 ? void 0 : sort.enable))) && (react_2.default.createElement("div", { className: (0, types_1.classNames)(isSortEmpty && dataTable.length === 0 && !isSearch ? 'hidden' : 'min-w-full align-middle', (sort && sort.enable) || (search && search.enable) ? 'min-h-11' : '') },
                        react_2.default.createElement(react_1.Transition, { as: react_2.Fragment, enter: 'transition-[max-height,opacity] duration-300 ease-out overflow-hidden', enterFrom: 'max-h-0 opacity-0', enterTo: 'max-h-20 opacity-100', show: isSearch },
                            react_2.default.createElement("div", { className: (0, types_1.classNames)('flex flex-row items-center justify-center rounded-tl-lg rounded-tr-lg px-3 py-1 pl-5 ring-opacity-5', !sort || !sort.enable ? '' : '', searchDataResult.length === 0 && 'border-b', type === 'in-card' && 'bg-gray-50') },
                                react_2.default.createElement("div", { className: 'relative mr-2 w-11/12' },
                                    react_2.default.createElement("input", { autoFocus: true, className: 'block w-full rounded-lg border-transparent bg-white py-1 text-xs hover:border hover:border-gray-500 focus:border-indigo-800 focus:bg-white focus:ring-indigo-800', id: 'search-value', name: 'search-value', onInput: searchChange, placeholder: timKiemPlacholder, type: 'text', value: searchValue })),
                                react_2.default.createElement("div", { className: 'flex w-14 justify-center pt-1' }, isSearchLoading ? react_2.default.createElement(Loading_1.PHXSpinner, null) : null),
                                react_2.default.createElement("div", null,
                                    react_2.default.createElement("button", { className: 'inline-flex items-center rounded-lg border-gray-300 px-2 py-1 text-xs font-medium text-gray-700 hover:bg-gray-200', onClick: () => {
                                            setIsSearch(false);
                                            searchSetValue('');
                                            params.delete(`search-${tableKey}`);
                                            handleRouterQuery(`?${params + ''}`);
                                        }, type: 'button' }, "Cancel")))),
                        react_2.default.createElement("div", { className: (0, types_1.classNames)((sort && sort.enable) || (search && search.enable)
                                ? `flex flex-row items-center rounded-tl-lg rounded-tr-lg px-3 pl-8 ${sort && sort.enable
                                    ? `sm:justify-between ${dataTable.length === 0 || searchDataResult.length === 0 ? 'border-b' : ''}`
                                    : 'sm:justify-end'} ${isSearch ? 'border-none py-1' : 'mb-2 py-1.5'}`
                                : '', isSearch && (!sort || !sort.enable) ? 'pointer-events-none opacity-0' : 'opacity-100', type === 'in-card' && 'bg-gray-50') },
                            sort && sort.enable ? (react_2.default.createElement(react_2.default.Fragment, null,
                                react_2.default.createElement(sort_1.default, { activeMenu: activeMenu, className: 'w-11/12', isSearch: isSearch, onChange: sortOnChange, onChangeSelect: sortSelectOnchange, selectArray: selectArray, sortList: sort.sortList }),
                                react_2.default.createElement("div", { className: 'flex justify-center lg:w-14' }, isSortLoading ? react_2.default.createElement(Loading_1.PHXSpinner, null) : null))) : null,
                            !isSearch && (search === null || search === void 0 ? void 0 : search.enable) && (react_2.default.createElement("div", { className: 'mr-3 flex justify-center' }, isChangePageLoading ? react_2.default.createElement(Loading_1.PHXSpinner, null) : null)),
                            search && search.enable && (react_2.default.createElement("div", { className: 'rounded-lg bg-white' }, !isSearch && (react_2.default.createElement("button", { className: 'ml-1 flex rounded-lg 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', onClick: () => setIsSearch(true), type: 'button' },
                                react_2.default.createElement(solid_1.MagnifyingGlassIcon, { className: 'h-4 w-4' })))))))),
                    dataTable.length > 0 || isSearch ? (react_2.default.createElement("div", { className: 'relative' }, searchDataResult.length > 0 && !isMainLoading ? (react_2.default.createElement("div", { className: '-my-2 overflow-x-auto' },
                        react_2.default.createElement("div", { className: (0, types_1.classNames)('min-w-full pb-2 align-middle ring-black ring-opacity-5', (search && search.enable) || (sort && sort.enable) ? '' : 'pt-0.5') },
                            react_2.default.createElement("div", { className: (0, types_1.classNames)('relative overflow-auto', (search && search.enable) || (sort && sort.enable)
                                    ? 'ring-1 ring-black ring-opacity-5'
                                    : 'mt-1.5') },
                                react_2.default.createElement(react_2.default.Fragment, null, selectedAllPeople && selectedAllPeople.enable ? (react_2.default.createElement(react_2.default.Fragment, null, selectedPeople.length > 0 && selectedAllPeople.title && (react_2.default.createElement("div", { className: 'absolute left-12 top-4 flex h-fit items-center space-x-3 bg-gray-50 sm:left-16' },
                                    react_2.default.createElement(Button_1.PHXButton, { onClick: actionClickAll, secondary: true, size: 'micro' }, selectedAllPeople.title))))) : null),
                                react_2.default.createElement("table", { className: (0, types_1.classNames)('min-w-full divide-y divide-gray-300', fixedTableLayout ? 'table-fixed' : '', (search && search.enable) || (sort && sort.enable) ? 'border-t' : '') },
                                    thHeaderComponent ? (react_2.default.createElement(react_2.default.Fragment, null, selectedAllPeople && selectedAllPeople.enable && isCustomHeaderSelected ? (react_2.default.createElement(react_2.default.Fragment, null, thHeaderComponent(react_2.default.createElement("th", { className: 'relative w-12 rounded-lg px-6 py-2.5 sm:w-16 sm:px-8', scope: 'col' },
                                        react_2.default.createElement("input", { ref: checkbox, checked: checked, className: 'absolute left-4 top-1/2 -mt-2 block h-4 w-4 rounded border-[0.5px] border-gray-500 text-indigo-800 hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent sm:left-6', onChange: toggleAll, type: 'checkbox' }))))) : (react_2.default.createElement(react_2.default.Fragment, null, thHeaderComponent)))) : (react_2.default.createElement("thead", null,
                                        react_2.default.createElement(HeaderTable_1.default, { border: border, checkbox: checkbox, checked: checked, disableSpacing: disableSpacing, isCenterText: isCenterText, numericalOrder: numericalOrderDefault, selectedAllPeople: selectedAllPeople, thHeader: thHeader, toggleAll: toggleAll, lefts: lefts, refs: refs, stickyColumnNumber: stickyColumnNumber, selectedPeople: selectedPeople, stickyColumnNumberRight: stickyColumnNumberRight, rights: rights, refRights: refRights, search: search, tableKey: tableKey }))),
                                    react_2.default.createElement("tbody", { className: 'divide-y divide-gray-200' }, searchValue === ''
                                        ? dataTable.map((item, index) => (
                                        // @ts-ignore
                                        react_2.default.createElement("tr", { key: item.rowId, className: (0, types_1.classNames)(clickRow && !funcItemReadOnly ? 'hover:cursor-pointer hover:bg-gray-50' : '', renderInclude(item) && !(item === null || item === void 0 ? void 0 : item.entered_school) && (selectedAllPeople === null || selectedAllPeople === void 0 ? void 0 : selectedAllPeople.enable)
                                                ? 'bg-gray-50'
                                                : '', funcItemReadOnly && clickType === 'custom'
                                                ? funcItemReadOnly(item)
                                                    ? ''
                                                    : 'hover:cursor-pointer hover:bg-gray-50'
                                                : ''), onClick: () => {
                                                if (clickRow) {
                                                    if (routerCondition) {
                                                        // eslint-disable-next-line no-unused-expressions
                                                        checkConditionRouter(item)
                                                            ? routerPush(`${routerCondition.link}${item.rowId}`)
                                                            : routerPush(`${editActionLink}${item.rowId}`);
                                                    }
                                                    else if (clickType === 'edit') {
                                                        routerPush(`${editActionLink}${item.rowId}`);
                                                    }
                                                    else {
                                                        // @ts-ignore
                                                        onClickItem(item);
                                                    }
                                                }
                                            } }, thBody.map((bodyItem, bodyIndex) => (react_2.default.createElement(RowTable_1.RowTable, { key: bodyIndex, bodyIndex: bodyIndex, border: border, brSetSelectedPeople: brSetSelectedPeople, directDetail: directDetail, disableSpacing: disableSpacing, editActionLink: editActionLink, isCenterText: isCenterText, itemBody: item, numericalOrder: {
                                                ...numericalOrderDefault,
                                                order: numericalOderInPage * rowQuantity + index + 1,
                                            }, onChange: onChange, selectedAllPeople: selectedAllPeople, selectedPeople: selectedPeople, thBody: thBody, thBodyComponent: thBodyComponent, thBodyFilter: thBodyFilter, lefts: lefts, stickyColumnNumber: stickyColumnNumber, stickyColumnNumberRight: stickyColumnNumberRight, rights: rights, hidePagination: hidePagination, dataTableAggregate: dataTable.length, itemIndex: index, tableKey: tableKey }))))))
                                        : searchDataResult.map((item, index) => (
                                        // @ts-ignore
                                        react_2.default.createElement("tr", { key: item.rowId, className: (0, types_1.classNames)(clickRow && !funcItemReadOnly ? 'hover:cursor-pointer hover:bg-gray-50' : '', renderInclude(item) && !(item === null || item === void 0 ? void 0 : item.entered_school) && (selectedAllPeople === null || selectedAllPeople === void 0 ? void 0 : selectedAllPeople.enable)
                                                ? 'bg-gray-50'
                                                : '', funcItemReadOnly && clickType === 'custom'
                                                ? funcItemReadOnly(item)
                                                    ? ''
                                                    : 'hover:cursor-pointer hover:bg-gray-50'
                                                : '', hidePagination && index === searchDataResult.length - 1 && 'rounded-bl-lg'), onClick: () => {
                                                if (clickRow) {
                                                    handleClickRow(item);
                                                }
                                            } }, thBody.map((bodyItem, bodyIndex) => (react_2.default.createElement(RowTable_1.RowTable, { key: bodyIndex, bodyIndex: bodyIndex, border: border, brSetSelectedPeople: brSetSelectedPeople, directDetail: directDetail, disableSpacing: disableSpacing, editActionLink: editActionLink, isCenterText: isCenterText, itemBody: item, numericalOrder: {
                                                ...numericalOrderDefault,
                                                order: numericalOderInPage * rowQuantity + index + 1,
                                            }, onChange: onChange, selectedAllPeople: selectedAllPeople, selectedPeople: selectedPeople, thBody: thBody, thBodyComponent: thBodyComponent, thBodyFilter: thBodyFilter, lefts: lefts, stickyColumnNumber: stickyColumnNumber, stickyColumnNumberRight: stickyColumnNumberRight, rights: rights, hidePagination: hidePagination, dataTableAggregate: searchDataResult.length, itemIndex: index, tableKey: tableKey })))))))))))) : (react_2.default.createElement(EmptySearch_1.PHXEmptySearch, null)))) : (dataTable.length === 0 && isSearch) ||
                        (dataTable.length === 0 && isSelectSort) ||
                        (dataTable.length === 0 && isSort) ||
                        (dataTable.length === 0 && (sort === null || sort === void 0 ? void 0 : sort.enable)) ? (react_2.default.createElement(react_2.default.Fragment, null, enableEmptyStateAction ? react_2.default.createElement(EmptyStateAction_1.PHXEmptyStateAction, { ...emptyStateActionAttribute }) : react_2.default.createElement(EmptyRecord_1.PHXEmptyRecord, null))) : (react_2.default.createElement(react_2.default.Fragment, null, enableEmptyStateAction ? (react_2.default.createElement(EmptyStateAction_1.PHXEmptyStateAction, { ...emptyStateActionAttribute })) : completeState ? (react_2.default.createElement(CompleteState_1.PHXCompleteState, { title: completeStateTitle || 'Hoàn tất duyệt đơn!', description: completeStateDescription || 'Tất cả đơn đăng ký đã được duyệt.' })) : (react_2.default.createElement(EmptyRecord_1.PHXEmptyRecord, null))))),
                dataTable.length > 0 && !hidePagination && (react_2.default.createElement("div", { className: 'flex items-center justify-between rounded-lg rounded-tl-none rounded-tr-none border-t border-gray-200 bg-[#F9FAFB] py-2 pl-7 pr-2' },
                    react_2.default.createElement(PaginaitonSelectedV5_1.default, { rowQuantity: rowQuantity, setIsChangeRowQty: setIsChangeRowQty, setRowQuantity: setRowQuantity, routerPush: handleRouterQuery, searchParams: params, tableKey: tableKey, setCurrentPage: setCurrentPage, setPagi: setPagi, paginationData: paginationData, setAfterRecord: setAfterRecord, setBeforeRecord: setBeforeRecord }),
                    react_2.default.createElement(PaginationV5_1.default, { count: count, currentPage: currentPage, handleChangePage: handleChangePage, pagination: pagination, routerPush: handleRouterQuery, rowQuantity: rowQuantity, totalPages: Math.ceil(count / rowQuantity), searchParams: params, tableKey: tableKey, setAfterRecord: setAfterRecord, setBeforeRecord: setBeforeRecord, pageInfo: pageInfo })))))),
        (selectedAllPeople === null || selectedAllPeople === void 0 ? void 0 : selectedAllPeople.enable) && !(selectedAllPeople === null || selectedAllPeople === void 0 ? void 0 : selectedAllPeople.hideSelectedAction) && (react_2.default.createElement(SelectedAction_1.default, { selectedBtn: selectedBtn, selectedPeople: selectedPeople, slectedTitle: slectedTitle, toggleAll: toggleAll }))));
}
//# sourceMappingURL=TableV6.js.map