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 Applications = class Applications extends connect(store)(PageView) {
    constructor() {
        super(...arguments);
        this.applications = [];
    }
    static { this.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 {
        margin: var(--spacing-large) 0;
        width: 100%;
        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 {
        font: var(--td-font);
        text-decoration: none;
        color: var(--md-sys-color-on-surface);
      }

      td a strong {
        font: bold 16px var(--theme-font);

        display: block;
        text-decoration: none;
      }

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

      .text-align-right {
        text-align: right;
      }
    `
    ]; }
    get context() {
        return {
            title: `applications`,
            help: 'auth/application'
        };
    }
    render() {
        var apps = this.applications || [];
        return html `
      <div>
        <h2>Registered Applications</h2>
        <p page-description>
          What type of app are you building?<br />Choose the app type that best suits the audience you’re building for.
        </p>

        <md-elevated-button @click=${e => navigate('application-register')}
          >register new application</md-elevated-button
        >
      </div>

      <table>
        <tr>
          <th>app name</th>
          <th>API health</th>
          <th>Installs</th>
          <th>status</th>
        </tr>
        ${apps.map(app => html `
            <tr>
              <td>
                <a href=${`application/${app.id}`}>
                  <strong>${app.name}</strong>
                  ${app.description}
                </a>
              </td>
              <td>OK</td>
              <td class="text-align-center">1</td>
              <td>draft</td>
            </tr>
          `)}
      </table>

      <md-outlined-button @click=${e => navigate('app-bindings')}>bound applications ..</md-outlined-button>
    `;
    }
    async pageUpdated(changes, lifecycle, before) {
        if (this.active) {
            this.applications = (await this.fetchApplications()).items;
        }
    }
    async fetchApplications() {
        const response = await client.query({
            query: gql `
        query {
          applications {
            items {
              id
              name
              description
            }
            total
          }
        }
      `
        });
        if (!response.errors) {
            return response.data.applications;
        }
    }
};
__decorate([
    property({ type: Array }),
    __metadata("design:type", Array)
], Applications.prototype, "applications", void 0);
Applications = __decorate([
    customElement('applications-page')
], Applications);
//# sourceMappingURL=applications.js.map