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 { Card, CardContent, makeStyles, Slide } from '@material-ui/core';
import React, { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { DraggableSidebarTemplate } from '../UI/templates/DraggableSidebarTemplate';
import { useActions, useActionState } from '../hooks/useActions';
import PropTypes from 'prop-types';
import { SidebarHeader } from '../UI/dataDisplay/typography/SidebarHeader';
import { SplitScreenTypeEnums } from '../enums/unitySystemEnums';
import { EntitySideBarContent } from './sidebar/EntitySideBarContent';
import { useTranslation } from 'react-i18next';
import { useUser } from '../utilities/auth/useUser';
import { PageContainer } from '../page/PageContainer';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import { useAxiosGet } from '../utilities/useAxiosGet';
import { Skeleton } from '@material-ui/lab';
import { useShellStore } from '../stores/shellStore';
import { APP_RIBBON_SPACE, useBuildEnvironment } from '../shell/ui/useBuildEnvironment';
import { ConfigService } from '../configService';
import { useCatalogStore } from '../stores';
const NotesScreen = lazy(() => import('../notes/NotesScreen').then((m) => ({ default: m.NotesScreen })));
const RemindersScreen = lazy(() => import('../reminders/RemindersScreen').then((m) => ({
    default: m.RemindersScreen
})));
const SPEED_DIAL_ACTIONS = [
    SplitScreenTypeEnums.Notes,
    SplitScreenTypeEnums.Reminders
];
const useStyles = makeStyles((theme) => ({
    splitScreen: {
        width: '100%',
        height: ({ shellHidden, appRibbonSpace }) => `calc(100vh - ${shellHidden ? 0 : 56}px - ${appRibbonSpace}px)`,
        marginTop: (props) => (props.forPage ? '' : props.shellHidden ? 0 : 56)
    },
    card: {
        height: '100%',
        overflowY: 'auto',
        background: (props) => {
            var _a;
            return SPEED_DIAL_ACTIONS.includes(props.type)
                ? ((_a = theme === null || theme === void 0 ? void 0 : theme.getThemeData()) === null || _a === void 0 ? void 0 : _a.mode) === 'dark'
                    ? theme.palette.grey[700]
                    : '#f4f4f4'
                : '';
        }
    },
    cardContent: {
        padding: (props) => (SPEED_DIAL_ACTIONS.includes(props.type) ? 0 : ''),
        '&:last-child': {
            paddingBottom: (props) => SPEED_DIAL_ACTIONS.includes(props.type) ? 0 : ''
        },
        height: `calc(100% - 40px)` // 40px is the height of the sidebar header
    },
    title: {
        display: 'flex',
        flex: 1,
        alignItems: 'center',
        marginLeft: theme.spacing(1.5)
    },
    dataRoot: {
        marginTop: theme.spacing(2)
    },
    skeletonButton: {
        height: (props) => (props.forPage ? 'calc(84vh - 70px)' : '84vh')
    },
    sidebarRoot: {
        padding: (props) => (SPEED_DIAL_ACTIONS.includes(props.type) ? 0 : '')
    },
    actionButton: {
        marginRight: (props) => (SPEED_DIAL_ACTIONS.includes(props.type) ? 0 : '')
    }
}));
export const ActionSplitScreen = (props) => {
    var _a, _b;
    const { body, open, action, type = SplitScreenTypeEnums.Entity, params, executeAction, actionPanel, selectedNodeObj, menuNodeList, sidebarEntity, forPage = false, forPageContainer = false, selectedNode, selectedNodeParent, refreshTree } = props, otherProps = __rest(props, ["body", "open", "action", "type", "params", "executeAction", "actionPanel", "selectedNodeObj", "menuNodeList", "sidebarEntity", "forPage", "forPageContainer", "selectedNode", "selectedNodeParent", "refreshTree"]);
    const shellHidden = useShellStore((state) => state.shellHidden);
    const currentContainerId = useShellStore((state) => state.currentContainerId);
    const buildEnv = useBuildEnvironment();
    const classes = useStyles(Object.assign(Object.assign({ shellHidden }, props), { appRibbonSpace: buildEnv ? APP_RIBBON_SPACE : 0 }));
    const [width, setWidth] = useState(0);
    const { t } = useTranslation();
    const { openSplitScreen, openPageSplitScreen, openPageContainerSplitScreen } = useActions();
    const actionState = useActionState();
    const user = useUser();
    const formRef = useRef(null);
    const currentApiCatalogId = useCatalogStore(state => state.currentApiCatalogId);
    const [{ data: page, loading: loadingPage }] = useAxiosGet(ConfigService.tenantV1ApiUrl, `page/${(_a = action === null || action === void 0 ? void 0 : action.parameters) === null || _a === void 0 ? void 0 : _a.pageId}`, {}, !!!((_b = action === null || action === void 0 ? void 0 : action.parameters) === null || _b === void 0 ? void 0 : _b.pageId), false);
    const entityName = useMemo(() => {
        var _a, _b, _c;
        return actionPanel
            ? actionPanel.entityName
            : (_c = (_b = (_a = actionState === null || actionState === void 0 ? void 0 : actionState.inquiryParams[currentContainerId || 0]) === null || _a === void 0 ? void 0 : _a.selectedNode) === null || _b === void 0 ? void 0 : _b.properties) === null || _c === void 0 ? void 0 : _c.catalogReturnObject;
    }, [actionPanel, actionState, currentContainerId]);
    const [{ data: catalogObject }] = useAxiosGet(ConfigService.integrationV2ApiUrl, `apiCatalog/${currentApiCatalogId}/catalogObject/${entityName}`, {}, !!!currentApiCatalogId || !!!entityName, false);
    const entityAttributes = useMemo(() => {
        var _a;
        return (_a = catalogObject === null || catalogObject === void 0 ? void 0 : catalogObject.properties) !== null && _a !== void 0 ? _a : [];
    }, [catalogObject]);
    const openScreen = useMemo(() => forPage
        ? forPageContainer
            ? openPageContainerSplitScreen
            : openPageSplitScreen
        : openSplitScreen, [
        forPage,
        openPageSplitScreen,
        openSplitScreen,
        forPageContainer,
        openPageContainerSplitScreen
    ]);
    const closeSplitScreen = useCallback(() => {
        if (params === null || params === void 0 ? void 0 : params.closeSplitScreenAction) {
            params.closeSplitScreenAction();
        }
        openScreen({ open: false, action: null, type: null });
        setWidth(0);
    }, [openScreen, params]);
    const onSubmitAction = useCallback(() => {
        switch (type) {
            case SplitScreenTypeEnums.Notes:
                formRef === null || formRef === void 0 ? void 0 : formRef.current.form.submit();
                break;
            case SplitScreenTypeEnums.Page:
                params === null || params === void 0 ? void 0 : params.onSubmit();
                break;
            case SplitScreenTypeEnums.Reminders:
                formRef === null || formRef === void 0 ? void 0 : formRef.current.form.submit();
                break;
            default:
                break;
        }
    }, [type, params]);
    const cardContent = useMemo(() => {
        var _a, _b;
        let content = null;
        switch (type) {
            case SplitScreenTypeEnums.Entity:
                content = (React.createElement(EntitySideBarContent, { action: action, executeAction: executeAction, entityAttributes: entityAttributes, selectedNodeObj: selectedNodeObj, apiCatalogId: currentApiCatalogId, entityName: entityName, sidebarEntity: sidebarEntity, menuNodeList: menuNodeList, closeSplitScreen: closeSplitScreen }));
                break;
            case SplitScreenTypeEnums.Notes:
                content = (React.createElement(Suspense, { fallback: React.createElement(Skeleton, { variant: "rect", className: classes.skeletonButton }) }, React.createElement(NotesScreen, { formRef: formRef, shortcutContentFinderEnabled: true, id: params === null || params === void 0 ? void 0 : params.id, reloadNotes: params === null || params === void 0 ? void 0 : params.reloadNotes })));
                break;
            case SplitScreenTypeEnums.Page:
                if (page) {
                    content = (React.createElement(DndProvider, { backend: HTML5Backend }, React.createElement(PageContainer, { user: user, key: action === null || action === void 0 ? void 0 : action.actionId, pageData: page, widgetParams: {
                            pageId: page === null || page === void 0 ? void 0 : page.pageId,
                            contentId: (_a = selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.properties) === null || _a === void 0 ? void 0 : _a.searchValue,
                            requiredFieldsMap: ((_b = action === null || action === void 0 ? void 0 : action.parameters) === null || _b === void 0 ? void 0 : _b.requiredFieldMapping) || {},
                            nodeObj: selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.nodeObj,
                            parentNodeObj: selectedNodeParent === null || selectedNodeParent === void 0 ? void 0 : selectedNodeParent.nodeObj,
                            inquiryParams: selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.inquiryParams,
                            refreshTree: refreshTree
                        }, disableMargins: true })));
                }
                else if (loadingPage) {
                    content = (React.createElement(Skeleton, { variant: "rect", className: classes.skeletonButton }));
                }
                else {
                    content = (params === null || params === void 0 ? void 0 : params.content) || null;
                }
                break;
            case SplitScreenTypeEnums.Reminders:
                content = (React.createElement(Suspense, { fallback: React.createElement(Skeleton, { variant: "rect", className: classes.skeletonButton }) }, React.createElement(RemindersScreen, { formRef: formRef, shortcutContentFinderEnabled: true, id: params === null || params === void 0 ? void 0 : params.id, reloadReminders: params === null || params === void 0 ? void 0 : params.reloadReminders })));
                break;
            default:
                break;
        }
        return content;
    }, [
        type,
        action,
        executeAction,
        entityAttributes,
        selectedNodeObj,
        closeSplitScreen,
        menuNodeList,
        entityName,
        sidebarEntity,
        refreshTree,
        page,
        selectedNode,
        selectedNodeParent,
        user,
        loadingPage,
        classes,
        params,
        currentApiCatalogId
    ]);
    const headerTitle = useMemo(() => {
        let title = '';
        switch (type) {
            case SplitScreenTypeEnums.Entity:
                title = t(`${entityName} Details`);
                break;
            case SplitScreenTypeEnums.Notes:
                title = t(`Add Note`);
                break;
            case SplitScreenTypeEnums.Reminders:
                title = t(`Add Reminder`);
                break;
            default:
                title = (params === null || params === void 0 ? void 0 : params.headerTitle) || '';
                break;
        }
        return title;
    }, [entityName, type, t, params]);
    const buttonLabelVal = useMemo(() => {
        let label = '';
        switch (type) {
            case SplitScreenTypeEnums.Notes:
                label = t(`Save Note`);
                break;
            case SplitScreenTypeEnums.Page:
                label = t(params === null || params === void 0 ? void 0 : params.buttonLabel);
                break;
            case SplitScreenTypeEnums.Reminders:
                label = t(`Save Reminder`);
                break;
            default:
                break;
        }
        return label;
    }, [type, t, params]);
    useEffect(() => {
        var _a;
        if (open) {
            setWidth((_a = params === null || params === void 0 ? void 0 : params.initialWidth) !== null && _a !== void 0 ? _a : 420);
        }
    }, [open, params]);
    return (React.createElement(DraggableSidebarTemplate, { removePadding: false, width: width, setWidth: setWidth, handleToggleClick: () => { }, hide: !open, expanded: false, maxWidth: params === null || params === void 0 ? void 0 : params.maxWidth, enable: {
            top: false,
            right: false,
            bottom: false,
            left: true,
            topRight: false,
            bottomRight: false,
            bottomLeft: false,
            topLeft: false
        }, body: body, sidebar: React.createElement(Slide, { in: open, direction: "left" }, React.createElement("div", { className: classes.splitScreen }, React.createElement(Card, { square: true, elevation: 4, className: classes.card }, !(params === null || params === void 0 ? void 0 : params.hideHeader) && (React.createElement(SidebarHeader, Object.assign({ onClose: closeSplitScreen, title: headerTitle, buttonLabel: buttonLabelVal, buttonProgress: params === null || params === void 0 ? void 0 : params.buttonProgress, buttonVariant: params === null || params === void 0 ? void 0 : params.buttonVariant, buttonIcon: params === null || params === void 0 ? void 0 : params.buttonIcon, onSubmit: onSubmitAction, secondaryButtonLabel: params === null || params === void 0 ? void 0 : params.secondaryButtonLabel, secondaryButtonProgress: params === null || params === void 0 ? void 0 : params.secondaryButtonProgress, secondaryButtonVariant: params === null || params === void 0 ? void 0 : params.secondaryButtonVariant, secondaryButtonIcon: params === null || params === void 0 ? void 0 : params.secondaryButtonIcon, secondaryOnSubmit: params === null || params === void 0 ? void 0 : params.secondaryOnSubmit, additionalInputs: (params === null || params === void 0 ? void 0 : params.additionalInputs) || null, classes: {
                root: classes.sidebarRoot,
                actionButton: classes.actionButton
            } }, otherProps))), React.createElement(CardContent, { className: classes.cardContent }, cardContent)))), splitScreenStyle: {
            zIndex: 1000
        } }));
};
ActionSplitScreen.propTypes = {
    body: PropTypes.object,
    open: PropTypes.bool,
    action: PropTypes.object,
    executeAction: PropTypes.func,
    entityName: PropTypes.string,
    entityAttributes: PropTypes.array,
    selectedNodeObj: PropTypes.object,
    menuNodeList: PropTypes.array,
    showError: PropTypes.func
};
//# sourceMappingURL=ActionSplitScreen.js.map