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'

@customElement('applications-page')
class Applications extends connect(store)(PageView) {
  static styles = [
    css`
      :host {
        background-color: var(--main-section-background-color);
        padding: var(--padding-wide);

        overflow: auto;
      }

      [outlined] {
        float: right;
        margin-top: var(--margin-default);
      }

      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(--margin-wide) 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(--theme-black-color);
      }
      td a strong {
        color: var(--secondary-text-color);
        font: bold 16px var(--theme-font);

        display: block;
        text-decoration: none;
      }

      .text-align-center {
        text-align: center;
      }
      .text-align-right {
        text-align: right;
      }
    `
  ]

  @property({ type: Array }) applications: any[] = []

  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>
        <mwc-button
          raised
          @click=${e => navigate('application-register')}
          label="register new application"
        ></mwc-button>
      </div>

      <!-- <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>

      <mwc-button outlined @click=${e => navigate('app-bindings')} label="bound applications .."></mwc-button>
      <!-- </div> -->
    `
  }

  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
    }
  }
}
