import { __decorate, __metadata } from "tslib";
import { LitElement, html, css } from 'lit';
import { customElement, property, state, query } from 'lit/decorators.js';
import { provider } from '@things-factory/board-ui/dist-client';
import { BoardViewer } from '@operato/board/ox-board-viewer.js';
import { getBoard } from '../../shared/api/queries/board';
let PopupMobilePlantWorldMap = class PopupMobilePlantWorldMap extends LitElement {
    constructor() {
        super(...arguments);
        this.isOpen = false;
        this.boardName = 'SUNNY_EaaS';
    }
    static { this.styles = css `
    .dimmed {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }
    .popup {
      border: 2px solid var(--md-sys-color-tertiary);
      background-color: #111;
      display: flex;
      width: 280px;
      flex-direction: column;
      gap: var(--padding-wide);
      border-radius: 8px;
      padding: var(--padding-wide);
      box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
      position: relative;
      color: var(--md-sys-color-on-secondary);
    }
    .header {
      font-size: 1.2em;
      font-weight: bold;
    }
    .close-btn {
      position: relative;
      float: right;
      top: 2px;
      cursor: pointer;
    }

    ox-board-viewer {
      width: 100%;
      aspect-ratio: 8 / 12;
    }
  `; }
    render() {
        return this.isOpen
            ? html `
          <div class="dimmed" @click="${this.close}">
            <div class="popup" @click="${e => e.stopPropagation()}">
              <div class="header">
                전국 발전량
                <md-icon class="close-btn" @click="${this.close}">close</md-icon>
              </div>

              <ox-board-viewer
                .board=${this.board}
                .provider=${provider}
                ?hide-fullscreen=${true}
                ?hide-navigation=${true}
              ></ox-board-viewer>
            </div>
          </div>
        `
            : '';
    }
    async open() {
        this.isOpen = true;
        if (this.viewer) {
            this.viewer.closeScene();
        }
        try {
            const board = await getBoard(this.boardName);
            if (!board) {
                this.board = null;
                throw 'board not found';
            }
            this.board = { ...board, model: JSON.parse(board.model) };
        }
        catch (ex) { }
    }
    close() {
        if (this.viewer) {
            this.viewer.closeScene();
        }
        this.isOpen = false;
    }
};
__decorate([
    property({ type: Boolean }),
    __metadata("design:type", Object)
], PopupMobilePlantWorldMap.prototype, "isOpen", void 0);
__decorate([
    state(),
    __metadata("design:type", Object)
], PopupMobilePlantWorldMap.prototype, "board", void 0);
__decorate([
    state(),
    __metadata("design:type", String)
], PopupMobilePlantWorldMap.prototype, "boardName", void 0);
__decorate([
    query('ox-board-viewer'),
    __metadata("design:type", BoardViewer)
], PopupMobilePlantWorldMap.prototype, "viewer", void 0);
PopupMobilePlantWorldMap = __decorate([
    customElement('popup-mobile-plant-world-map')
], PopupMobilePlantWorldMap);
export { PopupMobilePlantWorldMap };
//# sourceMappingURL=popup-mobile-plant-world-map.js.map