import React, { useState } from 'react';
import { classNames } from '../../types';
import { PHXCheckbox } from '../../Checkbox';
import { PHXDropdown } from '../../Dropdown';
import { PHXRadio } from '../../Radio';
import PHXToggle from '../../PHXToggle/Toggle';
import { PHXButton } from '../../Button';
import { PHXBadge } from '../../Badge';
function List({ filteredItems, dataSelected, bulkActions, itemFocusId, readonly, shortcutAction, isOptionList, defaultOptionActive, onClickItem, setDataSelected, isBadge, onBulkActions, actionSelectAll, checkRounded, className, isApplyClassnameList, }) {
    const handleClick = (item) => {
        if (onClickItem && !readonly) {
            onClickItem(item);
        }
        else {
            return;
        }
    };
    const [currentItem, setCurrentItem] = useState(defaultOptionActive);
    const handleSelectOne = (e, item, type) => {
        if (type === 'checkbox') {
            const data = e.target.checked
                ? // @ts-ignore
                    [...dataSelected, item]
                : dataSelected.filter((p) => p.id !== item.id);
            setDataSelected(data);
            if (onBulkActions && !actionSelectAll) {
                onBulkActions(data);
            }
        }
        else {
            setCurrentItem(item);
            onBulkActions(item);
        }
    };
    return (React.createElement("div", { className: classNames(className && isApplyClassnameList ? className : '') }, filteredItems === null || filteredItems === void 0 ? void 0 : filteredItems.map((item, index) => {
        var _a, _b;
        return (React.createElement("div", { key: index, "aria-hidden": true, className: classNames(`${onClickItem ? 'p-3' : ''}`, index < filteredItems.length - 1 && 'border-b', index === 0 && !checkRounded && 'rounded-t-lg', index === filteredItems.length - 1 && dataSelected.length === 0 && 'rounded-b-lg', dataSelected.some((p) => p.id === item.id) && 'bg-gray-50', readonly ? '' : 'hover:cursor-pointer hover:bg-gray-50', itemFocusId && (item === null || item === void 0 ? void 0 : item.id) && itemFocusId === item.id ? 'bg-bgcl-100' : '', (item.renderRight || item.badge) && 'flex justify-between', bulkActions && 'hover:bg-gray-50'), onClick: () => handleClick(item) },
            onClickItem ? (React.createElement("div", { className: 'flex gap-x-1.5 items-center' },
                (bulkActions || isOptionList) && (React.createElement("div", { "aria-hidden": true, onClick: (e) => e.stopPropagation() }, bulkActions ? (React.createElement(PHXCheckbox, { id: `checkbox-${index}`, checked: dataSelected.some((p) => p.id === item.id), onChange: (e) => handleSelectOne(e, item, 'checkbox') })) : (React.createElement(PHXRadio, { id: `radio-${index}`, checked: (currentItem === null || currentItem === void 0 ? void 0 : currentItem.id) === (item === null || item === void 0 ? void 0 : item.id), onChange: (e) => handleSelectOne(e, item, 'radio') })))),
                React.createElement("div", { className: 'flex-1 flex gap-x-1.5 items-center' },
                    (item === null || item === void 0 ? void 0 : item.avatar) && (React.createElement("img", { alt: 'avatar', className: `h-10 w-10 rounded-full mr-2 object-cover ${item === null || item === void 0 ? void 0 : item.avatarClassname}`, src: item.avatar })),
                    React.createElement("div", { className: 'flex flex-col gap-y-0.5' },
                        (item === null || item === void 0 ? void 0 : item.name) &&
                            (!readonly ? (React.createElement("p", { className: 'text-xs font-medium text-gray-900' }, item.name)) : (React.createElement("label", { htmlFor: bulkActions ? `checkbox-${index}` : `radio-${index}`, className: classNames('text-xs font-medium text-gray-900', bulkActions || isOptionList ? 'hover:cursor-pointer' : '') }, item.name))),
                        (item === null || item === void 0 ? void 0 : item.location) && (React.createElement("p", { className: `text-xs ${isBadge ? 'mt-1' : ''} font-normal text-gray-600` }, item.location)))),
                ((_a = item === null || item === void 0 ? void 0 : item.toggle) === null || _a === void 0 ? void 0 : _a.enable) ? (React.createElement(PHXToggle, { active: item.toggle.active, onChange: (active) => item.toggle.onChange(active) })) : (React.createElement(React.Fragment, null, (shortcutAction || (item === null || item === void 0 ? void 0 : item.actions)) && (React.createElement("div", { className: 'flex items-center', "aria-hidden": true, onClick: (e) => e.stopPropagation() }, (item === null || item === void 0 ? void 0 : item.isPlainAction) ? (React.createElement(React.Fragment, null, (item === null || item === void 0 ? void 0 : item.actions) && (item === null || item === void 0 ? void 0 : item.actions.length) > 0 && (React.createElement(React.Fragment, null, item.actions.map((item, index) => (React.createElement(PHXButton, { className: 'text-xs', key: index, plain: true, size: 'small' }, item.content))))))) : (React.createElement(PHXDropdown, { type: 'ellipsis-icon', origin: 'right', options: (item === null || item === void 0 ? void 0 : item.actions) || (shortcutAction === null || shortcutAction === void 0 ? void 0 : shortcutAction(item)) })))))))) : (React.createElement("label", { className: classNames(readonly ? '' : 'hover:cursor-pointer', bulkActions && 'hover:cursor-pointer hover:bg-gray-50'), onClick: (e) => {
                    if (item.hideShortcutAction) {
                        e.preventDefault();
                    }
                } },
                React.createElement("div", { className: 'flex items-center gap-x-1.5 p-3' },
                    bulkActions && (React.createElement("div", { "aria-hidden": true, onClick: (e) => e.stopPropagation() },
                        React.createElement(PHXCheckbox, { id: `checkbox_${index}`, checked: dataSelected.some((it) => it.id === item.id), onChange: (e) => {
                                handleSelectOne(e, item, 'checkbox');
                            } }))),
                    React.createElement("div", { className: 'flex-1 flex gap-x-1.5 items-center' },
                        (item === null || item === void 0 ? void 0 : item.avatar) && (React.createElement("img", { alt: 'avatar', className: `h-10 w-10 rounded-full mr-2 ${item === null || item === void 0 ? void 0 : item.avatarClassname}`, src: item.avatar })),
                        React.createElement("div", { className: 'flex flex-col gap-y-0.5' },
                            (item === null || item === void 0 ? void 0 : item.name) && React.createElement("p", { className: 'text-xs font-medium text-gray-900' }, item.name),
                            (item === null || item === void 0 ? void 0 : item.location) && (React.createElement("p", { className: `text-xs ${isBadge ? 'mt-1' : ''} font-normal text-gray-600` }, item.location)))),
                    ((_b = item === null || item === void 0 ? void 0 : item.toggle) === null || _b === void 0 ? void 0 : _b.enable) ? (React.createElement(PHXToggle, { active: item.toggle.active, onChange: (active) => item.toggle.onChange(active) })) : (React.createElement(React.Fragment, null, (shortcutAction || (item === null || item === void 0 ? void 0 : item.actions)) && !(item === null || item === void 0 ? void 0 : item.hideShortcutAction) && (React.createElement("div", { className: 'flex items-center', "aria-hidden": true, onClick: (e) => e.stopPropagation() }, (item === null || item === void 0 ? void 0 : item.isPlainAction) ? (React.createElement(React.Fragment, null, (item === null || item === void 0 ? void 0 : item.actions) && (item === null || item === void 0 ? void 0 : item.actions.length) > 0 && (React.createElement(React.Fragment, null, item.actions.map((item, index) => (React.createElement(PHXButton, { key: index, plain: true, size: 'small' }, item.content))))))) : (React.createElement(PHXDropdown, { type: 'ellipsis-icon', origin: 'right', options: (item === null || item === void 0 ? void 0 : item.actions) || (shortcutAction === null || shortcutAction === void 0 ? void 0 : shortcutAction(item)) }))))))))),
            (item.renderRight || item.badge) && (React.createElement("div", { className: classNames('shrink-0 ml-2 mr-3 mt-3', item.rightClassName) }, item.renderRight ? (item.renderRight) : (React.createElement(PHXBadge, { className: `h-fit ${item.badge.className}`, text: item.badge.text, type: item.badge.type }))))));
    })));
}
export default List;
//# sourceMappingURL=list.js.map