"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Topbar = exports.IInjectTopItemType = exports.TopbarItemDiv = exports.TopbarTitleDiv = 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 core_1 = require("@material-ui/core");
const styles_1 = require("@material-ui/styles");
const AutoBind_1 = require("@appglue/common/dist/Common/AutoBind");
const UITheme_1 = require("../UITheme");
const DropdownIcon_1 = require("../../CommonUI/Icon/DropdownIcon");
const DeleteIcon_1 = require("../../CommonUI/Icon/DeleteIcon");
const CutIcon_1 = require("../../CommonUI/Icon/CutIcon");
const CopyIcon_1 = require("../../CommonUI/Icon/CopyIcon");
const CloseIcon_1 = require("../../CommonUI/Icon/CloseIcon");
const PasteIcon_1 = require("../../CommonUI/Icon/PasteIcon");
const ObserveState_1 = require("../../CommonUI/StateManagement/ObserveState");
const CommonStyles_1 = require("../../CommonUI/CommonStyles");
const InlineTextEdit_1 = require("../InlineTextEdit");
const UIButton_1 = require("../BuildlingBlocks/UIButton");
const material_1 = require("@mui/material");
const UILabel_1 = require("../BuildlingBlocks/UILabel");
const SelectDiv = styled_components_1.default.div `
    position: relative;

    color: #677c95;

    border-radius: 5px;
    border: solid 1px #e6e9ed;
    height: 40px;
    width: 150px;

    .MuiSelect-root.TopbarSelect {
        padding-right: 36px;
        width: 118px;
    }

    .MuiSelect-root.TopbarSelect {
        height: 100%;
        font-size: 12px;
        line-height: 15px;
        font-weight: 600;
        box-sizing: border-box;
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 13px;
        padding-right: 36px;
        background: transparent;
        position: relative;
        width: 90px;
    }
`;
const DropDownDiv = styled_components_1.default.div `
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e6e9ed;
`;
const TopbarDiv = styled_components_1.default.div `
    display: flex;
    width: 100%;
    align-items: center;
    height: 65px;
`;
exports.TopbarTitleDiv = styled_components_1.default.div `
    position: relative;
    display: flex;
    align-items: center;
    min-width: 200px;

    .InlineEdit {
        width: 100%;
        top: 0;
        left: 0;
        color: #01244e;
        font-weight: bold;
        font-size: 24px;
    }
`;
exports.TopbarItemDiv = styled_components_1.default.div `
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
    margin-left: 18px;
`;
class TopbarActionGroup extends react_1.default.Component {
    render() {
        return ((0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: this.props.editContext, control: () => ((0, jsx_runtime_1.jsxs)(CommonStyles_1.StyledButtonGroup, { variant: "outlined", size: "small", children: [(0, jsx_runtime_1.jsx)(CommonStyles_1.IconButtonWithTitle, { title: "Copy", icon: (0, jsx_runtime_1.jsx)(CopyIcon_1.CopyIcon, {}), disabled: this.props.isActionDisabled, testId: "btn-topbar-copy", action: this.props.editContext.onCopy }), (0, jsx_runtime_1.jsx)(CommonStyles_1.IconButtonWithTitle, { title: "Cut", icon: (0, jsx_runtime_1.jsx)(CutIcon_1.CutIcon, {}), disabled: this.props.isActionDisabled, testId: "btn-topbar-cut", action: this.props.editContext.onCut }), (0, jsx_runtime_1.jsx)(CommonStyles_1.IconButtonWithTitle, { title: "Paste", icon: (0, jsx_runtime_1.jsx)(PasteIcon_1.PasteIcon, {}), disabled: this.props.isActionDisabled || !this.props.editContext.clipboardElement, testId: "btn-topbar-paste", action: this.props.editContext.onPaste }), (0, jsx_runtime_1.jsx)(CommonStyles_1.IconButtonWithTitle, { title: "Delete", icon: (0, jsx_runtime_1.jsx)(DeleteIcon_1.DeleteIcon, {}), disabled: this.props.isActionDisabled, testId: "btn-topbar-delete", action: this.props.editContext.onDelete })] })) }));
    }
}
var IInjectTopItemType;
(function (IInjectTopItemType) {
    IInjectTopItemType["SELECT"] = "select";
    IInjectTopItemType["ICONBUTTONGROUP"] = "icon button group";
})(IInjectTopItemType = exports.IInjectTopItemType || (exports.IInjectTopItemType = {}));
class Topbar extends react_1.default.Component {
    renderTopItem(item) {
        if (item.type === IInjectTopItemType.SELECT) {
            return ((0, jsx_runtime_1.jsx)(exports.TopbarItemDiv, { children: (0, jsx_runtime_1.jsxs)(styles_1.ThemeProvider, { theme: UITheme_1.theme, children: [item.label && ((0, jsx_runtime_1.jsx)(UILabel_1.UILabel, { paddingRight: "10px", type: "small", children: item.label })), item.items && item.items.length > 0 && ((0, jsx_runtime_1.jsxs)(SelectDiv, { className: "TopbarSelect-root", style: item.wrapperStyle, children: [(0, jsx_runtime_1.jsx)(DropDownDiv, { children: (0, jsx_runtime_1.jsx)(DropdownIcon_1.DropdownIcon, {}) }), (0, jsx_runtime_1.jsx)("select", { value: item.value, onChange: (event) => {
                                        item.onSelect(event.target.value + "");
                                    }, className: "MuiSelect-root MuiSelect-select TopbarSelect MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input", children: item.items &&
                                        item.items.map((m, idx) => ((0, jsx_runtime_1.jsx)("option", { value: m.value || m.label, children: m.label || m.value }, idx))) })] }))] }) }));
        }
        else if (item.type === IInjectTopItemType.ICONBUTTONGROUP) {
            return ((0, jsx_runtime_1.jsx)(exports.TopbarItemDiv, { children: (0, jsx_runtime_1.jsxs)(styles_1.ThemeProvider, { theme: UITheme_1.theme, children: [item.label && ((0, jsx_runtime_1.jsx)(UILabel_1.UILabel, { paddingRight: "10px", type: "small", children: item.label })), (0, jsx_runtime_1.jsx)(CommonStyles_1.StyledButtonGroup, { variant: "outlined", size: "small", style: item.wrapperStyle, children: item.items &&
                                item.items.length > 0 &&
                                item.items.map((m, idx) => {
                                    let isSelected = false;
                                    if (m.isSelected) {
                                        isSelected = m.isSelected();
                                    }
                                    else if (item.value === (m.value || m.label)) {
                                        isSelected = true;
                                    }
                                    return ((0, jsx_runtime_1.jsx)(core_1.Tooltip, { title: m.label || m.value || "", children: (0, jsx_runtime_1.jsxs)(CommonStyles_1.TopbarIconButton, { "data-testid": `btn-mode-${(m.label || m.value || "")
                                                .replace(/\s/, "-")
                                                .replace(/\(/, "")
                                                .replace(/\)/, "")
                                                .toLocaleLowerCase()}`, classes: {
                                                root: isSelected ? "TopbarIconButton-selected" : undefined,
                                            }, onClick: () => item.onSelect(m.value || m.label || ""), onMouseDown: m.onMouseDown, onMouseUp: m.onMouseUp, onMouseLeave: m.onMouseUp, children: [m.icon, m.belowLabel && ((0, jsx_runtime_1.jsx)(CommonStyles_1.TopbarIconBelowLabelDiv, { children: m.belowLabel }))] }) }, idx));
                                }) })] }) }));
        }
        return null;
    }
    render() {
        return ((0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", style: { width: "100%", overflow: "auto", borderBottom: "1px solid #E6E9ED" }, children: (0, jsx_runtime_1.jsxs)(TopbarDiv, { children: [this.props.name && ((0, jsx_runtime_1.jsx)(exports.TopbarTitleDiv, { "data-testid": "topbar-name", content: this.props.name, children: (0, jsx_runtime_1.jsx)(InlineTextEdit_1.InlineTextEdit, { text: this.props.name, onEdit: this.props.onChangeName }) })), (this.props.prevElems || []).map((elem, idx) => ((0, jsx_runtime_1.jsx)(exports.TopbarItemDiv, { style: Reflect.get(elem, "wrapperStyle") || {}, children: (0, jsx_runtime_1.jsx)(styles_1.ThemeProvider, { theme: UITheme_1.theme, children: react_1.default.isValidElement(elem) ? elem : Reflect.get(elem, "elem") }) }, idx))), this.props.prevItems &&
                        this.props.prevItems.map((item, idx) => ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: this.renderTopItem(item) }, idx))), this.props.isRequiredActionGroup && ((0, jsx_runtime_1.jsx)(exports.TopbarItemDiv, { style: {
                            marginRight: (this.props.afterElems || []).length === 0 &&
                                (this.props.afterItems || []).length === 0
                                ? "auto"
                                : "0",
                        }, children: (0, jsx_runtime_1.jsx)(styles_1.ThemeProvider, { theme: UITheme_1.theme, children: (0, jsx_runtime_1.jsx)(TopbarActionGroup, { editContext: this.props.editContext, isActionDisabled: this.props.isActionDisabled }) }) })), this.props.afterItems &&
                        this.props.afterItems.map((item, idx) => ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: this.renderTopItem(item) }, idx))), (this.props.afterElems || []).map((elem, idx) => ((0, jsx_runtime_1.jsx)(exports.TopbarItemDiv, { style: Reflect.get(elem, "wrapperStyle"), children: (0, jsx_runtime_1.jsx)(styles_1.ThemeProvider, { theme: UITheme_1.theme, children: react_1.default.isValidElement(elem) ? elem : Reflect.get(elem, "elem") }) }, idx))), this.props.onSave && ((0, jsx_runtime_1.jsx)(exports.TopbarItemDiv, { style: { marginLeft: "auto" }, children: (0, jsx_runtime_1.jsx)(UIButton_1.UIButton, { onClick: this.props.onSave, variant: "contained", "data-testid": "btn-topbar-save", children: "Save" }) })), this.props.onClose && ((0, jsx_runtime_1.jsx)(exports.TopbarItemDiv, { style: { marginLeft: this.props.onSave ? undefined : "20px" }, children: (0, jsx_runtime_1.jsx)(CommonStyles_1.TopbarIconButton, { onClick: this.props.onClose, "data-testid": "btn-topbar-close", children: (0, jsx_runtime_1.jsx)(CloseIcon_1.CloseIcon, {}) }) })), (0, jsx_runtime_1.jsx)(material_1.Box, { paddingRight: "10px" })] }) }));
    }
}
tslib_1.__decorate([
    AutoBind_1.AutoBind
], Topbar.prototype, "renderTopItem", null);
exports.Topbar = Topbar;
//# sourceMappingURL=Topbar.js.map