import * as React from 'react';
import { useDispatch } from 'react-redux';
import SimpleButton from '../../../components/SimpleButton';
import { useAdaptable } from '../../AdaptableContext';
import { Box, Flex } from '../../../components/Flex';
import { TagList } from '../../../components/Tag/Tag';
const baseClassName = 'ab-Adaptable-Object-Compact-List';
const ICON_SIZE = 20;
export const AdaptableObjectCompactListItem = (props) => {
    const dispatch = useDispatch();
    const adaptable = useAdaptable();
    const objectView = props.module.toViewCompact(props.abObject);
    const viewOptions = props.module?.getViewProperties?.();
    const deleteAction = viewOptions?.getCompactDeleteAction?.(props.abObject);
    const moduleAccessLevel = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule(props.module.moduleInfo.ModuleName);
    const suspendAction = viewOptions?.getCompactSuspendAction?.(props.abObject);
    const unSuspendAction = viewOptions?.getCompactUnSuspendAction?.(props.abObject);
    const isSuspended = props.abObject.IsSuspended;
    const handleDelete = React.useCallback((event) => {
        event.stopPropagation();
        event.preventDefault();
        dispatch(deleteAction);
    }, []);
    const handleSuspendUnSuspend = React.useCallback((event) => {
        event.stopPropagation();
        event.preventDefault();
        if (isSuspended) {
            dispatch(unSuspendAction);
        }
        else {
            dispatch(suspendAction);
        }
    }, [props.abObject]);
    let labelEl = objectView.item.label;
    if (typeof labelEl === 'function') {
        labelEl = React.createElement(labelEl, { data: props.abObject });
    }
    labelEl = labelEl ?? objectView.item.name;
    return (React.createElement(Flex, { className: `${baseClassName}__Item`, alignItems: "center" },
        labelEl && (React.createElement(Flex, { className: `${baseClassName}__Item__Name twa:flex-[1_1_auto]` }, labelEl)),
        React.createElement(Box, { className: "twa:flex-[2_1_auto]" },
            typeof objectView.item.view === 'function'
                ? React.createElement(objectView.item.view, {
                    data: props.abObject,
                })
                : objectView.item.view,
            Boolean(objectView.item?.values && objectView.item?.values?.length) && (React.createElement(Box, { className: `${baseClassName}__Item__Values` },
                React.createElement(TagList, { tags: objectView.item.values.map(String) })))),
        suspendAction && unSuspendAction && (React.createElement(SimpleButton, { onMouseDown: handleSuspendUnSuspend, tone: isSuspended ? 'neutral' : 'success', variant: "text", icon: isSuspended ? 'resume' : 'pause' })),
        React.createElement(Flex, { className: "twa:ml-1 twa:flex-[0_0_auto]" }, deleteAction && (React.createElement(SimpleButton, { iconSize: ICON_SIZE, icon: "delete", variant: "text", onMouseDown: handleDelete, accessLevel: moduleAccessLevel })))));
};
export const AdaptableObjectCompactList = (props) => {
    const adaptable = useAdaptable();
    const viewProperties = props.module.getViewProperties?.();
    const deleteAllAction = viewProperties?.getDeleteAllAction?.();
    const suspendAllAction = viewProperties?.getSuspendAllAction?.();
    const unSuspendAllAction = viewProperties?.getUnSuspendAllAction?.();
    const dispatch = useDispatch();
    const accessLevel = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule(props.module.moduleInfo.ModuleName);
    const isAtLeastOneAbObjectActive = props.abObjects.some((abObject) => {
        return !abObject.IsSuspended;
    });
    const handleSuspendUnsuspendAll = React.useCallback((event) => {
        event.stopPropagation();
        event.preventDefault();
        if (isAtLeastOneAbObjectActive) {
            dispatch(suspendAllAction);
        }
        else {
            dispatch(unSuspendAllAction);
        }
    }, [isAtLeastOneAbObjectActive]);
    return (React.createElement(Flex, { flexDirection: "column", className: baseClassName },
        React.createElement(Flex, { className: `${baseClassName}__Header twa:text-3` },
            React.createElement(Flex, { className: `${baseClassName}__Title`, alignItems: 'center' }, props.module.moduleInfo.FriendlyName),
            React.createElement(Box, { className: "twa:flex-1" }),
            suspendAllAction && unSuspendAllAction && (React.createElement(SimpleButton, { className: "twa:mr-2", onMouseDown: handleSuspendUnsuspendAll, tone: isAtLeastOneAbObjectActive ? 'neutral' : 'success', variant: "raised", icon: isAtLeastOneAbObjectActive ? 'pause' : 'resume', accessLevel: accessLevel }, isAtLeastOneAbObjectActive ? 'Suspend All' : 'Unsuspend All')),
            deleteAllAction && (React.createElement(SimpleButton, { onMouseDown: () => dispatch(deleteAllAction), variant: "raised", tone: "neutral", accessLevel: accessLevel }, "Clear All"))),
        React.createElement(Box, { className: `${baseClassName}__Body` }, props.abObjects.map((abObject) => {
            return (React.createElement(AdaptableObjectCompactListItem, { key: abObject.Uuid, abObject: abObject, module: props.module }));
        }))));
};
