var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import 'js-beautify/js/lib/beautify.js';
import '../kano-code-display/kano-code-display.js';
import { property, customElement, css, LitElement, html, query } from 'lit-element';
import { classMap } from 'lit-html/directives/class-map';
import '../kc-workspace-toolbar/kc-workspace-toolbar.js';
import { localize as _ } from '../../lib/i18n/index.js';
let KanoAppEditor = class KanoAppEditor extends LitElement {
    constructor() {
        super(...arguments);
        this.workspaceTab = 'workspace';
        this.isResizing = false;
    }
    static get styles() {
        return [css `
            :host {
                display: flex;
                flex-direction: row;
                position: relative;
                max-width: 100vw;
                width: 100%;
                height: 100%;
            }
            :host section {
                display: flex;
                flex-direction: row-reverse;
                flex: 1;
                flex-basis: 0.000000001px;
                position: relative;
                overflow: hidden;
            }
            :host section #source-panel {
                flex: 1 1 auto;
                display: flex;
                flex-direction: column;
                position: relative;
                min-width: 50%;
                max-width: 70%;
            }
            :host section #workspace-panel {
                display: flex;
                flex-direction: column;
                position: relative;
                min-width: 33%;
                max-width: 50%;
                width: 33%;
                background-color: var(--kano-app-editor-workspace-background, #f2f2f2);
            }
            .tabs {
                background-color: var(--kano-app-editor-workspace-background, #f2f2f2);
                display: flex;
                flex-direction: row;
                /* 
                height: 100%;
                align-self: flex-end;
                margin-top: 10px; 
                */
            }
            .tab {
                align-self: center;
                border: none;
                background: transparent;
                width: 50%;
                font-family: var(--font-body);
                font-weight: bold;
                cursor: pointer;
                font-weight: bold;
                font-size: 16px;
                outline: none;
                opacity: 0.8;
                color: var(--color-grey);
                border-radius: 50px;
                margin: 10px 10px 10px 0;
                padding: 6px 10px;
                transition: all 0.15s ease-in-out;
            }
            .tab:hover {
                color: #fff;
                opacity: 1;
            }
            .tab.selected {
                color: #fff;
                opacity: 1;
                background: #606467;
            }
            .tab:first-child {
                margin-left: 0;
            }
            :host kano-code-display {
                margin: 16px;
                overflow: auto;
            }
            :host [main] {
                display: flex;
                flex-direction: column;
                flex: 1;
                flex-basis: 0.000000001px;
                position: relative;
            }
            #source-container {
                display: flex;
                flex: 1;
            }
            #source-container>* {
                flex: 1;
            }
            :host #resize {
                position: absolute;
                width: 8px;
                top: 0px;
                bottom: 0px;
                right: -4px;
                cursor: ew-resize;
                background-color: transparent;
                z-index: 1;
            }
            :host .hidden {
                visibility: hidden;
                opacity: 0;
            }
            .editor {
                position: relative;
            }
            kc-workspace-toolbar {
                padding: 20px 0;
            }
            .top-container {
                display: flex;
                flex: 0 0 auto;
                margin: 0 20px -16px;
            }
            #workspace-host {
                display: flex;
                flex-direction: column;
                flex: 1;
            }
            .controls {
                display: flex;
                flex: 1;
                flex-direction: column;
                box-sizing: border-box;
            }
            .activity-bar {
                background: #1A1A1A;
                display: flex;
                flex-direction: column;
            }
            .activity-bar > button {
                display: inline-flex;
                justify-content: center;
                align-items: center;
                margin: 0;
                width: 48px;
                height: 48px;
                background: transparent;
                border: none;
                padding: 8px;
                box-sizing: border-box;
                margin-bottom: 8px;
            }
            .activity-bar > button:not([disabled]) {
                cursor: pointer;
            }
            .activity-bar button:focus img {
                opacity: 1;
            }
            .activity-bar button:focus {
                outline: none;
            }
            .activity-bar button img.default {
                width: 24px;
                height: 24px;
            }
            .activity-bar button img.big {
                width: 32px;
                height: 32px;
            }
            .activity-bar button img:not(.important) {
                transition: opacity 0.15s ease;
                opacity: 0.5;
            }
            .activity-bar button:not([disabled]):hover img {
                opacity: 1;
            }
            #widget-layer {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                pointer-events: none;
                overflow: hidden;
            }
            .ui-edition {
                border-left: 2px solid var(--kc-border-color);
            }
            #widget-layer * {
                pointer-events: all;
            }
            [hidden] {
                display: none !important;
            }
            :host([disabled]) {
                pointer-events: none;
            }
        `];
    }
    render() {
        return html `
            <div class="activity-bar" id="activity-bar"></div>
            <section id="section"
                     @mousemove=${(e) => this.mouseMoved(e)}
                     @mouseup=${() => this.completedResizing()}>
                <div class="ui-edition" id="workspace-panel">
                    <div class="top-container">
                        <div class="tabs"
                                    attr-for-selected="id"
                                    .selected=${this.workspaceTab}
                                    autoselect>
                            ${this.getTab(_('CANVAS', 'Canvas'), 'workspace')}
                            ${this.getTab(_('CODE_DISPLAY', 'JavaScript'), 'code-display')}
                        </div>
                        <div class="controls">
                            <kc-workspace-toolbar id="toolbar"></kc-workspace-toolbar>
                        </div>
                    </div>
                    <div id="workspace-host" ?hidden=${this.workspaceTab !== 'workspace'}></div>
                    <kano-code-display id="code-display" .code=${this._setCodeDisplay(this.code, this.workspaceTab)} lang="javascript" ?hidden=${this.workspaceTab !== 'code-display'}></kano-code-display>
                </div>
                <div name="code" class="editor" id="source-panel">
                    <div id="resize" @mousedown=${(e) => this.resizeWorkspace(e)}></div>
                    <div main class="main">
                        <slot name="source-editor"></slot>
                    </div>
                </div>
            </section>
            <div id="widget-layer"></div>
        `;
    }
    getTab(label, id) {
        return html `
            <button class="tab ${classMap({ selected: this.workspaceTab === id })}" @click=${() => this.workspaceTab = id} id=${id}>${label}</button>
        `;
    }
    getTabDom(id) {
        if (!this.renderRoot) {
            return null;
        }
        return this.renderRoot.querySelector(`.tab#${id}`);
    }
    _onSelectedChanged(e) {
        this.workspaceTab = e.detail.value;
    }
    _setCodeDisplay(code, workspaceTab) {
        if (workspaceTab === 'workspace') {
            return;
        }
        return window.js_beautify(code || '', { indent_size: 2 });
    }
    /**
   * Resize the workspace
   */
    resizeWorkspace(e) {
        this.pauseEvent(e);
        this.isResizing = true;
    }
    /**
   * Completed the resize action
   */
    completedResizing() {
        this.isResizing = false;
    }
    /**
   * Used to prevent text selection when dragging
   */
    pauseEvent(e) {
        if (e.stopPropagation) {
            e.stopPropagation();
        }
        if (e.preventDefault) {
            e.preventDefault();
        }
        e.cancelBubble = true;
        e.returnValue = false;
        return false;
    }
    /**
   * Mouse moved handler
   */
    mouseMoved(e) {
        if (!this.section || !this.workspacePanel) {
            return;
        }
        if (!this.isResizing) {
            return;
        }
        this.pauseEvent(e);
        const offsetPanel = this.section.getBoundingClientRect().right - e.clientX;
        this.workspacePanel.style.width = `${offsetPanel}px`;
        // We need to trigger the resize of the kano-ui-workspace and the blockly workspace
        window.dispatchEvent(new Event('resize'));
    }
};
__decorate([
    property({ type: String })
], KanoAppEditor.prototype, "code", void 0);
__decorate([
    property({ type: String })
], KanoAppEditor.prototype, "workspaceTab", void 0);
__decorate([
    property({ type: Boolean })
], KanoAppEditor.prototype, "isResizing", void 0);
__decorate([
    query('#section')
], KanoAppEditor.prototype, "section", void 0);
__decorate([
    query('kc-workspace-toolbar')
], KanoAppEditor.prototype, "workspaceToolbar", void 0);
__decorate([
    query('#workspace-panel')
], KanoAppEditor.prototype, "workspacePanel", void 0);
__decorate([
    query('#source-container')
], KanoAppEditor.prototype, "sourceContainer", void 0);
__decorate([
    query('#widget-layer')
], KanoAppEditor.prototype, "widgetLayer", void 0);
__decorate([
    query('#workspace-host')
], KanoAppEditor.prototype, "workspaceEl", void 0);
__decorate([
    query('#activity-bar')
], KanoAppEditor.prototype, "activityBarEl", void 0);
KanoAppEditor = __decorate([
    customElement('kano-app-editor')
], KanoAppEditor);
export { KanoAppEditor };
//# sourceMappingURL=kano-app-editor.js.map