import { __decorate, __metadata } from "tslib";
import { css, html, LitElement } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { ScrollbarStyles } from '@operato/styles';
import './process-basic-info';
import './process-versions';
import './process-info-link';
let ProcessInfo = class ProcessInfo extends LitElement {
    constructor() {
        super(...arguments);
        this.enableModeller = true;
        this.tab = 'basic';
    }
    render() {
        var _a, _b;
        return html `
      <div tab>
        <span @click=${() => (this.tab = 'basic')} ?active=${this.tab == 'basic'}>basic</span>
        <span @click=${() => (this.tab = 'versions')} ?active=${this.tab == 'versions'}>versions</span>
        <span @click=${() => (this.tab = 'link')} ?active=${this.tab == 'link'}>link</span>
      </div>
      <div content>
        ${this.tab == 'basic'
            ? html `<process-basic-info
              processId=${ifDefined((_a = this.process) === null || _a === void 0 ? void 0 : _a.id)}
              ?enable-modeller=${this.enableModeller}
            ></process-basic-info>`
            : this.tab == 'versions'
                ? html `<process-versions processId=${ifDefined((_b = this.process) === null || _b === void 0 ? void 0 : _b.id)}></process-versions>`
                : html `<process-info-link .process=${this.process}></process-info-link>`}
      </div>
    `;
    }
    close() {
        history.back();
    }
};
ProcessInfo.styles = [
    ScrollbarStyles,
    css `
      :host {
        height: 100%;
        min-width: 360px;

        display: flex;
        flex-direction: column;
        position: relative;
        background-color: var(--main-section-background-color);
      }

      [tab] {
        width: 100%;
        display: flex;
      }

      [tab] > * {
        flex: 1;
      }

      [content] {
        flex: 1;
        overflow-y: auto;
      }

      span {
        padding: 5px 4px 1px;
        font: var(--group-bar-textbutton);
        background-color: var(--secondary-color);
        color: rgba(255, 255, 255, 0.8);
        text-align: center;
        text-transform: uppercase;
      }

      span[active] {
        background-color: var(--primary-color);
      }

      @media screen and (max-width: 460px) {
        :host {
          width: 100vw;
        }
      }
    `
];
__decorate([
    property({ type: Object }),
    __metadata("design:type", Object)
], ProcessInfo.prototype, "process", void 0);
__decorate([
    property({ type: Boolean, attribute: 'enable-modeller' }),
    __metadata("design:type", Boolean)
], ProcessInfo.prototype, "enableModeller", void 0);
__decorate([
    state(),
    __metadata("design:type", String)
], ProcessInfo.prototype, "tab", void 0);
ProcessInfo = __decorate([
    customElement('process-info')
], ProcessInfo);
export { ProcessInfo };
//# sourceMappingURL=process-info.js.map