import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import { Tab, Tooltip } from "@material-ui/core";
import { TabContext, TabList, TabPanel } from "@material-ui/lab";
export const TabLabelWithIcon = (props) => {
    return (_jsx(Tooltip, Object.assign({ title: props.label, placement: "top", arrow: true }, { children: _jsxs("div", Object.assign({ className: "SidebarTabWrapper" }, { children: [props.icon, _jsx("span", { children: props.label }, void 0)] }), void 0) }), void 0));
};
export class Sidebar extends React.Component {
    render() {
        return (_jsx(TabWrapper, { children: _jsxs(TabContext, Object.assign({ value: this.props.value }, { children: [_jsx(StyledTabList, Object.assign({ orientation: "vertical", onChange: (_event, mode) => this.props.onChange(mode), classes: {
                            indicator: "SidebarTab-indicator",
                            root: "SidebarTabs",
                            scroller: "SidebarScroller",
                        } }, { children: this.props.items.map((d) => (_jsx(StyledTab, { label: _jsx(TabLabelWithIcon, { label: d.label || d.value, icon: d.icon }, void 0), classes: { root: "SidebarTab-root", selected: "SidebarTab-selected" }, value: d.value, "data-testid": d.label || d.value }, d.value))) }), void 0),
                    _jsx("div", Object.assign({ style: { display: "flex", flex: 1, overflow: "auto", position: "relative" } }, { children: this.props.items.map((d) => (_jsx(StyledTabPanel, Object.assign({ value: d.value }, { children: d.renderUI() }), d.value))) }), void 0)] }), void 0) }, void 0));
    }
}
const StyledTabList = styled(TabList) `
    .SidebarScroller {
        background: #4050a6;
        padding: 16px;
    }
`;
export const StyledTab = styled(Tab) `
    && {
        min-width: 50px;
        width: 50px;
        height: 50px;
        font-family: Inter;
        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 = styled(TabPanel) `
    && {
        &:not([hidden]) {
            padding: 0;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow: hidden;
            display: flex;
        }
    }
`;
const TabWrapper = styled.div `
    position: relative;
    display: flex;
    width: 100%;
    overflow: hidden;
    flex: 1;
`;
//# sourceMappingURL=Sidebar.js.map