"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyledTab = exports.Sidebar = exports.TabLabelWithIcon = 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 material_1 = require("@mui/material");
const lab_1 = require("@mui/lab");
const TabLabelWithIcon = (props) => {
    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: props.label, placement: "top", arrow: true, children: (0, jsx_runtime_1.jsxs)("div", { className: "SidebarTabWrapper", children: [props.icon, (0, jsx_runtime_1.jsx)("span", { children: props.label })] }) }));
};
exports.TabLabelWithIcon = TabLabelWithIcon;
class Sidebar extends react_1.default.Component {
    render() {
        return ((0, jsx_runtime_1.jsx)(TabWrapper, { children: (0, jsx_runtime_1.jsxs)(lab_1.TabContext, { value: this.props.value, children: [(0, jsx_runtime_1.jsx)(StyledTabList, { orientation: "vertical", onChange: (_event, mode) => this.props.onChange(mode), classes: {
                            indicator: "SidebarTab-indicator",
                            root: "SidebarTabs",
                            scroller: "SidebarScroller",
                        }, children: this.props.items.map((d) => ((0, jsx_runtime_1.jsx)(exports.StyledTab, { label: (0, jsx_runtime_1.jsx)(exports.TabLabelWithIcon, { label: d.label || d.value, icon: d.icon }), classes: { root: "SidebarTab-root", selected: "SidebarTab-selected" }, value: d.value, "data-testid": d.label || d.value }, d.value))) }), (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", flex: 1, overflow: "auto", position: "relative" }, children: this.props.items.map((d) => ((0, jsx_runtime_1.jsx)(StyledTabPanel, { value: d.value, children: d.renderUI() }, d.value))) })] }) }));
    }
}
exports.Sidebar = Sidebar;
const StyledTabList = (0, styled_components_1.default)(lab_1.TabList) `
    .SidebarScroller {
        background: #4050a6;
        padding: 16px;
    }
`;
exports.StyledTab = (0, styled_components_1.default)(material_1.Tab) `
    && {
        min-width: 50px;
        width: 50px;
        height: 50px;

        font-style: normal;
        font-weight: 500;
        font-size: 10px;
        line-height: 140%;
        color: rgba(255, 255, 255, 0.6);
        text-align: center;
        border-radius: 4px;

        &.SidebarTab-selected {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
        }

        @media (min-width: 1366px) {
            min-width: calc(70px + 7 * (100vw - 1366px) / 554);
            width: calc(70px + 7 * (100vw - 1366px) / 554);
            height: auto;
            padding: calc(8px + 3 * (100vw - 1366px) / 554) 0;
        }

        @media (min-width: 1920px) {
            width: 84px;
            min-width: 84px;
            padding: 12px 0;
        }

        .SidebarTabWrapper {
            display: flex;
            flex-flow: column;
            align-items: center;

            img {
                margin-bottom: 0px;
                @media (min-width: 1366px) {
                    margin-bottom: 4px;
                }
            }

            span {
                display: none;

                @media (min-width: 1366px) {
                    display: inline;
                }
            }
        }
    }
`;
const StyledTabPanel = (0, styled_components_1.default)(lab_1.TabPanel) `
    && {
        &:not([hidden]) {
            padding: 0;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow: hidden;
            display: flex;
        }
    }
`;
const TabWrapper = styled_components_1.default.div `
    position: relative;
    display: flex;
    width: 100%;
    overflow: hidden;
    flex: 1;
`;
//# sourceMappingURL=Sidebar.js.map