import { __decorate, __metadata } from "tslib";
import '@material/web/button/elevated-button.js';
import '@material/web/button/outlined-button.js';
import gql from 'graphql-tag';
import { css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { connect } from 'pwa-helpers/connect-mixin.js';
import { client } from '@operato/graphql';
import { navigate, PageView, store } from '@operato/shell';
let AppBindings = class AppBindings extends connect(store)(PageView) {
    constructor() {
        super(...arguments);
        this.appBindings = [];
    }
    get context() {
        return {
            title: `application bindings`,
            help: 'auth/application'
        };
    }
    render() {
        var appBindings = this.appBindings || [];
        return html `
      <div>
        <h2>Bound Applications</h2>
        <p page-description>Bound Applications goes here</p>
      </div>

      <table>
        <tr>
          <th>app name</th>
          <th>Scope</th>
          <th>status</th>
        </tr>
        ${appBindings.map(appBinding => html `
            <tr>
              <td>
                <a href=${`app-binding/${appBinding.id}`}>${appBinding.name}</a>
                ${appBinding.description}
              </td>
              <td>${appBinding.scope}</td>
              <td>${appBinding.status}</td>
            </tr>
          `)}
      </table>
      <md-elevated-button @click=${e => navigate('applications')}>registered applications ..</md-elevated-button>
    `;
    }
    async pageUpdated(changes, lifecycle, before) {
        if (this.active) {
            this.appBindings = (await this.fetchAppBindings()).items;
        }
    }
    async fetchAppBindings() {
        const response = await client.query({
            query: gql `
        query {
          appBindings {
            items {
              id
              name
              application {
                id
                name
              }
              scope
              status
            }
            total
          }
        }
      `
        });
        if (!response.errors) {
            return response.data.appBindings;
        }
    }
};
AppBindings.styles = [
    css `
      :host {
        background-color: var(--md-sys-color-background);
        padding: var(--spacing-large);

        overflow: auto;
      }

      md-elevated-button {
        text-transform: capitalize;
      }

      md-outlined-button {
        float: right;
        margin-top: var(--spacing-medium);
        text-transform: capitalize;
      }

      h2 {
        margin: var(--title-margin);
        font: var(--title-font);
        color: var(--title-text-color);
      }

      [page-description] {
        margin: var(--page-description-margin);
        font: var(--page-description-font);
        color: var(--page-description-color);
      }

      table {
        width: 100%;
        margin: var(--spacing-large) 0;
        border-collapse: collapse;
      }

      tr {
        background-color: var(--tr-background-color);
      }

      tr:nth-child(odd) {
        background-color: var(--tr-background-odd-color);
      }

      tr:hover {
        background-color: var(--tr-background-hover-color);
      }

      th {
        border-top: var(--th-border-top);
        border-bottom: var(--td-border-bottom);
        padding: var(--th-padding);

        font: var(--th-font);
        color: var(--th-color);
        text-transform: var(--th-text-transform);
        text-align: left;
      }

      td {
        padding: var(--td-padding);
        border-bottom: var(--td-border-bottom);
        font: var(--td-font);
        color: var(--td-color);
      }

      td a {
        color: var(--md-sys-color-primary);
        font: bold 16px var(--theme-font);

        display: block;
        text-decoration: none;
      }

      .text-align-center {
        text-align: center;
      }

      .text-align-right {
        text-align: right;
      }
    `
];
__decorate([
    property({ type: Array }),
    __metadata("design:type", Array)
], AppBindings.prototype, "appBindings", void 0);
AppBindings = __decorate([
    customElement('app-bindings-page')
], AppBindings);
//# sourceMappingURL=app-bindings.js.map