import React, { useEffect, useState } from 'react';
import { classNames } from '../types';
import BulkAction from './component/bulkAction';
import { PHXDropdown } from '../Dropdown';
import { PHXEmptyRecord } from '../EmptyRecord';
import SearchResult from './component/searchResult';
import List from './component/list';
import { PHXButton } from '../Button';
import ListWithCard from './component/listWithCard';
import ResourceStyle from './styles/resourceStyle';
import { PHXSpinner } from '../Loading';
import { PHXEmptySearch } from '../EmptySearch';
import PHXUseDebounce from '../Func/useDebounce';
export 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] = useState(selectedItems !== null && selectedItems !== void 0 ? selectedItems : []);
    const [query, setQuery] = useState('');
    const [hasSearched, setHasSearched] = useState(false);
    const [filteredItems, setFilteredItems] = useState(list !== null && list !== void 0 ? list : []);
    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.createElement(BulkAction, { content: bulkActionsContent, dataSelected: dataSelected, list: list ? list : [], onBulkActions: onBulkActions, selectedContentDisplay: bulkActionsSelectedContentDisplay, setDataSelected: setDataSelected, setFilteredItems: setFilteredItems })) : searchResult ? (React.createElement("div", { className: 'relative flex-1' },
        React.createElement(SearchResult, { actionSelectAll: actionSelectAll, loading: searchLoading, setQuery: (keyword) => {
                setQuery(keyword.trim());
                setHasSearched(true);
            } }))) : (React.createElement(React.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.createElement(ListWithCard, { filteredItems: filteredItems, isBadge: isBadge, onClickItem: onClickItem, onClickRemoveItem: onClickRemoveItem, readonly: readonly }));
        }
        else {
            return (React.createElement(React.Fragment, null, isEmptyData ? (React.createElement(PHXEmptyRecord, null)) : (React.createElement("div", { className: 'haveHeight', onScroll: onScrollList, style: heightList ? { height: `${heightList}px`, overflow: 'auto' } : {} },
                React.createElement(List, { 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.createElement("div", { className: 'flex items-center justify-center border-t py-3' },
                    React.createElement(PHXSpinner, null)))))));
        }
    };
    const listMarkup = list && getListComponent();
    const sortActionMarkup = sortOptions && sortContent && !button ? (React.createElement(PHXDropdown, { buttonContent: sortContent, options: sortOptions, origin: 'right' })) : button ? (React.createElement(PHXButton, { ...button }, button === null || button === void 0 ? void 0 : button.children)) : (React.createElement(React.Fragment, null));
    useEffect(() => {
        if (onSelectedItemsChange) {
            onSelectedItemsChange === null || onSelectedItemsChange === void 0 ? void 0 : onSelectedItemsChange(dataSelected);
        }
    }, [dataSelected]);
    const debouncedSearch = PHXUseDebounce(query, 300);
    useEffect(() => {
        if (getKeyword) {
            getKeyword(debouncedSearch);
        }
    }, [debouncedSearch]);
    return (React.createElement(React.Fragment, null,
        React.createElement(ResourceStyle, null),
        React.createElement("div", { className: classNames(!isApplyClassnameList && className ? className : '') },
            React.createElement("div", { className: 'resource-list mx-auto max-w-3xl px-0 lg:max-w-full' },
                React.createElement("div", { className: classNames(' bg-white', !useListWithCard && 'rounded-lg border-[0.5px] border-gray-200') },
                    bulkActions && !title && searchResult && actionSelectAll && (React.createElement("div", { className: 'relative p-3 pb-0' },
                        React.createElement(SearchResult, { actionSelectAll: actionSelectAll, loading: searchLoading, setQuery: (keyword) => {
                                setQuery(keyword);
                                setHasSearched(true);
                            }, type: 'have-bulk-actions' }))),
                    loading ? (React.createElement("div", { className: 'flex h-56 items-center justify-center' },
                        React.createElement(PHXSpinner, null))) : (React.createElement(React.Fragment, null,
                        bulkActions || searchResult || sortOptions || title ? (React.createElement(React.Fragment, null, (!title && actionSelectAll) || sortOptions || searchResult ? (React.createElement("div", { className: classNames('flex items-center gap-x-4 border-b pb-3', (!bulkActions || !actionSelectAll) && 'justify-end', !useListWithCard && 'p-3') },
                            !hiddenBulkActionMarkup ? bulkActionMarkup : '',
                            sortActionMarkup)) : title || textAction ? (React.createElement(React.Fragment, null,
                            React.createElement("div", { className: classNames('flex justify-between gap-x-4 pb-3', !useListWithCard && 'border-b p-3') },
                                React.createElement("p", { className: 'text-xs font-semibold leading-5 text-gray-900' }, title),
                                React.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.createElement(React.Fragment, null)))) : (React.createElement(React.Fragment, null)),
                        filteredItems.length === 0 ? (query !== '' || hasSearched ? (React.createElement(PHXEmptySearch, null)) : (React.createElement(PHXEmptyRecord, { type: 'micro' }))) : (React.createElement(React.Fragment, null,
                            listMarkup,
                            !hiddenSelectedCount && dataSelected.length > 0 && (React.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