import gql from 'graphql-tag'
import { i18next, localize } from '@things-factory/i18n-base'
import { navigate, client } from '@things-factory/shell'
import { css, html, LitElement } from 'lit-element'
import { SingleColumnFormStyles } from '@things-factory/form-ui'

class ScanBinNo extends localize(i18next)(LitElement) {
  static get styles() {
    return [
      SingleColumnFormStyles,
      css`
        :host {
          display: flex;
          flex-direction: column;
          overflow: hidden;
          background-color: var(--main-section-background-color);
        }
        .container {
          display: flex;
          flex-direction: column;
        }
        .single-column-form [custom-input] {
          grid-column: span 12;
        }
        .single-column-form label {
          grid-column: span 12;
          text-align: left;
          margin: 25px 0px 5px;
        }
        .button-container {
          margin: var(--button-container-margin);
          justify-self: center;
          align-self: center;
          padding-bottom: 50px;
        }
        label {
          align-self: center;
        }
        #input-form {
          width: auto;
          grid-gap: 5px;
          margin: 20px;
        }
        .color-teal {
          color: #007e7f;
        }
        [cancel] {
          --mdc-theme-primary: var(--main-section-background-color);
        }
      `
    ]
  }

  render() {
    return html`
      <div class="container">
        <form id="input-form" class="single-column-form">
          <fieldset>
            <legend>${i18next.t('title.scan_new_bin_no')}</legend>
            <label>${i18next.t('label.bin_no')}</label>
            <barcode-scanable-input name="binNo" custom-input></barcode-scanable-input>
          </fieldset>
        </form>
      </div>
      <div class="button-container">
        <mwc-button
          cancel
          raised
          @click="${e => {
            this._cancel(e)
          }}"
          ><label class="color-teal">${i18next.t('button.cancel')}</label>
        </mwc-button>
        <mwc-button
          raised
          @click="${e => {
            this._confirm(e)
          }}"
          label="${i18next.t('button.confirm')}"
        ></mwc-button>
      </div>
    `
  }

  get binNo() {
    return this.shadowRoot.querySelector('barcode-scanable-input[name=binNo]')?.shadowRoot.querySelector('input')
  }

  async _confirm(e) {
    if (!this.binNo.value) {
      throw new Error('invalid bin no')
    } else {
      let newBinNo = await this.validateBinNo(this.binNo.value)
      if (newBinNo) {
        await this.dispatchEvent(new CustomEvent('updateBinNo', { detail: newBinNo }))
      }
    }
  }

  _cancel() {
    history.back()
  }

  async validateBinNo(binNo) {
    if (!binNo) return
    const response = await client.query({
      query: gql`
        query binLocation($name: String!) {
          binLocation(name: $name) {
            id
            name
          }
        }
      `,
      variables: { name: binNo }
    })

    if (!response.errors) {
      return response.data.binLocation.name
    } else {
      this.binNo.value = ''
    }
  }
}

window.customElements.define('scan-bin-no', ScanBinNo)
