"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PHXResourceList = PHXResourceList;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const types_1 = require("../types");
const bulkAction_1 = tslib_1.__importDefault(require("./component/bulkAction"));
const Dropdown_1 = require("../Dropdown");
const EmptyRecord_1 = require("../EmptyRecord");
const searchResult_1 = tslib_1.__importDefault(require("./component/searchResult"));
const list_1 = tslib_1.__importDefault(require("./component/list"));
const Button_1 = require("../Button");
const listWithCard_1 = tslib_1.__importDefault(require("./component/listWithCard"));
const resourceStyle_1 = tslib_1.__importDefault(require("./styles/resourceStyle"));
const Loading_1 = require("../Loading");
const EmptySearch_1 = require("../EmptySearch");
const useDebounce_1 = tslib_1.__importDefault(require("../Func/useDebounce"));
function PHXResourceList({ actionSelectAll = true, bulkActions, bulkActionsContent, bulkActionsSelectedContentDisplay = 'button', button, className, defaultOptionActive, getKeyword, heightList, hiddenBulkActionMarkup, hiddenSelectedCount = false, isApplyClassnameList = false, isBadge, isEmptyData, isOptionList = false, list, loading, onBulkActions, onClickItem, onClickRemoveItem, onScrollBottom, onSelectedItemsChange, paging, readonly = false, searchLoading = false, searchResult = false, selectedCountText, selectedItems, shortcutAction, sortContent, sortOptions, textAction, title, useListWithCard, }) {
    const [dataSelected, setDataSelected] = (0, react_1.useState)(selectedItems !== null && selectedItems !== void 0 ? selectedItems : []);
    const [query, setQuery] = (0, react_1.useState)('');
    const [hasSearched, setHasSearched] = (0, react_1.useState)(false);
    const [filteredItems, setFilteredItems] = (0, react_1.useState)(list !== null && list !== void 0 ? list : []);
    (0, react_1.useEffect)(() => {
        if (getKeyword) {
            setFilteredItems(list);
            return;
        }
        const queryItems = query === '' ? list : list === null || list === void 0 ? void 0 : list.filter((item) => item.name.toLowerCase().includes(query.toLowerCase()));
        setFilteredItems(queryItems);
    }, [query, list]);
    const bulkActionMarkup = bulkActions && actionSelectAll ? (react_1.default.createElement(bulkAction_1.default, { content: bulkActionsContent, dataSelected: dataSelected, list: list ? list : [], onBulkActions: onBulkActions, selectedContentDisplay: bulkActionsSelectedContentDisplay, setDataSelected: setDataSelected, setFilteredItems: setFilteredItems })) : searchResult ? (react_1.default.createElement("div", { className: 'relative flex-1' },
        react_1.default.createElement(searchResult_1.default, { actionSelectAll: actionSelectAll, loading: searchLoading, setQuery: (keyword) => {
                setQuery(keyword.trim());
                setHasSearched(true);
            } }))) : (react_1.default.createElement(react_1.default.Fragment, null));
    const onScrollList = (e) => {
        const target = e.target;
        const isScrollingToBottom = target.scrollHeight - target.scrollTop === target.clientHeight;
        if (isScrollingToBottom) {
            onScrollBottom === null || onScrollBottom === void 0 ? void 0 : onScrollBottom();
        }
    };
    const getListComponent = () => {
        if (useListWithCard) {
            return (react_1.default.createElement(listWithCard_1.default, { filteredItems: filteredItems, isBadge: isBadge, onClickItem: onClickItem, onClickRemoveItem: onClickRemoveItem, readonly: readonly }));
        }
        else {
            return (react_1.default.createElement(react_1.default.Fragment, null, isEmptyData ? (react_1.default.createElement(EmptyRecord_1.PHXEmptyRecord, null)) : (react_1.default.createElement("div", { className: 'haveHeight', onScroll: onScrollList, style: heightList ? { height: `${heightList}px`, overflow: 'auto' } : {} },
                react_1.default.createElement(list_1.default, { actionSelectAll: actionSelectAll, bulkActions: bulkActions, checkRounded: (!title && actionSelectAll) || sortOptions || searchResult, className: className, dataSelected: dataSelected, defaultOptionActive: defaultOptionActive, filteredItems: filteredItems, isApplyClassnameList: isApplyClassnameList, isBadge: isBadge, isOptionList: isOptionList, onBulkActions: onBulkActions, onClickItem: onClickItem, readonly: readonly, setDataSelected: setDataSelected, shortcutAction: shortcutAction }),
                paging && (react_1.default.createElement("div", { className: 'flex items-center justify-center border-t py-3' },
                    react_1.default.createElement(Loading_1.PHXSpinner, null)))))));
        }
    };
    const listMarkup = list && getListComponent();
    const sortActionMarkup = sortOptions && sortContent && !button ? (react_1.default.createElement(Dropdown_1.PHXDropdown, { buttonContent: sortContent, options: sortOptions, origin: 'right' })) : button ? (react_1.default.createElement(Button_1.PHXButton, { ...button }, button === null || button === void 0 ? void 0 : button.children)) : (react_1.default.createElement(react_1.default.Fragment, null));
    (0, react_1.useEffect)(() => {
        if (onSelectedItemsChange) {
            onSelectedItemsChange === null || onSelectedItemsChange === void 0 ? void 0 : onSelectedItemsChange(dataSelected);
        }
    }, [dataSelected]);
    const debouncedSearch = (0, useDebounce_1.default)(query, 300);
    (0, react_1.useEffect)(() => {
        if (getKeyword) {
            getKeyword(debouncedSearch);
        }
    }, [debouncedSearch]);
    return (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement(resourceStyle_1.default, null),
        react_1.default.createElement("div", { className: (0, types_1.classNames)(!isApplyClassnameList && className ? className : '') },
            react_1.default.createElement("div", { className: 'resource-list mx-auto max-w-3xl px-0 lg:max-w-full' },
                react_1.default.createElement("div", { className: (0, types_1.classNames)(' bg-white', !useListWithCard && 'rounded-lg border-[0.5px] border-gray-200') },
                    bulkActions && !title && searchResult && actionSelectAll && (react_1.default.createElement("div", { className: 'relative p-3 pb-0' },
                        react_1.default.createElement(searchResult_1.default, { actionSelectAll: actionSelectAll, loading: searchLoading, setQuery: (keyword) => {
                                setQuery(keyword);
                                setHasSearched(true);
                            }, type: 'have-bulk-actions' }))),
                    loading ? (react_1.default.createElement("div", { className: 'flex h-56 items-center justify-center' },
                        react_1.default.createElement(Loading_1.PHXSpinner, null))) : (react_1.default.createElement(react_1.default.Fragment, null,
                        bulkActions || searchResult || sortOptions || title ? (react_1.default.createElement(react_1.default.Fragment, null, (!title && actionSelectAll) || sortOptions || searchResult ? (react_1.default.createElement("div", { className: (0, types_1.classNames)('flex items-center gap-x-4 border-b pb-3', (!bulkActions || !actionSelectAll) && 'justify-end', !useListWithCard && 'p-3') },
                            !hiddenBulkActionMarkup ? bulkActionMarkup : '',
                            sortActionMarkup)) : title || textAction ? (react_1.default.createElement(react_1.default.Fragment, null,
                            react_1.default.createElement("div", { className: (0, types_1.classNames)('flex justify-between gap-x-4 pb-3', !useListWithCard && 'border-b p-3') },
                                react_1.default.createElement("p", { className: 'text-xs font-semibold leading-5 text-gray-900' }, title),
                                react_1.default.createElement("p", { className: 'text-xs text-blue-600 hover:cursor-pointer hover:text-blue-800 hover:underline', onClick: textAction === null || textAction === void 0 ? void 0 : textAction.onClick }, textAction === null || textAction === void 0 ? void 0 : textAction.content)))) : (react_1.default.createElement(react_1.default.Fragment, null)))) : (react_1.default.createElement(react_1.default.Fragment, null)),
                        filteredItems.length === 0 ? (query !== '' || hasSearched ? (react_1.default.createElement(EmptySearch_1.PHXEmptySearch, null)) : (react_1.default.createElement(EmptyRecord_1.PHXEmptyRecord, { type: 'micro' }))) : (react_1.default.createElement(react_1.default.Fragment, null,
                            listMarkup,
                            !hiddenSelectedCount && dataSelected.length > 0 && (react_1.default.createElement("div", { className: 'rounded-b-lg border-t bg-gray-50 p-3 text-xs' }, selectedCountText
                                ? `${dataSelected.length} ${selectedCountText}`
                                : `${dataSelected.length} selected`)))))))))));
}
//# sourceMappingURL=ResourceList.js.map