import gql from 'graphql-tag'
import { css, html } from 'lit'
import { customElement, property, query, state } 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('application-register')
class ApplicationRegister extends connect(store)(PageView) {
  static styles = [
    css`
      :host {
        background-color: var(--md-sys-color-background);
        padding: var(--spacing-large);

        position: relative;

        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);
      }
      [icon] {
        position: absolute;
        top: 10px;
        right: 10px;

        max-width: 80px;
      }
      [icon] img {
        max-width: 100%;
        max-height: 100%;
      }

      img[pagedeco] {
        width: 150px;
        margin: 0 var(--spacing-large);
        float: left;
        position: relative;
        top: -20px;
      }

      [form-container] {
        background-color: var(--md-sys-color-surface);
        padding: var(--spacing-large);
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
        max-width: var(--input-container-max-width);
        position: relative;
        top: -50px;
        clear: both;
      }
      label {
        font: var(--label-font);
        color: var(--label-color, var(--md-sys-color-on-surface));
        text-transform: var(--label-text-transform);
      }
      input {
        border: var(--border-dim-color);
        border-radius: var(--border-radius);
        margin: var(--input-margin);
        padding: var(--input-padding);
        font: var(--input-font);

        flex: 1;
      }
      select:focus,
      input:focus {
        outline: none;
      }
      [field-2column] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 15px;
      }
      [field] {
        display: flex;
        flex-direction: column;
      }
      [grid-span] {
        grid-column: span 2;
      }
      @media screen and (max-width: 480px) {
        img[pagedeco] {
          display: none;
        }
        [form-container] {
          position: initial;
        }
        [field] {
          grid-column: span 2;
        }
      }
    `
  ]

  @property({ type: Object }) application: any

  @query('form') form!: HTMLFormElement

  @state() _icon?: string

  get context() {
    return {
      title: `application registration`,
      help: 'auth/application'
    }
  }

  render() {
    return html`
      <img src="/assets/images/image-api.png" pagedeco />
      <h2>Register new application</h2>
      <p page-description>
        You can register new application here.<br />
        What type of app are you building? Choose the app type that best suits the audience you’re building for.
      </p>

      ${this._icon
        ? html`
            <div icon>
              <img src=${this._icon} />
            </div>
          `
        : html``}

      <div form-container>
        <form>
          <div field-2column>
            <div field grid-span>
              <label for="name">name</label>
              <input id="name" type="text" name="name" />
            </div>

            <div field grid-span>
              <label for="description">description</label>
              <input id="description" type="text" name="description" />
            </div>

            <div field grid-span>
              <label for="app-url">application url</label>
              <input id="app-url" type="text" name="url" />
            </div>

            <div field grid-span>
              <label for="redirect-url">redirectUrl</label>
              <input id="redirect-url" type="text" name="redirectUrl" />
            </div>

            <div field grid-span>
              <label for="icon">application icon</label>
              <input id="icon" type="text" name="icon" @change=${e => (this._icon = e.target.value)} />
            </div>

            <div field grid-span>
              <label for="email">contact email</label>
              <input id="email" type="text" name="email" />
            </div>

            <md-elevated-button grid-span @click=${this.createApplication.bind(this)}>register</md-elevated-button>
          </div>
        </form>
      </div>
    `
  }

  async createApplication(e) {
    e.preventDefault()

    const formData = new FormData(this.form)

    const application = Array.from(formData.entries()).reduce((application, [key, value]) => {
      application[key] = value
      return application
    }, {})

    const response = await client.mutate({
      mutation: gql`
        mutation ($application: NewApplication!) {
          createApplication(application: $application) {
            id
          }
        }
      `,
      variables: {
        application
      }
    })

    if (response.errors) {
      console.log('creation fail.')
    } else {
      const id = response.data.createApplication.id
      navigate(`application/${id}`)
    }
  }

  pageUpdated(changes, lifecycle, before) {
    if (this.active) {
      this.form.reset()
    }
  }
}
