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 './board-basic-info';
import './board-versions';
import './board-info-link';
let BoardInfo = class BoardInfo extends LitElement {
    constructor() {
        super(...arguments);
        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 `<board-basic-info boardId=${ifDefined((_a = this.board) === null || _a === void 0 ? void 0 : _a.id)}></board-basic-info>`
            : this.tab == 'versions'
                ? html `<board-versions boardId=${ifDefined((_b = this.board) === null || _b === void 0 ? void 0 : _b.id)}></board-versions>`
                : html `<board-info-link .board=${this.board}></board-info-link>`}
      </div>
    `;
    }
    close() {
        history.back();
    }
};
BoardInfo.styles = [
    ScrollbarStyles,
    css `
      :host {
        height: 100%;
        min-width: 360px;

        display: flex;
        flex-direction: column;
        position: relative;
        background-color: var(--md-sys-color-surface);
      }

      [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(--md-sys-color-secondary);
        color: rgba(255, 255, 255, 0.8);
        text-align: center;
        text-transform: uppercase;
      }

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

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