"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ToolboxPanel = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const core_1 = require("@material-ui/core");
const RegisterExpressionRule_1 = require("@appglue/common/dist/Expressions/RegisterExpressionRule");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const CommonUI_1 = require("./CommonUI");
const SearchIcon_1 = require("../../CommonUI/Icon/SearchIcon");
const AddExpressionButton_1 = require("./AddExpressionButton");
const ToolboxPanel = function (props) {
    const [selectedCategory, setSelectedCategory] = (0, react_1.useState)("Common");
    const [search, setSearch] = (0, react_1.useState)("");
    const onChangeSearch = (event) => {
        setSearch(event.target.value);
    };
    let expressionCategories = RegisterExpressionRule_1.ExpressionRuleRegistration.getCategories(props.expressionValue.editContext.expression.getInputDefinition());
    return ((0, jsx_runtime_1.jsxs)(ToolboxPage, { children: [(0, jsx_runtime_1.jsxs)(ToolboxPanelSideBar, { children: [(0, jsx_runtime_1.jsx)(ToolboxPanelSearchInput, { value: search, disableUnderline: true, onChange: onChangeSearch, placeholder: "Search", endAdornment: (0, jsx_runtime_1.jsx)(core_1.InputAdornment, { position: "end", children: (0, jsx_runtime_1.jsx)(SearchIcon_1.SearchIcon, {}) }) }), (0, jsx_runtime_1.jsxs)(ToolboxTabs, { children: [(0, jsx_runtime_1.jsx)("label", { children: "Categories" }), (0, jsx_runtime_1.jsxs)(StyledTabList, { children: [(0, jsx_runtime_1.jsx)(core_1.Button, { onClick: () => setSelectedCategory("Common"), classes: { root: selectedCategory === "Common" ? "Mui-selected" : undefined }, children: "Common" }), expressionCategories.map((category) => {
                                        return ((0, jsx_runtime_1.jsx)(core_1.Button, { onClick: () => setSelectedCategory(category), classes: { root: selectedCategory === category ? "Mui-selected" : undefined }, children: category }, category));
                                    })] })] })] }), (0, jsx_runtime_1.jsxs)(ToolboxPanelContent, { children: [selectedCategory === "Common" && ((0, jsx_runtime_1.jsx)(ToolboxTabPanel, { children: (0, jsx_runtime_1.jsx)(CommonUI_1.ExpressionsGrid, { columnCount: 3, children: RegisterExpressionRule_1.ExpressionRuleRegistration.getCommonExpressions(props.expressionValue.editContext.expression.getInputDefinition()).map((value, index) => ((0, jsx_runtime_1.jsx)(AddExpressionButton_1.AddExpressionButton, { expression: props.expressionValue, registration: value, hideLabel: false, onClick: (registration) => {
                                    props.onExpressionSelected(registration);
                                } }, "regitem" + index))) }) })), expressionCategories
                        .filter((c) => selectedCategory === c)
                        .map((category) => {
                        let c = RegisterExpressionRule_1.ExpressionRuleRegistration.getExpressionsByCategory(category, props.expressionValue.editContext.expression.getInputDefinition());
                        return ((0, jsx_runtime_1.jsx)(ToolboxTabPanel, { children: (0, jsx_runtime_1.jsx)(CommonUI_1.ExpressionsGrid, { columnCount: 3, children: c.map((value, index) => ((0, jsx_runtime_1.jsx)(AddExpressionButton_1.AddExpressionButton, { expression: props.expressionValue, registration: value, hideLabel: false, onClick: (registration) => {
                                        props.onExpressionSelected(registration);
                                    } }, "regitem" + index))) }) }, category));
                    })] })] }));
};
exports.ToolboxPanel = ToolboxPanel;
const ToolboxPage = styled_components_1.default.div `
    display: flex;
    float: left;
    width: 100%;
    flex-wrap: wrap;
    padding: 16px 0;
    max-height: 376px;
    align-content: flex-start;
    flex-direction: row;
`;
const ToolboxPanelSideBar = styled_components_1.default.div `
    width: 144px;
    margin-right: 12px;

    > * {
        margin-top: 10px;

        &:first-child {
            margin-top: 0px;
        }
    }
`;
const ToolboxPanelContent = styled_components_1.default.div `
    flex: 1;
    padding-left: 12px;
    border-left: solid 1px rgba(39, 41, 50, 0.1);
`;
const ToolboxPanelSearchInput = (0, styled_components_1.default)(core_1.Input) `
    && {
        padding: 6px 12px;

        font-style: normal;
        font-weight: normal;
        font-size: 14px;
        line-height: 140%;

        color: rgba(39, 41, 50, 0.3);
        border: 1px solid rgba(39, 41, 50, 0.2);

        background: #fcfcfe;

        border-radius: 4px;

        &::before {
            content: "";
            display: none;
        }

        .MuiInputBase-input {
            padding: 0;
        }
    }
`;
const ToolboxTabPanel = styled_components_1.default.div `
    padding: 0;
    overflow: auto;
    height: 300px;
`;
const ToolboxTabs = styled_components_1.default.div `
    padding: 6px 0 0;

    > label {
        font-size: 10px;
        font-style: normal;
        font-weight: 500;
        line-height: 12px;
        letter-spacing: 0.20000000298023224px;
        text-align: left;
        color: #4050a6;

        margin-bottom: 10px;
        display: block;
    }
`;
const StyledTabList = styled_components_1.default.div `
    background: rgba(64, 80, 166, 0.1);
    border-radius: 4px;
    padding: 2px;

    .MuiTabs-indicator {
        display: none;
    }

    .MuiButtonBase-root {
        min-width: auto;
        width: 100%;
        padding: 8px 16px;

        font-size: 11px;
        font-style: normal;
        font-weight: 500;
        line-height: 13px;
        letter-spacing: 0em;

        border-radius: 4px;

        display: flex;
        align-items: center;
        justify-content: start;
        color: #4050a6;

        text-transform: none;

        min-height: 0;

        &.Mui-selected {
            background: #fff;
            color: #272932;
        }

        .MuiTab-wrapper {
            display: block;
            text-align: left;
        }
    }
`;
//# sourceMappingURL=ToolboxPanel.js.map