"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.XFormAndLayoutDesignPanel = exports.CONFIG_FORM_KEY = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const core_1 = require("@material-ui/core");
const RegisterUIControl_1 = require("./RegisterUIControl");
const react_beautiful_dnd_1 = require("react-beautiful-dnd");
const XFormDesignerLayoutPanel_1 = require("./XFormDesignerLayoutPanel");
const ToolBox_1 = require("../Builder/ToolBox");
const AutoBind_1 = require("@appglue/common/dist/Common/AutoBind");
const CommonStyles_1 = require("../../CommonUI/CommonStyles");
const FormDesignConstants_1 = require("./FormDesignConstants");
const ExpandIcon_1 = require("../../CommonUI/Icon/ExpandIcon");
const CopyWhiteIcon_1 = require("../../CommonUI/Icon/CopyWhiteIcon");
const CutWhiteIcon_1 = require("../../CommonUI/Icon/CutWhiteIcon");
const DeleteWhiteIcon_1 = require("../../CommonUI/Icon/DeleteWhiteIcon");
const ValidationErrorRendering_1 = require("../Builder/ValidationErrorRendering");
const ObserveState_1 = require("../../CommonUI/StateManagement/ObserveState");
const DockSidebar_1 = require("../../CommonUI/BuilderUI/DockSidebar");
const DropdownIcon_1 = require("../../CommonUI/Icon/DropdownIcon");
exports.CONFIG_FORM_KEY = "configForm";
const Designer = styled_components_1.default.div `
    display: flex;
    width: 100%;
    overflow: hidden;
    position: relative;
`;
class XFormAndLayoutDesignPanel extends react_1.default.Component {
    configFormNode = react_1.default.createRef();
    componentDidMount() {
        document.addEventListener("mousedown", this.handleClickOutside);
    }
    componentWillUnmount() {
        document.removeEventListener("mousedown", this.handleClickOutside);
    }
    handleClickOutside = (event) => {
        if (this.configFormNode.current &&
            event.target instanceof Node &&
            !this.configFormNode.current.contains(event.target) &&
            this.props.editContext?.expandedConfigPanel &&
            document.getElementsByClassName("MuiDialog-root").length === 0 &&
            document.getElementsByClassName("MuiPopover-paper").length === 0) {
            this.props.editContext?.unSelectControl();
        }
    };
    onToggleExpandedConfigPanel = () => {
        if (!this.props.editContext?.isMovingConfigPanel) {
            if (this.props.editContext)
                this.props.editContext.expandedConfigPanel = !this.props.editContext?.expandedConfigPanel;
            this.forceUpdate();
        }
    };
    onDragMovingConfigPanel = () => {
        if (this.props.editContext)
            this.props.editContext.isMovingConfigPanel = true;
    };
    onEndMovingConfigPanel = () => {
        setTimeout(() => {
            if (this.props.editContext)
                this.props.editContext.isMovingConfigPanel = false;
            this.forceUpdate();
        }, 500);
    };
    deleteControl = () => {
        if (this.props.editContext.deleteControl) {
            this.props.editContext.form.remove(this.props.editContext.deleteControl);
            this.props.editContext.deleteControl = null;
            this.forceUpdate();
        }
    };
    cancelDeleteControl = () => {
        this.props.editContext.deleteControl = null;
        this.forceUpdate();
    };
    render() {
        return ((0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: this.props.editContext, control: () => {
                return ((0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.DragDropContext, { onDragStart: this.onDragStart, onDragEnd: this.onDragEnd, children: (0, jsx_runtime_1.jsxs)(Designer, { children: [(0, jsx_runtime_1.jsx)(ToolBox_1.ToolBox, { onSelectFormDefaultConfig: () => {
                                    if (this.props.editContext)
                                        this.props.editContext.selectControl(exports.CONFIG_FORM_KEY);
                                }, mode: this.props.editContext.mode }), (0, jsx_runtime_1.jsx)(DockSidebar_1.DockedSidebar, { sidebar: () => this.renderEditUI(), content: () => (0, jsx_runtime_1.jsx)(XFormDesignerLayoutPanel_1.XFormDesignerLayoutPanel, { editContext: this.props.editContext }), sidebarWidth: 350, open: this.props.editContext.isShowEditLayer, onClose: this.props.editContext.hideEditLayer, toogleIcon: () => ((0, jsx_runtime_1.jsx)(CommonStyles_1.VerticalButton, { open: this.props.editContext.isShowEditLayer, onClick: (e) => {
                                        e.stopPropagation();
                                        e.preventDefault();
                                        this.props.editContext.toggleEditLayer();
                                    }, endIcon: (0, jsx_runtime_1.jsx)(DropdownIcon_1.DropdownIcon, {}), color: "primary", variant: "contained", children: this.props.editContext.getSelectedControl()?.toString() || "Form" })) }), (this.props.editContext.mode === FormDesignConstants_1.FormMode.FormDesign ||
                                this.props.editContext.mode === FormDesignConstants_1.FormMode.LayoutDesign) && ((0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: this.props.editContext?.controlContexts, control: () => ((0, jsx_runtime_1.jsx)(ValidationErrorRendering_1.ValidationErrorRendering, { validations: this.props.editContext?.controlContexts.getAllDesignIssues() ?? [] })), properties: ["validationIssues"] })), (0, jsx_runtime_1.jsxs)(core_1.Dialog, { open: !!this.props.editContext.deleteControl, children: [(0, jsx_runtime_1.jsx)(core_1.DialogTitle, { children: "Warning" }), (0, jsx_runtime_1.jsx)(core_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(core_1.DialogContentText, { children: "Are you sure to delete this?" }) }), (0, jsx_runtime_1.jsxs)(core_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(core_1.Button, { variant: "contained", color: "primary", onClick: this.deleteControl, children: "OK" }), (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "contained", onClick: this.cancelDeleteControl, children: "Cancel" })] })] }), this.renderContextMenuUI()] }, "formdesigner") }));
            } }));
    }
    renderEditUI() {
        let editUIComponent = this.props.editContext.getEditUI(exports.CONFIG_FORM_KEY);
        let selectedControl = this.props.editContext.getSelectedControl(exports.CONFIG_FORM_KEY);
        if (!editUIComponent)
            return null;
        return ((0, jsx_runtime_1.jsx)(CommonStyles_1.EditLayerConfigArea, { ref: this.configFormNode, children: (0, jsx_runtime_1.jsxs)(CommonStyles_1.EditLayerStyledAccordion, { expanded: this.props.editContext?.expandedConfigPanel, onChange: this.onToggleExpandedConfigPanel, defaultExpanded: true, children: [(0, jsx_runtime_1.jsx)(CommonStyles_1.EditLayerStyledAccordionSummary, { expandIcon: (0, jsx_runtime_1.jsx)(ExpandIcon_1.ExpandIcon, {}), children: (0, jsx_runtime_1.jsxs)(CommonStyles_1.EditLayerStyledTypography, { variant: "subtitle1", classes: { root: "config-form-header" }, children: ["Edit: ", selectedControl?.toString() || "Form Config"] }) }), (0, jsx_runtime_1.jsx)(CommonStyles_1.EditLayerStyledAccordionDetails, { classes: { root: "config-form-content" }, children: (0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: selectedControl, control: () => {
                                return editUIComponent?.create();
                            } }) })] }) }));
    }
    renderContextMenuUI() {
        let contextControl = this.props.editContext.contextControl;
        if (contextControl) {
            return ((0, jsx_runtime_1.jsxs)(CommonStyles_1.ContextMenuForControl, { open: !!contextControl, onClose: this.props.editContext.unselectContextControl, anchorReference: "anchorPosition", anchorPosition: contextControl.mouseY !== null && contextControl.mouseX !== null
                    ? { top: contextControl.mouseY, left: contextControl.mouseX }
                    : undefined, children: [(0, jsx_runtime_1.jsxs)(core_1.MenuItem, { onClick: () => this.props.editContext.onCopy(contextControl.selectedId), "data-testid": "btn-context-copy", children: [(0, jsx_runtime_1.jsx)(CopyWhiteIcon_1.CopyWhiteIcon, {}), " Copy"] }), (0, jsx_runtime_1.jsxs)(core_1.MenuItem, { onClick: () => this.props.editContext.onCut(contextControl.selectedId), "data-testid": "btn-context-cut", children: [(0, jsx_runtime_1.jsx)(CutWhiteIcon_1.CutWhiteIcon, {}), " Cut"] }), (0, jsx_runtime_1.jsxs)(core_1.MenuItem, { onClick: () => this.props.editContext.onDelete(contextControl.selectedId), "data-testid": "btn-context-paste", children: [(0, jsx_runtime_1.jsx)(DeleteWhiteIcon_1.DeleteWhiteIcon, {}), " Delete"] })] }));
        }
    }
    onDragStart(result) {
        let control;
        if (Object.keys(RegisterUIControl_1.UIControlRegistration).indexOf(result.draggableId) !== -1) {
            // @ts-ignore
            let registeredControl = RegisterUIControl_1.UIControlRegistration[result.draggableId];
            let val = new registeredControl.prototype.constructor();
            // @ts-ignore
            control = val;
        }
        else {
            control = this.props.editContext.form.find(result.draggableId);
        }
        if (control) {
            if (this.props.editContext)
                this.props.editContext.selectControl(control.id);
            this.updateUI();
        }
        else {
            if (this.props.editContext)
                this.props.editContext.unSelectControl();
            this.updateUI();
        }
    }
    onDragEnd(result) {
        // if not destination... then we should not do anything
        if (!result.destination)
            return;
        let control;
        if (Object.keys(RegisterUIControl_1.UIControlRegistration).indexOf(result.draggableId) !== -1) {
            // @ts-ignore
            let registeredControl = RegisterUIControl_1.UIControlRegistration[result.draggableId];
            let val = new registeredControl.prototype.constructor();
            // @ts-ignore
            control = val;
        }
        else {
            control = this.props.editContext.form.find(result.draggableId);
        }
        if (control)
            control.setFormContext(this.props.editContext);
        if (result.destination.droppableId === FormDesignConstants_1.FormDesignConstants.LAYOUT_FORM_KEY_NAME) {
            // we are moving things around or adjusting base form
            // containers
            if (control) {
                if (result.destination.droppableId === result.source.droppableId) {
                    // changing order
                    this.props.editContext.form.setOrder(control.id, result.destination.index);
                }
                else {
                    // adding new
                    this.props.editContext.form.add(control);
                    this.props.editContext.form.setOrder(control.id, result.destination.index);
                }
            }
        }
        else {
            let fromContainer = this.props.editContext.form.find(result.source.droppableId);
            let toContainer = this.props.editContext.form.find(result.destination.droppableId);
            if (!toContainer || !control) {
                return;
            }
            if (fromContainer && fromContainer.id === toContainer.id) {
                // its same container move
                toContainer.setOrder(control.id, result.destination.index);
            }
            else {
                if (fromContainer)
                    fromContainer.remove(control);
                toContainer.add(control, result.destination.index);
            }
            if (control && this.props.editContext) {
                this.props.editContext.selectControl(control.id);
            }
        }
        // this.dragPlaceholder = null;
        this.updateUI();
    }
    updateUI() {
        this.props.editContext?.refreshDesigner();
    }
}
tslib_1.__decorate([
    AutoBind_1.AutoBind
], XFormAndLayoutDesignPanel.prototype, "renderEditUI", null);
tslib_1.__decorate([
    AutoBind_1.AutoBind
], XFormAndLayoutDesignPanel.prototype, "onDragStart", null);
tslib_1.__decorate([
    AutoBind_1.AutoBind
], XFormAndLayoutDesignPanel.prototype, "onDragEnd", null);
tslib_1.__decorate([
    AutoBind_1.AutoBind
], XFormAndLayoutDesignPanel.prototype, "updateUI", null);
exports.XFormAndLayoutDesignPanel = XFormAndLayoutDesignPanel;
//# sourceMappingURL=XFormAndLayoutDesignPanel.js.map