import { __decorate, __metadata } from "tslib";
import './things-scene-components.import';
import '@operato/board/ox-board-player.js';
import '@operato/oops';
import gql from 'graphql-tag';
import { css, html } from 'lit';
import { customElement, state, query } from 'lit/decorators.js';
import { connect } from 'pwa-helpers/connect-mixin.js';
import { createBoardProvider } from '../board-provider';
import { store, PageView } from '@operato/shell';
import { clientSettingStore } from '@operato/shell/object-store.js';
import { client, subscribe } from '@operato/graphql';
import { BoardPlayer } from '@operato/board/ox-board-player.js';
function parseQuery(query) {
    for (const key in query) {
        if (query.hasOwnProperty(key)) {
            try {
                query[key] = JSON.parse(query[key]);
            }
            catch (error) {
                // do nothing
            }
        }
    }
    return query;
}
let BoardPlayerPage = class BoardPlayerPage extends connect(store)(PageView) {
    connectedCallback() {
        super.connectedCallback();
        this.provider = createBoardProvider();
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this.provider.dispose();
        delete this.provider;
    }
    async fetch(id) {
        return await client.query({
            query: gql `
        query ($id: String!) {
          response: playGroup(id: $id) {
            id
            name
            description
            boards {
              id
              model
            }
          }
        }
      `,
            variables: {
                id
            }
        });
    }
    async refresh() {
        var _a;
        if (!this.playGroupId) {
            return;
        }
        try {
            this.showSpinner = true;
            this.updateContext();
            const response = await this.fetch(this.playGroupId);
            this.playGroup = response.data.response;
            if (!this.playGroup) {
                throw 'playgroup not found';
            }
            this.boards = this.playGroup.boards;
        }
        catch (ex) {
            document.dispatchEvent(new CustomEvent('notify', {
                detail: {
                    level: 'error',
                    message: ex,
                    ex
                }
            }));
        }
        finally {
            this.showSpinner = false;
            this.updateContext();
            const { autoRefresh = true } = ((_a = (await clientSettingStore.get('board-view'))) === null || _a === void 0 ? void 0 : _a.value) || {};
            autoRefresh && this.startSubscribingForAutoRefresh();
        }
    }
    updated(changes) {
        if (changes.has('playGroupId')) {
            this.boardPlayer.stop();
            this.refresh();
        }
    }
    stateChanged(state) {
        this.baseUrl = state.app.baseUrl;
    }
    get oopsNote() {
        return {
            icon: 'style',
            title: 'EMPTY PLAYGROUP',
            description: 'There are no board to be shown'
        };
    }
    get context() {
        return {
            title: this.playGroup ? this.playGroup.name : this.showSpinner ? 'Fetching playgroup...' : 'Playgroup Not Found'
        };
    }
    render() {
        var oops = !this.showSpinner && !this.playGroup && this.oopsNote;
        return oops
            ? html ` <ox-oops-note icon=${oops.icon} title=${oops.title} description=${oops.description}></ox-oops-note> `
            : html `
          <ox-board-player .boards=${this.boards} .data=${this.data} .provider=${this.provider}></ox-board-player>
          <ox-oops-spinner ?show=${this.showSpinner}></ox-oops-spinner>
        `;
    }
    pageUpdated(changes, lifecycle) {
        if (this.active) {
            this.playGroupId = lifecycle.resourceId;
            this.data = parseQuery(Object.assign({}, lifecycle.params));
            this.refresh();
        }
        else {
            this.stopSubscribing();
            this.playGroupId = null;
            this.boardPlayer.stop();
        }
    }
    async startSubscribingForAutoRefresh() {
        if (!this.playGroup) {
            return;
        }
        await this.stopSubscribing();
        this.subscriptionForAutoRefresh = await subscribe({
            query: gql `
          subscription ($id: String!) {
            playGroup(id: $id) {
              id
            }
          }
        `,
            variables: {
                id: this.playGroup.id
            }
        }, {
            next: async ({ data }) => {
                await this.stopSubscribing();
                // location.reload()
                if (data) {
                    this.refresh();
                }
            }
        });
    }
    async stopSubscribing() {
        var _a;
        await ((_a = this.subscriptionForAutoRefresh) === null || _a === void 0 ? void 0 : _a.unsubscribe());
        delete this.subscriptionForAutoRefresh;
    }
};
BoardPlayerPage.styles = [
    css `
      :host {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;

        overflow: hidden;
        position: relative;
      }

      ox-board-player {
        flex: 1;
      }

      ox-oops-spinner {
        display: none;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }

      ox-oops-spinner[show] {
        display: block;
      }

      ox-oops-note {
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    `
];
__decorate([
    state(),
    __metadata("design:type", Object)
], BoardPlayerPage.prototype, "data", void 0);
__decorate([
    state(),
    __metadata("design:type", Object)
], BoardPlayerPage.prototype, "playGroup", void 0);
__decorate([
    state(),
    __metadata("design:type", Object)
], BoardPlayerPage.prototype, "playGroupId", void 0);
__decorate([
    state(),
    __metadata("design:type", Object)
], BoardPlayerPage.prototype, "boards", void 0);
__decorate([
    state(),
    __metadata("design:type", String)
], BoardPlayerPage.prototype, "baseUrl", void 0);
__decorate([
    state(),
    __metadata("design:type", Boolean)
], BoardPlayerPage.prototype, "showSpinner", void 0);
__decorate([
    query('ox-board-player'),
    __metadata("design:type", BoardPlayer)
], BoardPlayerPage.prototype, "boardPlayer", void 0);
BoardPlayerPage = __decorate([
    customElement('board-player-page')
], BoardPlayerPage);
export { BoardPlayerPage };
//# sourceMappingURL=board-player-page.js.map