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('appliance-home')
class Appliances extends connect(store)(PageView) {
  static styles = [
    css`
      :host {
        background-color: var(--main-section-background-color);
        padding: var(--padding-wide);

        overflow: auto;
      }

      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(--margin-wide) 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(--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;
      }

      @media screen and (max-width: 480px) {
        :host {
          padding: var(--padding-default);
        }
      }
    `
  ]

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

  get context() {
    return {
      title: `appliance home`,
      help: 'auth/appliance'
    }
  }

  render() {
    var appliances = this.appliances || []

    return html`
      <div>
        <h2>Registered Appliances</h2>
        <p page-description>
          What type of appliance are you building?<br />Choose the app type that best suits the audience you’re building
          for. The appliance type can’t be changed after it’s created.
        </p>
        <mwc-button raised @click=${e => navigate('appliance-register')} label="register new appliance"></mwc-button>
      </div>

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

  async pageUpdated() {
    if (this.active) {
      this.appliances = (await this.fetchAppliances()).items
    }
  }

  async fetchAppliances() {
    const response = await client.query({
      query: gql`
        query {
          appliances {
            items {
              id
              name
              description
            }
            total
          }
        }
      `
    })

    if (!response.errors) {
      return response.data.appliances
    }
  }
}
