import { __decorate, __metadata } from "tslib";
import '@material/web/icon/icon.js';
import gql from 'graphql-tag';
import { css, html, LitElement, nothing } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { connect } from 'pwa-helpers/connect-mixin.js';
import { store } from '@operato/shell';
import { client } from '@operato/graphql';
import { UPDATE_FAVORITES } from '@things-factory/fav-base/client';
let FavoriteTool = class FavoriteTool extends connect(store)(LitElement) {
    constructor() {
        super(...arguments);
        this.favorites = [];
        this.acceptedPages = [];
    }
    render() {
        var renderable = (this.acceptedPages || []).indexOf(this.page) !== -1;
        return renderable
            ? html `
          <md-icon @click=${this.onClick.bind(this)} ?favorable=${!this.favored}
            >${this.favored ? 'star' : 'star_border'}</md-icon
          >
        `
            : nothing;
    }
    updated(changes) {
        if (changes.has('user')) {
            this.refreshFavorites();
        }
        this.favored = (this.favorites || []).includes(this.resourceId);
    }
    stateChanged(state) {
        this.page = state.route.page;
        this.favorites = state.favorite.favorites;
        this.user = state.auth.user;
        this.resourceId = state.route.resourceId;
    }
    onClick(event) {
        if (!this.resourceId) {
            return;
        }
        if (this.favored) {
            this.removeFavorite(this.resourceId);
        }
        else {
            this.addFavorite(this.resourceId);
        }
    }
    async refreshFavorites() {
        if (!this.user || !this.user.email) {
            return;
        }
        const response = await client.query({
            query: gql `
        query {
          myFavorites {
            id
            routing
          }
        }
      `
        });
        store.dispatch({
            type: UPDATE_FAVORITES,
            favorites: response.data.myFavorites.map(favorite => favorite.routing)
        });
    }
    async removeFavorite(routing) {
        await client.query({
            query: gql `
        mutation {
          deleteFavorite(routing: "${routing}")
        }
      `
        });
        this.refreshFavorites();
    }
    async addFavorite(routing) {
        await client.query({
            query: gql `
        mutation {
          createFavorite(favorite: {
            routing: "${routing}"
          }) {
            id
            routing
          }
        }
      `
        });
        this.refreshFavorites();
    }
};
FavoriteTool.styles = css `
    :host {
      display: inline-block;
      vertical-align: middle;
      line-height: 0;
    }

    [favorable] {
      opacity: 0.5;
    }
  `;
__decorate([
    property({ type: Array }),
    __metadata("design:type", Array)
], FavoriteTool.prototype, "favorites", void 0);
__decorate([
    property({ type: Object }),
    __metadata("design:type", Object)
], FavoriteTool.prototype, "user", void 0);
__decorate([
    property({ type: String }),
    __metadata("design:type", String)
], FavoriteTool.prototype, "resourceId", void 0);
__decorate([
    property({ type: Boolean }),
    __metadata("design:type", Boolean)
], FavoriteTool.prototype, "favored", void 0);
__decorate([
    property({ type: Array }),
    __metadata("design:type", Array)
], FavoriteTool.prototype, "acceptedPages", void 0);
FavoriteTool = __decorate([
    customElement('favorite-tool')
], FavoriteTool);
export { FavoriteTool };
//# sourceMappingURL=favorite-tool.js.map