import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { TabContext, TabList, TabPanel } from "@material-ui/lab";
import { ExpressionRegistration } from "./RegisterExpression";
import styled from "styled-components";
import { ExpressionsGrid } from "./CommonUI";
import { InputAdornment, Input, Tab } from "@material-ui/core";
import { SearchIcon } from "../../CommonUI/Icon/SearchIcon";
import { AddExpressionButton } from "./AddExpressionButton";
export const ToolboxPanel = function (props) {
    const [selectedCategory, setSelectedCategory] = useState("Common");
    const [search, setSearch] = useState("");
    const onChangeTab = (_event, newValue) => {
        setSelectedCategory(newValue);
    };
    const onChangeSearch = (event) => {
        setSearch(event.target.value);
    };
    let expressionCategories = ExpressionRegistration.getCategories(props.expressionValue.editContext.expression.getInputDefinition());
    return (_jsx(ToolboxPage, { children: _jsxs(TabContext, Object.assign({ value: selectedCategory }, { children: [_jsxs(ToolboxPanelSideBar, { children: [_jsx(ToolboxPanelSearchInput, { value: search, disableUnderline: true, onChange: onChangeSearch, placeholder: "Search", endAdornment: _jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(SearchIcon, {}, void 0) }), void 0) }, void 0),
                        _jsxs(ToolboxTabs, { children: [_jsx("label", { children: "Categories" }, void 0),
                                _jsxs(StyledTabList, Object.assign({ orientation: "vertical", onChange: onChangeTab }, { children: [_jsx(Tab, { value: "Common", label: "Common" }, void 0),
                                        expressionCategories.map((category) => {
                                            return _jsx(Tab, { value: category, label: category }, category);
                                        })] }), void 0)] }, void 0)] }, void 0),
                _jsxs(ToolboxPanelContent, { children: [_jsx(ToolboxTabPanel, Object.assign({ value: "Common" }, { children: _jsx(ExpressionsGrid, Object.assign({ columnCount: 3 }, { children: ExpressionRegistration.getCommonExpressions(props.expressionValue.editContext.expression.getInputDefinition()).map((value, index) => (_jsx(AddExpressionButton, { expression: props.expressionValue, registration: value, hideLabel: false, onClick: (registration) => {
                                        props.onExpressionSelected(registration);
                                    } }, "regitem" + index))) }), void 0) }), void 0),
                        expressionCategories.map((category) => {
                            let c = ExpressionRegistration.getExpressionsByCategory(category, props.expressionValue.editContext.expression.getInputDefinition());
                            return (_jsx(ToolboxTabPanel, Object.assign({ value: category }, { children: _jsx(ExpressionsGrid, Object.assign({ columnCount: 3 }, { children: c.map((value, index) => (_jsx(AddExpressionButton, { expression: props.expressionValue, registration: value, hideLabel: false, onClick: (registration) => {
                                            props.onExpressionSelected(registration);
                                        } }, "regitem" + index))) }), void 0) }), category));
                        })] }, void 0)] }), void 0) }, void 0));
};
const ToolboxPage = styled.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.div `
    width: 144px;
    margin-right: 12px;

    > * {
        margin-top: 10px;

        &:first-child {
            margin-top: 0px;
        }
    }
`;
const ToolboxPanelContent = styled.div `
    flex: 1;
    padding-left: 12px;
    border-left: solid 1px rgba(39, 41, 50, 0.1);
`;
const ToolboxPanelSearchInput = styled(Input) `
    && {
        padding: 6px 12px;
        font-family: Inter;
        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(TabPanel) `
    && {
        padding: 0;
        overflow: auto;
        height: 300px;
    }
`;
const ToolboxTabs = styled.div `
    padding: 6px 0 0;

    > label {
        font-family: Inter;
        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(TabList) `
    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-family: Inter;
        font-size: 11px;
        font-style: normal;
        font-weight: 500;
        line-height: 13px;
        letter-spacing: 0em;
        text-align: left;

        border-radius: 4px;

        display: flex;
        align-items: center;
        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