"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ToolBox = exports.ToolboxDiv = 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 RegisterUIControl_1 = require("../Utilities/RegisterUIControl");
const FormDesignConstants_1 = require("../Utilities/FormDesignConstants");
const EditIcon_1 = require("../../CommonUI/Icon/EditIcon");
const ExpandIcon_1 = require("../../CommonUI/Icon/ExpandIcon");
const UIButton_1 = require("../../CommonUI/BuildlingBlocks/UIButton");
const material_1 = require("@mui/material");
const UILabel_1 = require("../../CommonUI/BuildlingBlocks/UILabel");
exports.ToolboxDiv = styled_components_1.default.div `
    display: flex;
    flex-direction: column;
    border: 1px solid #e6e9ed;
    border-radius: 0;
    height: 100%;
    flex-basis: 50px;

    @media (min-width: 1366px) {
        flex-basis: calc(236px + 59 * (100vw - 1366px) / 554);
    }

    @media (min-width: 1920px) {
        flex-basis: 295px;
    }
`;
const ToolboxContent = styled_components_1.default.div `
    border-top: 1px solid #e6e9ed;
    flex: 1;
    overflow: auto;
    padding-left: 12px;
    padding-right: 10px;
    padding-top: 10px;
`;
const StyledAccordion = (0, styled_components_1.default)(core_1.Accordion) `
    && {
        border: none;
        box-shadow: none;
    }
`;
const StyledAccordionSummary = (0, styled_components_1.default)(core_1.AccordionSummary) `
    && {
        color: #01244e;

        font-weight: 600;
        display: none;
        padding: 0;
        min-height: 0 !important;

        @media (min-width: 1366px) {
            display: flex;
            margin-bottom: 13px;
            font-size: 18px;
            line-height: 23px;
        }
        @media (min-width: 1920px) {
            margin-bottom: 19px;
            font-size: 20px;
            line-height: 25px;
        }

        .MuiAccordionSummary-content {
            margin: 0;
        }
    }
`;
const StyledAccordionDetails = (0, styled_components_1.default)(core_1.AccordionDetails) `
    && {
        display: flex;
        flex-direction: column;
        padding: 0;
    }
`;
class ToolBox extends react_1.default.Component {
    constructor(props) {
        super(props, {});
        window.addEventListener("resize", () => this.forceUpdate());
    }
    render() {
        let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        return ((0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.Droppable, { isDropDisabled: true, droppableId: "toolbox", children: (provided, snapshot) => {
                return ((0, jsx_runtime_1.jsxs)(exports.ToolboxDiv, { ref: provided.innerRef, className: "Toolbox_area", ...provided.droppableProps, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", "align-items": "center", borderBottom: "1px", borderColor: "#e6e9ed", paddingLeft: "12px", paddingTop: "10px", paddingBottom: "10px", height: "50px", children: (0, jsx_runtime_1.jsx)(UIButton_1.UIButton, { variant: "contained", startIcon: (0, jsx_runtime_1.jsx)(EditIcon_1.EditIcon, {}), onClick: () => this.props.onSelectFormDefaultConfig(), "data-testid": "edit-form-defaults", children: w > 1366 && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Settings" }) }) }), (0, jsx_runtime_1.jsx)(ToolboxContent, { children: Object.entries(Object.entries(RegisterUIControl_1.UIControlRegistration).reduce((obj, [name, data]) => {
                                if (!obj[data.category]) {
                                    obj[data.category] = [];
                                }
                                obj[data.category].push({ name, data });
                                return obj;
                            }, {})).map(([category, controls]) => {
                                const doms = controls
                                    .map((control, index) => {
                                    const data = control.data;
                                    const name = control.name;
                                    if (this.props.mode === FormDesignConstants_1.FormMode.LayoutDesign &&
                                        data.typeOfControl === RegisterUIControl_1.ControlType.Control) {
                                        return null;
                                    }
                                    if (this.props.mode === FormDesignConstants_1.FormMode.FormDesign &&
                                        data.typeOfControl === RegisterUIControl_1.ControlType.Container) {
                                        return null;
                                    }
                                    // this code does not work.  it is the code to leave an item in the toolbox when dragging
                                    const shouldRenderClone = name === snapshot.draggingFromThisWith;
                                    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [shouldRenderClone && ((0, jsx_runtime_1.jsxs)(material_1.Box, { border: "1px solid #e6e9ed", borderRadius: "5px", color: "#677c95", 
                                                // cursor={"pointer"}
                                                fontWeight: 600, display: "flex", flexDirection: "row", padding: "5px", paddingTop: "15px", paddingBottom: "15px", alignItems: "center", justifyContent: "left", height: "28px", width: "100%", marginBottom: "10px", style: {
                                                    borderColor: FormDesignConstants_1.FormDesignConstants.TOOLBOX_LEFT_BEHIND_COLOR,
                                                }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { width: "20px", children: data.icon }), (0, jsx_runtime_1.jsx)(UILabel_1.UILabel, { paddingLeft: "10px", children: data.name })] })), (0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.Draggable, { draggableId: name, index: index, children: (provided, snapshot) => ((0, jsx_runtime_1.jsx)("div", { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, 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, { border: "1px solid #e6e9ed", borderRadius: "5px", color: "#677c95", 
                                                            // cursor={"pointer"}
                                                            fontWeight: 600, display: "flex", flexDirection: "row", padding: "5px", paddingTop: "15px", paddingBottom: "15px", alignItems: "center", justifyContent: "left", height: "28px", width: "100%", marginBottom: "10px", style: {
                                                                borderColor: snapshot.isDragging
                                                                    ? FormDesignConstants_1.FormDesignConstants.TOOLBOX_DRAGGING_COLOR
                                                                    : FormDesignConstants_1.FormDesignConstants.TOOLBOX_NOT_DRAGGING_COLOR,
                                                            }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { width: "20px", children: data.icon }), (0, jsx_runtime_1.jsx)(UILabel_1.UILabel, { paddingLeft: "10px", children: data.name })] }) }) })) })] }, name));
                                })
                                    .filter((d) => !!d);
                                if (doms.length === 0)
                                    return null;
                                // todo: make this a method on control registration
                                return ((0, jsx_runtime_1.jsxs)(StyledAccordion, { defaultExpanded: true, children: [(0, jsx_runtime_1.jsx)(StyledAccordionSummary, { expandIcon: (0, jsx_runtime_1.jsx)(ExpandIcon_1.ExpandIcon, {}), children: category }), (0, jsx_runtime_1.jsx)(StyledAccordionDetails, { children: doms })] }, category));
                            }) }), provided.placeholder] }));
            } }));
    }
}
exports.ToolBox = ToolBox;
//# sourceMappingURL=ToolBox.js.map