"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ToolBox = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const react_beautiful_dnd_1 = require("react-beautiful-dnd");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const core_1 = require("@material-ui/core");
const RegisterFlowEditor_1 = require("../../Utilities/RegisterFlowEditor");
const FlowConstants_1 = require("@appglue/common/dist/Flow/Utilities/FlowConstants");
const FlowConfiguration_1 = require("@appglue/common/dist/Flow/FlowConfiguration");
const EditStackIcon_1 = require("../../../CommonUI/Icon/EditStackIcon");
const ToolsPicker_1 = require("./ToolsPicker");
const ObserveState_1 = require("../../../CommonUI/StateManagement/ObserveState");
const DeleteGrayIcon_1 = require("../../../CommonUI/Icon/DeleteGrayIcon");
const CloseGrayIcon_1 = require("../../../CommonUI/Icon/CloseGrayIcon");
const StateManager_1 = require("@appglue/common/dist/Common/StateManager");
const OpenIcon_1 = require("../../../CommonUI/Icon/OpenIcon");
const material_1 = require("@mui/material");
const UIStyleConstants_1 = require("@appglue/common/dist/Common/UIStyleConstants");
const UIButton_1 = require("../../../CommonUI/BuildlingBlocks/UIButton");
class ToolBox extends react_1.default.Component {
    constructor(props) {
        super(props);
        this.state = {
            openPicker: false,
            removedSteps: [],
            editMode: false,
        };
    }
    onOpenPicker = () => {
        this.setState({
            openPicker: true,
        });
    };
    onClosePicker = () => {
        this.setState({
            openPicker: false,
        });
    };
    onDeleteSteps = () => {
        if (this.state.editMode && this.props.flow.visibleSteps.length > 0 && this.state.removedSteps.length > 0) {
            this.props.editContext.notification = {
                type: "confirm",
                message: "Remove chosen tools? Removed tools you'll be able to found on all tools.",
                actions: [
                    {
                        items: [
                            {
                                renderUI: () => {
                                    return ((0, jsx_runtime_1.jsx)(core_1.Button, { variant: "contained", onClick: () => {
                                            this.props.editContext.notification = undefined;
                                        }, "data-testid": "btn-delete-confirm-no", children: "No" }));
                                },
                            },
                            {
                                renderUI: () => {
                                    return ((0, jsx_runtime_1.jsx)(core_1.Button, { variant: "contained", color: "primary", onClick: () => {
                                            this.props.flow.visibleSteps = this.props.flow.visibleSteps.filter((stepName) => !this.state.removedSteps.includes(stepName));
                                            this.props.flow.favoriteSteps = this.props.flow.favoriteSteps.filter((stepName) => !this.state.removedSteps.includes(stepName));
                                            this.setState({
                                                removedSteps: [],
                                                editMode: this.props.flow.visibleSteps.length > 0,
                                            });
                                            StateManager_1.StateManager.propertyChanged(this.props.flow, FlowConfiguration_1.FlowConfiguration.VISIBLE_STEPS);
                                            this.props.editContext.notification = undefined;
                                        }, "data-testid": "btn-delete-confirm-yes", children: "Yes" }));
                                },
                            },
                        ],
                    },
                ],
            };
        }
    };
    render() {
        const itemsByCategories = RegisterFlowEditor_1.FlowStepEditorRegistration.getItemsByCategories();
        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.Droppable, { isDropDisabled: true, droppableId: FlowConstants_1.FlowConstants.ToolboxId, children: (provided, snapshot) => {
                        return ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", flexDirection: "column", border: "1px solid #e6e9ed", borderRadius: 0, height: "100%", width: "300px", ...provided.droppableProps, ref: provided.innerRef, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { borderTop: "1px solid #e6e9ed", display: "flex", overflow: "auto", paddingLeft: "10px", paddingRight: "10px", paddingTop: "10px", flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", justifyContent: "start", children: (0, jsx_runtime_1.jsx)(UIButton_1.UIButton, { onClick: () => this.props.editContext.setSelection(this.props.flow), children: "Edit Flow Settings" }) }), (0, jsx_runtime_1.jsxs)(ToolboxTitleDiv, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { paddingTop: "10px", children: [(0, jsx_runtime_1.jsx)(core_1.Typography, { variant: "subtitle1", children: "Toolbox" }), (0, jsx_runtime_1.jsxs)(core_1.Typography, { variant: "caption", children: ["(", Object.values(itemsByCategories).reduce((s, items) => {
                                                                    s += items.length;
                                                                    return s;
                                                                }, 0), " ", "steps)"] })] }), (0, jsx_runtime_1.jsxs)("div", { children: [this.props.flow.visibleSteps.length > 0 && !this.state.editMode && ((0, jsx_runtime_1.jsx)(StyledIconButton, { style: { marginRight: 5 }, onClick: () => this.setState({ editMode: true }), "data-testid": "btn-edit-tools", children: (0, jsx_runtime_1.jsx)(EditStackIcon_1.EditStackIcon, {}) })), this.state.editMode && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(StyledIconButton, { style: { marginRight: 5 }, onClick: this.onDeleteSteps, disabled: this.state.removedSteps.length === 0, "data-testid": "btn-delete-tools", children: (0, jsx_runtime_1.jsx)(DeleteGrayIcon_1.DeleteGrayIcon, {}) }), (0, jsx_runtime_1.jsx)(StyledIconButton, { style: { marginRight: 5 }, onClick: () => this.setState({ editMode: false }), "data-testid": "btn-close-edit-mode", children: (0, jsx_runtime_1.jsx)(CloseGrayIcon_1.CloseGrayIcon, {}) })] })), (0, jsx_runtime_1.jsx)(core_1.Button, { onClick: this.onOpenPicker, "data-testid": "btn-all-tools", children: "Add tools" })] })] }), (0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: this.props.flow, properties: [FlowConfiguration_1.FlowConfiguration.VISIBLE_STEPS, FlowConfiguration_1.FlowConfiguration.FAVORITE_STEPS], control: () => {
                                                const filteredItems = Object.entries(itemsByCategories).reduce((obj, [category, items]) => {
                                                    obj[category] = items.filter((item) => this.props.flow.visibleSteps.includes(item.name));
                                                    return obj;
                                                }, {});
                                                return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Object.values(filteredItems).find((items) => items.length > 0) ? ((0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", flexDirection: "column", marginRight: "-10px", paddingRight: "10px", children: Object.entries(filteredItems).map(([category, controls]) => {
                                                            if (controls.length === 0)
                                                                return null;
                                                            const doms = controls
                                                                .map((control, index) => {
                                                                return ((0, jsx_runtime_1.jsx)(RenderToolboxItem, { control: control, snapshot: snapshot, index: index, editContext: this.props.editContext }, "toolbox" + control.name));
                                                            })
                                                                .filter((d) => !!d);
                                                            if (doms.length === 0)
                                                                return null;
                                                            // todo: make this a method on control registration
                                                            return ((0, jsx_runtime_1.jsxs)(core_1.Accordion, { style: {
                                                                    border: "none",
                                                                    boxShadow: "none",
                                                                    margin: "0px !important",
                                                                }, defaultExpanded: true, children: [(0, jsx_runtime_1.jsx)(core_1.AccordionSummary, { style: {
                                                                            padding: "0px",
                                                                            minHeight: "0 !important",
                                                                            fontStyle: "normal",
                                                                            fontWeight: 500,
                                                                            fontSize: "12px",
                                                                            lineHeight: "15px",
                                                                            color: UIStyleConstants_1.UIStyleConstants.GRAY_DARK_COLOR,
                                                                        }, expandIcon: (0, jsx_runtime_1.jsx)(OpenIcon_1.OpenIcon, {}), children: category }), (0, jsx_runtime_1.jsx)(core_1.AccordionDetails, { style: {
                                                                            display: "flex",
                                                                            flexDirection: "column",
                                                                            padding: "0px",
                                                                        }, children: doms })] }, category));
                                                        }) })) : ((0, jsx_runtime_1.jsxs)(StyledWrapper, { children: [(0, jsx_runtime_1.jsx)(core_1.Typography, { children: "You have no tools in the toolbox." }), (0, jsx_runtime_1.jsx)(core_1.Button, { fullWidth: true, color: "primary", variant: "contained", onClick: this.onOpenPicker, "data-testid": "btn-add-tools", children: "Add tools" })] })) }));
                                            } })] }), provided.placeholder] }));
                    } }), (0, jsx_runtime_1.jsx)(ToolsPicker_1.ToolsPicker, { open: this.state.openPicker, editContext: this.props.editContext, flow: this.props.flow, onClose: this.onClosePicker })] }));
    }
}
exports.ToolBox = ToolBox;
function RenderToolboxItem(props) {
    const data = props.control;
    const name = props.control.type;
    // this code does not work.  it is the code to leave an item in the toolbox when dragging
    const shouldRenderClone = name === props.snapshot.draggingFromThisWith;
    const isDragging = props.editContext.draggingControl?.source.current === name;
    const ref = react_1.default.useRef(null);
    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [shouldRenderClone && ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", height: "40px", border: "1px", borderRadius: "4px", padding: "5px", marginBottom: "10px", style: {
                    borderStyle: "solid",
                    borderColor: UIStyleConstants_1.UIStyleConstants.GRAY_VERY_LIGHT_COLOR,
                    background: UIStyleConstants_1.UIStyleConstants.WHITE_COLOR,
                }, children: [data.icon, (0, jsx_runtime_1.jsx)("span", { children: data.name })] })), (0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.Draggable, { draggableId: props.control.type, index: props.index, children: (provided) => ((0, jsx_runtime_1.jsx)(material_1.Box, { ...provided.draggableProps, ...provided.dragHandleProps, ref: (node) => {
                        provided.innerRef(node);
                        ref.current = node;
                    }, children: (0, jsx_runtime_1.jsx)(core_1.Tooltip, { title: data.name, placement: "top", arrow: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", height: "40px", border: "1px", borderRadius: "4px", padding: "5px", marginBottom: "10px", style: {
                                borderStyle: "solid",
                                borderColor: UIStyleConstants_1.UIStyleConstants.GRAY_VERY_LIGHT_COLOR,
                                background: isDragging
                                    ? UIStyleConstants_1.UIStyleConstants.BLUE_VERY_LIGHT_COLOR
                                    : UIStyleConstants_1.UIStyleConstants.WHITE_COLOR,
                                width: isDragging ? "175px" : "100%",
                            }, children: [data.icon, (0, jsx_runtime_1.jsx)("span", { children: isDragging
                                        ? data.name.slice(0, FlowConstants_1.FlowConstants.MAX_CHARS_DRAGGING_STEP)
                                        : data.name })] }) }, "item:" + data.name) })) })] }, name));
}
const StyledIconButton = (0, styled_components_1.default)(core_1.IconButton) `
    &.MuiIconButton-root {
        padding: 0;
    }
`;
const ToolboxTitleDiv = styled_components_1.default.div `
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    margin-top: 16px;

    .MuiTypography-subtitle1 {
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 100%;
        color: #272932;
    }

    .MuiTypography-caption {
        font-style: normal;
        font-weight: 500;
        font-size: 10px;
        line-height: 140%;
        color: #606881;
        margin-left: 4px;
    }

    .MuiButton-text {
        padding: 0;

        font-style: normal;
        font-weight: 500;
        font-size: 12px;
        line-height: 140%;
        color: #272932;
        text-transform: none;
        min-width: 0;

        &:hover {
            color: #4050a6;
            background-color: transparent;
        }
    }

    > div {
        display: flex;
        align-items: center;
    }
`;
const StyledWrapper = styled_components_1.default.div `
    .MuiTypography-body1 {
        font-style: normal;
        font-weight: normal;
        font-size: 12px;
        line-height: 140%;
        color: #606881;
        margin-bottom: 12px;
    }

    .MuiButton-root {
        font-style: normal;
        font-weight: 600;
        font-size: 14px;
        line-height: 140%;
        text-transform: none;
    }

    .MuiButton-containedPrimary {
        background-color: rgba(64, 80, 166, 0.8);
    }
`;
//# sourceMappingURL=ToolBox.js.map