var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { useCallback } from 'react';
import { makeStyles, lighten, Typography, CircularProgress, darken, useTheme, Tooltip } from '@material-ui/core';
import TreeItem from '@material-ui/lab/TreeItem';
import { getIconFromName } from '../../utilities/tree/TreeUtilities';
import clsx from 'clsx';
import { UnityFluentIcon } from '../../utilities/iconLibrary/UnityFluentIcon';
import { getUnityIconFromName } from '../../utilities/iconLibrary/UnityIconLibrary';
import { useDrag, useDrop } from 'react-dnd';
import { NodeActionTriggerEnums, TreeViewModeEnums } from '../../enums/unitySystemEnums.ts';
import { AggregateChip } from '../../UI/utilityDisplay/AggregateChip';
const useStyles = makeStyles((theme) => {
    var _a, _b;
    return ({
        root: {
            '&.Mui-selected > .MuiTreeItem-content': {
                backgroundColor: ((_a = theme === null || theme === void 0 ? void 0 : theme.getThemeData()) === null || _a === void 0 ? void 0 : _a.mode) === 'dark'
                    ? theme.palette.grey[700]
                    : theme.palette.grey[300],
                borderRight: `4px solid ${theme.palette.primary.main}`
            },
            '&.Mui-selected > .MuiTreeItem-content .MuiTreeItem-label': {
                backgroundColor: 'transparent',
                paddingLeft: 0
            },
            '&.Mui-selected > .MuiTreeItem-content > .MuiCollapse-wrapperInner': {
                backgroundColor: ((_b = theme === null || theme === void 0 ? void 0 : theme.getThemeData()) === null || _b === void 0 ? void 0 : _b.mode) !== 'dark' && theme.palette.grey[50]
            },
            '& .MuiTreeItem-content .MuiTreeItem-iconContainer': {
                display: (props) => (props.sidebarExpanded ? 'flex' : 'none')
            }
        },
        content: {
            backgroundColor: (props) => {
                var _a;
                return ((_a = theme === null || theme === void 0 ? void 0 : theme.getThemeData()) === null || _a === void 0 ? void 0 : _a.mode) !== 'dark' &&
                    !props.sidebarExpanded &&
                    props.conditionalIconName &&
                    props.conditionalIconColor
                    ? lighten(props.conditionalIconColor, 0.92)
                    : '';
            }
        },
        labelRoot: {
            display: 'flex',
            alignItems: 'center',
            marginLeft: (props) => (props.sidebarExpanded ? 0 : theme.spacing(1.5)),
            width: '100%'
        },
        labelContainer: {
            display: (props) => (!props.sidebarExpanded ? 'none' : ''),
            width: (props) => props.treeViewMode === TreeViewModeEnums.Compact
                ? `calc(100% - ${theme.spacing(6.25)}px)`
                : `calc(100% - ${theme.spacing(7.75)}px)`
        },
        conditionalIconContainer: {
            display: 'inline-flex'
        },
        labelText: {
            fontSize: '0.75rem',
            fontWeight: 600,
            lineHeight: '1rem',
            letterSpacing: 0.1
        },
        captionText: {
            marginLeft: (props) => props.treeViewMode === TreeViewModeEnums.Compact ? theme.spacing(1) : '',
            fontSize: '0.65rem',
            fontWeight: 400,
            lineHeight: 1,
            letterSpacing: 0.4
        },
        labelOverflow: {
            whiteSpace: 'nowrap',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            marginTop: `-${theme.spacing(0.25)}px`
        },
        group: {
            width: '100%',
            '& .MuiTreeItem-group': {
                marginLeft: 0
            },
            '& .MuiTreeItem-content': {
                paddingLeft: (props) => props.sidebarExpanded ? (props.depth || 1) * theme.spacing(1) : 0,
                borderRight: (props) => props.showRightBorderColor
                    ? `4px solid ${theme.palette.primary.main}`
                    : '',
                borderBottom: (props) => props.treeViewMode === TreeViewModeEnums.Compact
                    ? `1px solid ${theme.palette.grey[200]}`
                    : ''
            },
            '& .MuiTreeItem-content .MuiTreeItem-label': {
                paddingLeft: 0,
                width: (props) => props.sidebarExpanded && `calc(100% - ${theme.spacing(2.5)}px)`
            },
            '& .MuiTreeItem-content .MuiTreeItem-iconContainer span': {
                display: (props) => (props.hideExpansion ? 'none' : '')
            },
            '& .MuiCollapse-wrapperInner': {
                backgroundColor: (props) => {
                    var _a;
                    return ((_a = theme === null || theme === void 0 ? void 0 : theme.getThemeData()) === null || _a === void 0 ? void 0 : _a.mode) !== 'dark' && props.isSelectedNode
                        ? theme.palette.grey[50]
                        : '';
                }
            }
        },
        iconContainer: {
            display: 'flex',
            // alignItems: 'center',
            justifyContent: 'center',
            // borderRadius: 50,
            marginTop: (props) => props.treeViewMode === TreeViewModeEnums.Compact
                ? theme.spacing(0.25)
                : theme.spacing(0.5),
            marginBottom: (props) => props.treeViewMode === TreeViewModeEnums.Compact
                ? theme.spacing(0.25)
                : theme.spacing(0.5),
            marginRight: theme.spacing(1),
            width: (props) => props.treeViewMode === TreeViewModeEnums.Compact
                ? theme.spacing(3)
                : theme.spacing(4),
            height: (props) => props.treeViewMode === TreeViewModeEnums.Compact
                ? theme.spacing(3)
                : theme.spacing(4)
            // border: (props) =>
            //   props.iconColor
            //     ? `1px solid ${darken(props.iconColor, 0.1)}`
            //     : `1px solid ${theme.palette.secondary.main}`,
            // backgroundColor: '#ffffff'
        }
    });
});
export const WorkflowTreeMenuItem = (props) => {
    var _a;
    const { parentId, nodeId, iconName, iconType, conditionalIconName, conditionalIconType, conditionalIconColor, label, iconColor, onNodeSelect, isSelectedNode, subLabel, sidebarExpanded, isLastNode, loading, node, onDropNode, treeViewMode, menuIndex, aggregateThresholdId } = props, other = __rest(props, ["parentId", "nodeId", "iconName", "iconType", "conditionalIconName", "conditionalIconType", "conditionalIconColor", "label", "iconColor", "onNodeSelect", "isSelectedNode", "subLabel", "sidebarExpanded", "isLastNode", "loading", "node", "onDropNode", "treeViewMode", "menuIndex", "aggregateThresholdId"]);
    const classes = useStyles(props);
    const theme = useTheme();
    const [{ isDragging }, dragRef] = useDrag({
        type: 'BaseTreeMenuItem',
        item: Object.assign(Object.assign({}, node), { sourceNodeMenuIndex: menuIndex }),
        collect: (monitor) => ({
            isDragging: monitor.isDragging()
        })
    });
    const handleOnDrop = useCallback((sourceNode, monitor) => {
        if (!monitor.didDrop()) {
            if (onDropNode) {
                const { sourceNodeMenuIndex } = sourceNode, other = __rest(sourceNode, ["sourceNodeMenuIndex"]);
                onDropNode(Object.assign({}, other), node, sourceNodeMenuIndex, menuIndex);
            }
        }
    }, [onDropNode, node, menuIndex]);
    const [{ canDrop, isOver }, dropRef] = useDrop(() => ({
        accept: ['BaseTreeMenuItem'],
        drop: (sourceNode, monitor) => {
            // condition to only handle first drop
            handleOnDrop(sourceNode, monitor);
        },
        canDrop: (sourceNode) => checkCanDrop(sourceNode),
        collect: (monitor) => ({
            isOver: monitor.isOver(),
            canDrop: !!monitor.canDrop()
        })
    }), [handleOnDrop]);
    const checkCanDrop = useCallback((sourceNode) => {
        var _a, _b, _c;
        if (sourceNode) {
            const onDropActions = (_b = (_a = node === null || node === void 0 ? void 0 : node.properties) === null || _a === void 0 ? void 0 : _a.nodeActions) === null || _b === void 0 ? void 0 : _b.filter((na) => (na === null || na === void 0 ? void 0 : na.triggerType) === NodeActionTriggerEnums.On_Node_Drop);
            if (!onDropActions) {
                return false;
            }
            const nodeDragEntities = onDropActions === null || onDropActions === void 0 ? void 0 : onDropActions.map((action) => action === null || action === void 0 ? void 0 : action.dragEntityName);
            return nodeDragEntities.includes((_c = sourceNode === null || sourceNode === void 0 ? void 0 : sourceNode.properties) === null || _c === void 0 ? void 0 : _c.catalogReturnObject);
        }
    }, [node]);
    const handleOnLabelClick = useCallback((e) => {
        e.preventDefault();
        onNodeSelect(e, nodeId);
    }, [onNodeSelect, nodeId]);
    return (React.createElement(TreeItem, Object.assign({ className: classes.group, key: nodeId, nodeId: nodeId, label: React.createElement("div", { ref: dropRef }, React.createElement(Tooltip, { title: sidebarExpanded ? '' : label }, React.createElement("div", { ref: (((_a = node === null || node === void 0 ? void 0 : node.properties) === null || _a === void 0 ? void 0 : _a.isDraggable) && dragRef) || null, style: { opacity: isDragging ? 0.5 : 1 } }, loading ? (React.createElement(CircularProgress, { size: 12 })) : (React.createElement("div", { id: 'udpRecord-BaseTreeMenuItem-' + (label === null || label === void 0 ? void 0 : label.replace(/\s+/g, '')), udprecordid: 'udpRecord-BaseTreeMenuItem-' + (label === null || label === void 0 ? void 0 : label.replace(/\s+/g, '')), className: classes.labelRoot, style: {
                fontWeight: isSelectedNode ? 'bold' : ''
            } }, iconName && (React.createElement("div", { className: classes.iconContainer }, React.createElement(UnityFluentIcon, { size: treeViewMode === TreeViewModeEnums.Compact
                ? 'small'
                : 'large', color: iconColor, type: iconType, icon: iconType === 'unity'
                ? getUnityIconFromName(iconName)
                : getIconFromName(iconName), style: {
                color: iconColor
                    ? darken(iconColor, 0.1)
                    : theme.palette.secondary.main
            } }))), React.createElement("div", { className: classes.labelContainer }, React.createElement(Typography, { variant: "subtitle2", className: clsx(classes.labelText, classes.labelOverflow) }, label, subLabel &&
            treeViewMode === TreeViewModeEnums.Compact && (React.createElement(Typography, { variant: "caption", className: clsx(classes.captionText, classes.labelOverflow) }, subLabel))), subLabel && treeViewMode === TreeViewModeEnums.Classic && (React.createElement("div", { className: classes.labelOverflow }, React.createElement(Typography, { variant: "caption", className: clsx(classes.captionText) }, subLabel)))), React.createElement(AggregateChip, { aggregateThresholdId: aggregateThresholdId }), conditionalIconName && sidebarExpanded && (React.createElement("div", { className: classes.conditionalIconContainer }, React.createElement(UnityFluentIcon, { size: treeViewMode === TreeViewModeEnums.Compact
                ? 'small'
                : 'default', color: conditionalIconColor, type: conditionalIconType, icon: conditionalIconType === 'unity'
                ? getUnityIconFromName(conditionalIconName)
                : getIconFromName(conditionalIconName), style: {
                color: conditionalIconColor
            } })))))))), onLabelClick: handleOnLabelClick, classes: { root: classes.root, content: classes.content } }, other)));
};
//# sourceMappingURL=WorkflowTreeMenuItem.js.map