import React, { useState, useCallback, memo } from 'react';
import { makeStyles } from '@material-ui/core';
import { Skeleton } from '@material-ui/lab';
import { SideSheet } from '../../../surfaces/SideSheet';
import { FluentDialog } from '../../../feedback/FluentDialog';
import { IconButtonWithTooltip } from '../../../inputs/buttons/IconButtonWithToolTip';
import { ClickOpenEnums } from '../../../../enums/pageEnums.ts';
const useStyles = makeStyles((theme) => ({
    icon: {
        margin: theme.spacing(0.5)
    },
    iconButtonStyle: {
        width: `${theme.spacing(3)}px !important`,
        height: `${theme.spacing(3)}px !important`,
        background: '#fff',
        borderRadius: 25,
        padding: 6
    },
    circularSkeleton: {
        borderRadius: '50%'
    }
}));
const ActionItem = memo((props) => {
    const { icon, title, onClick, disabled, businessObjectKey = '' } = props;
    const classes = useStyles();
    return (React.createElement(IconButtonWithTooltip, { title: title, className: classes.icon, size: "small", onClick: onClick, disabled: disabled, icon: icon, fluentIconClassName: classes.iconButtonStyle, id: 'udpRecord-ActionsRenderer-' + title, udprecordid: 'udpRecord-ActionsRenderer-' + title }));
});
export const ActionsRenderer = memo((props) => {
    const { data: value, actionList, onClick } = props;
    const classes = useStyles();
    const [sheetOpen, setSheetOpen] = useState(false);
    const [sheetItem, setSheetItem] = useState(null);
    const [dialogItem, setDialogItem] = useState(null);
    const [dialogOpen, setDialogOpen] = useState(false);
    const [isLoading, setIsLoading] = useState(false);
    const [sideSheetWidth, setSideSheetWidth] = useState(600);
    const [sideSheetButtonLabel, setSideSheetButtonLabel] = useState('');
    const [sideSheetOnSubmit, setSideSheetOnSubmit] = useState(() => () => console.warn('onSubmit not set'));
    const openSheet = useCallback((sheetView) => {
        setSheetItem(sheetView);
        setSheetOpen(true);
    }, []);
    const openDialog = useCallback((dialogView) => {
        setDialogItem(dialogView);
        setDialogOpen(true);
    }, []);
    const closeSheet = useCallback(() => {
        setSheetOpen(false);
    }, []);
    const closeDialog = useCallback(() => {
        setDialogOpen(false);
    }, []);
    const getSheetView = (actionItem) => {
        var _a, _b, _c, _d, _e, _f, _g;
        if (actionItem.opens === ClickOpenEnums.SideSheet) {
            const valuePropName = (_b = (_a = actionItem === null || actionItem === void 0 ? void 0 : actionItem.view) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.valuePropName;
            if (valuePropName) {
                actionItem.view.properties[valuePropName] = value;
            }
            const closeSideSheetPropName = (_d = (_c = actionItem === null || actionItem === void 0 ? void 0 : actionItem.view) === null || _c === void 0 ? void 0 : _c.properties) === null || _d === void 0 ? void 0 : _d.closeSideSheetPropName;
            if (closeSideSheetPropName) {
                actionItem.view.properties[closeSideSheetPropName] = closeSheet;
            }
        }
        const properties = ((_e = actionItem === null || actionItem === void 0 ? void 0 : actionItem.view) === null || _e === void 0 ? void 0 : _e.properties) || {};
        return {
            id: actionItem.id,
            title: actionItem.title || '',
            width: (_f = actionItem === null || actionItem === void 0 ? void 0 : actionItem.view) === null || _f === void 0 ? void 0 : _f.width,
            children: (_g = actionItem === null || actionItem === void 0 ? void 0 : actionItem.view) === null || _g === void 0 ? void 0 : _g.component(Object.assign(Object.assign({}, properties), { setSideSheetWidth,
                setSideSheetButtonLabel,
                setSideSheetOnSubmit }))
        };
    };
    const getDialogView = (actionItem) => {
        var _a, _b, _c, _d, _e, _f;
        if (actionItem.opens === ClickOpenEnums.Dialog) {
            const handleActionTwo = async () => {
                var _a, _b, _c, _d;
                if ((_b = (_a = actionItem === null || actionItem === void 0 ? void 0 : actionItem.view) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.actionTwo) {
                    setIsLoading(true);
                    await ((_d = (_c = actionItem === null || actionItem === void 0 ? void 0 : actionItem.view) === null || _c === void 0 ? void 0 : _c.properties) === null || _d === void 0 ? void 0 : _d.actionTwo(value));
                    setIsLoading(false);
                }
                closeDialog();
            };
            return {
                id: actionItem.id,
                title: (actionItem === null || actionItem === void 0 ? void 0 : actionItem.title) || '',
                closeDialog: closeDialog,
                message: (_b = (_a = actionItem === null || actionItem === void 0 ? void 0 : actionItem.view) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.message,
                labelOne: (_d = (_c = actionItem === null || actionItem === void 0 ? void 0 : actionItem.view) === null || _c === void 0 ? void 0 : _c.properties) === null || _d === void 0 ? void 0 : _d.labelOne,
                actionTwo: handleActionTwo,
                labelTwo: (_f = (_e = actionItem === null || actionItem === void 0 ? void 0 : actionItem.view) === null || _e === void 0 ? void 0 : _e.properties) === null || _f === void 0 ? void 0 : _f.labelTwo
            };
        }
    };
    const displayActions = actionList.map((item, index) => {
        let onClick = () => item.onClick(value);
        let title = item.title;
        let disabled = item.disabled;
        if (item.opens === ClickOpenEnums.SideSheet) {
            const sheetView = getSheetView(item);
            onClick = () => openSheet(sheetView);
        }
        if (item.opens === ClickOpenEnums.Dialog) {
            const dialogView = getDialogView(item);
            onClick = () => openDialog(dialogView);
        }
        if (item.getTitle) {
            title = item.getTitle(value);
        }
        if (item.checkDisabled) {
            disabled = item.checkDisabled(value);
        }
        return (React.createElement(React.Fragment, null, item.loading && (React.createElement("div", { style: { display: 'inline-flex', marginRight: 10 } }, React.createElement(Skeleton, { className: classes.circularSkeleton, width: 24, height: 40 }))), !item.loading && (React.createElement(ActionItem, { key: `${item.id}-${index}`, title: title, icon: item.icon, onClick: onClick, disabled: disabled, businessObjectKey: value === null || value === void 0 ? void 0 : value.businessObjectKey }))));
    });
    /* Final Render */
    return (React.createElement("div", null, displayActions, React.createElement(SideSheet, { open: sheetOpen, onClose: closeSheet, title: sheetItem === null || sheetItem === void 0 ? void 0 : sheetItem.title, width: (sheetItem === null || sheetItem === void 0 ? void 0 : sheetItem.width) || 600, buttonLabel: sideSheetButtonLabel, onSubmit: sideSheetOnSubmit }, React.createElement("div", null, sheetItem === null || sheetItem === void 0 ? void 0 : sheetItem.children)), React.createElement(FluentDialog, { open: dialogOpen, handleClose: closeDialog, title: dialogItem === null || dialogItem === void 0 ? void 0 : dialogItem.title, message: dialogItem === null || dialogItem === void 0 ? void 0 : dialogItem.message, actionOne: dialogItem === null || dialogItem === void 0 ? void 0 : dialogItem.closeDialog, labelOne: dialogItem === null || dialogItem === void 0 ? void 0 : dialogItem.labelOne, actionTwo: dialogItem === null || dialogItem === void 0 ? void 0 : dialogItem.actionTwo, labelTwo: dialogItem === null || dialogItem === void 0 ? void 0 : dialogItem.labelTwo, progress: dialogItem === null || dialogItem === void 0 ? void 0 : dialogItem.isLoading })));
});
ActionItem.displayName = 'ActionItem';
ActionsRenderer.displayName = 'ActionsRenderer';
//# sourceMappingURL=ActionsRenderer.js.map