import { __decorate, __metadata } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import { InputLabel, Input, Tooltip } from "@material-ui/core";
import { ThemeProvider } from "@material-ui/styles";
import { AutoBind } from "../../Common/AutoBind";
import "./Topbar.css";
import { theme } from "../../Common/UITheme";
import { DropdownIcon } from "../../CommonUI/Icon/DropdownIcon";
import { DeleteIcon } from "../../CommonUI/Icon/DeleteIcon";
import { CutIcon } from "../../CommonUI/Icon/CutIcon";
import { CopyIcon } from "../../CommonUI/Icon/CopyIcon";
import { CloseIcon } from "../../CommonUI/Icon/CloseIcon";
import { PasteIcon } from "../../CommonUI/Icon/PasteIcon";
import { ObserveState } from "../../CommonUI/StateManagement/ObserveState";
import { TopbarIconButton, TopbarSaveButton, IconButtonWithTitle, StyledButtonGroup, TopbarIconBelowLabelDiv, } from "../../CommonUI/CommonStyles";
const SelectDiv = styled.div `
    position: relative;
`;
const DropDownDiv = styled.div `
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e6e9ed;
    width: 25px;

    @media (min-width: 768px) {
        width: calc(25px + 2 * (100vw - 768px) / 598);
    }

    @media (min-width: 1366px) {
        width: calc(27px + 9 * (100vw - 1366px) / 554);
    }

    @media (min-width: 1920px) {
        width: 36px;
    }
`;
const FormTitleInput = styled(Input) `
    && {
        color: #01244e;
        font-size: 14px;
        font-weight: bold;

        @media (min-width: 768px) {
            font-size: (14px + 4 * (100vw - 768px) / 598);
        }

        @media (min-width: 1366px) {
            font-size: calc(18px + 6 * (100vw - 1366px) / 554);
        }

        @media (min-width: 1920px) {
            font-size: 24px;
        }

        input {
            padding: 0px 6px;
            height: 27px;

            @media (min-width: 768px) {
                height: calc(27px + 2 * (100vw - 768px) / 598);
            }

            @media (min-width: 1366px) {
                height: calc(29px + 9 * (100vw - 1366px) / 554);
            }

            @media (min-width: 1920px) {
                height: 40px;
            }
        }
    }
`;
const TopbarDiv = styled.div `
    display: flex;
    width: 100%;
    align-items: flex-end;
    padding: 13px 15px;

    @media (min-width: 768px) {
        padding-left: calc(15px + 4 * (100vw - 768px) / 598);
        padding-right: calc(15px + 4 * (100vw - 768px) / 598);
        padding-top: calc(13px + 6 * (100vw - 768px) / 598);
        padding-bottom: calc(13px + 6 * (100vw - 768px) / 598);
    }

    @media (min-width: 1366px) {
        padding-left: calc(19px + 4 * (100vw - 1366px) / 554);
        padding-right: calc(19px + 4 * (100vw - 1366px) / 554);
        padding-top: calc(19px + 4 * (100vw - 1366px) / 554);
        padding-bottom: calc(19px + 4 * (100vw - 1366px) / 554);
    }

    @media (min-width: 1920px) {
        padding: 23px;
    }
`;
export const TopbarItemDiv = styled.div `
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    margin-left: 18px;

    &:first-child {
        margin-left: 0px;
    }

    @media (min-width: 1366px) {
        flex-direction: row;
        margin-left: calc(37px + 24 * (100vw - 1366px) / 554);
    }

    @media (min-width: 1920px) {
        margin-left: 70px;
    }

    > div {
        margin-left: 0px;

        @media (min-width: 1366px) {
            margin-left: calc(12px + 12 * (100vw - 1366px) / 554);

            &:first-child {
                margin-left: 0;
            }
        }

        @media (min-width: 1920px) {
            margin-left: 24px;
        }
    }
`;
const Topbarlabel = styled(InputLabel) `
    && {
        margin-bottom: 5px;
        font-size: 11px;
        font-weight: 600;
        font-family: Mulish;
        width: 100%;
        font-size: 11px;
        line-height: 14px;

        @media (min-width: 1366px) {
            width: auto;
            margin-bottom: 0px;
            font-size: 12px;
            line-height: 15px;
        }

        @media (min-width: 1920px) {
            font-size: 14px;
            line-height: 17px;
        }
    }
`;
class TopbarActionGroup extends React.Component {
    render() {
        return (_jsx(ObserveState, { listenTo: this.props.editContext, control: () => (_jsxs(StyledButtonGroup, Object.assign({ variant: "outlined", size: "small" }, { children: [_jsx(IconButtonWithTitle, { title: "Copy", icon: _jsx(CopyIcon, {}, void 0), disabled: this.props.isActionDisabled, testId: "btn-topbar-copy", action: this.props.editContext.onCopy }, void 0),
                    _jsx(IconButtonWithTitle, { title: "Cut", icon: _jsx(CutIcon, {}, void 0), disabled: this.props.isActionDisabled, testId: "btn-topbar-cut", action: this.props.editContext.onCut }, void 0),
                    _jsx(IconButtonWithTitle, { title: "Paste", icon: _jsx(PasteIcon, {}, void 0), disabled: this.props.isActionDisabled || !this.props.editContext.clipboardElement, testId: "btn-topbar-paste", action: this.props.editContext.onPaste }, void 0),
                    _jsx(IconButtonWithTitle, { title: "Delete", icon: _jsx(DeleteIcon, {}, void 0), disabled: this.props.isActionDisabled, testId: "btn-topbar-delete", action: this.props.editContext.onDelete }, void 0)] }), void 0)) }, void 0));
    }
}
export var IInjectTopItemType;
(function (IInjectTopItemType) {
    IInjectTopItemType["SELECT"] = "select";
    IInjectTopItemType["ICONBUTTONGROUP"] = "icon button group";
})(IInjectTopItemType || (IInjectTopItemType = {}));
export class Topbar extends React.Component {
    renderTopItem(item) {
        if (item.type === IInjectTopItemType.SELECT) {
            return (_jsx(TopbarItemDiv, { children: _jsxs(ThemeProvider, Object.assign({ theme: theme }, { children: [item.label && _jsx(Topbarlabel, { children: item.label }, void 0),
                        item.items && item.items.length > 0 && (_jsxs(SelectDiv, Object.assign({ className: "TopbarSelect-root", style: item.wrapperStyle }, { children: [_jsx(DropDownDiv, { children: _jsx(DropdownIcon, {}, void 0) }, void 0),
                                _jsx("select", Object.assign({ 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) => (_jsx("option", Object.assign({ value: m.value || m.label }, { children: m.label || m.value }), idx))) }), void 0)] }), void 0))] }), void 0) }, void 0));
        }
        else if (item.type === IInjectTopItemType.ICONBUTTONGROUP) {
            return (_jsx(TopbarItemDiv, { children: _jsxs(ThemeProvider, Object.assign({ theme: theme }, { children: [item.label && _jsx(Topbarlabel, { children: item.label }, void 0),
                        _jsx(StyledButtonGroup, Object.assign({ 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 (_jsx(Tooltip, Object.assign({ title: m.label || m.value || "" }, { children: _jsxs(TopbarIconButton, Object.assign({ "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 && (_jsx(TopbarIconBelowLabelDiv, { children: m.belowLabel }, void 0))] }), void 0) }), idx));
                                }) }), void 0)] }), void 0) }, void 0));
        }
        return null;
    }
    render() {
        return (_jsx("div", Object.assign({ style: { width: "100%", overflow: "auto", borderBottom: "1px solid #E6E9ED" } }, { children: _jsxs(TopbarDiv, { children: [this.props.name && (_jsx(TopbarItemDiv, { children: _jsx(FormTitleInput, { classes: {
                                input: "TopbarInput",
                                focused: "TopbarInput-focused",
                                root: `TopbarInput-root`,
                            }, "data-testid": "topbar-name", inputProps: { "aria-label": "Form Name" }, value: this.props.name, disableUnderline: true, onChange: this.props.onChangeName }, void 0) }, void 0)),
                    (this.props.prevElems || []).map((elem, idx) => (_jsx(TopbarItemDiv, Object.assign({ style: Reflect.get(elem, "wrapperStyle") || {} }, { children: _jsx(ThemeProvider, Object.assign({ theme: theme }, { children: React.isValidElement(elem) ? elem : Reflect.get(elem, "elem") }), void 0) }), idx))),
                    this.props.prevItems &&
                        this.props.prevItems.map((item, idx) => (_jsx(React.Fragment, { children: this.renderTopItem(item) }, idx))),
                    this.props.isRequiredActionGroup && (_jsx(TopbarItemDiv, Object.assign({ style: {
                            marginRight: (this.props.afterElems || []).length === 0 &&
                                (this.props.afterItems || []).length === 0
                                ? "auto"
                                : "0",
                        } }, { children: _jsx(ThemeProvider, Object.assign({ theme: theme }, { children: _jsx(TopbarActionGroup, { editContext: this.props.editContext, isActionDisabled: this.props.isActionDisabled }, void 0) }), void 0) }), void 0)),
                    this.props.afterItems &&
                        this.props.afterItems.map((item, idx) => (_jsx(React.Fragment, { children: this.renderTopItem(item) }, idx))),
                    (this.props.afterElems || []).map((elem, idx) => (_jsx(TopbarItemDiv, Object.assign({ style: Reflect.get(elem, "wrapperStyle") }, { children: _jsx(ThemeProvider, Object.assign({ theme: theme }, { children: React.isValidElement(elem) ? elem : Reflect.get(elem, "elem") }), void 0) }), idx))),
                    this.props.onSave && (_jsx(TopbarItemDiv, Object.assign({ style: { marginLeft: "auto" } }, { children: _jsx(TopbarSaveButton, Object.assign({ onClick: this.props.onSave, color: "primary", variant: "contained", "data-testid": "btn-topbar-save" }, { children: "Save" }), void 0) }), void 0)),
                    this.props.onClose && (_jsx(TopbarItemDiv, Object.assign({ style: { marginLeft: this.props.onSave ? undefined : "auto" } }, { children: _jsx(TopbarIconButton, Object.assign({ onClick: this.props.onClose, "data-testid": "btn-topbar-close" }, { children: _jsx(CloseIcon, {}, void 0) }), void 0) }), void 0))] }, void 0) }), void 0));
    }
}
__decorate([
    AutoBind,
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", Object)
], Topbar.prototype, "renderTopItem", null);
//# sourceMappingURL=Topbar.js.map