import gql from 'graphql-tag'
import {
  css,
  html
} from 'lit-element'

import {
  i18next,
  localize
} from '@things-factory/i18n-base'
import {
  client,
  CustomAlert,
  navigate,
  PageView
} from '@things-factory/shell'
import {
  CommonButtonStyles,
  ScrollbarStyles
} from '@things-factory/styles'
import { getPathInfo } from '@things-factory/utils'

class CustomerReceivedNote extends localize(i18next)(PageView) {
  static get properties() {
    return {
      _grnNo: String,
      _status: String
    }
  }

  static get styles() {
    return [
      ScrollbarStyles,
      css`
        :host {
          display: flex;
          flex-direction: column;
          padding: 0;
        }

        #container {
          flex: 1;
          padding: 0;
          margin: 0;
          border: 0;
        }
      `
    ]
  }

  get context() {
    var actions = [
      {
        title: i18next.t('button.print'),
        action: () => {
          this.renderRoot.querySelector('iframe').contentWindow.print()
        },
        ...CommonButtonStyles.print
      },
      {
        title: i18next.t('button.back'),
        action: () => history.back(),
        ...CommonButtonStyles.back
      }
    ]

    return {
      title: i18next.t('title.goods_received_note_details'),
      actions
    }
  }

  render() {
    return html` <iframe id="container"></iframe> `
  }

  async pageUpdated(changes) {
    if (this.active) {
      if (changes.resourceId) {
        this._grnNo = changes.resourceId
      }

      if (this._grnNo) {
        await this._fetchGRNTemplate()
        // await this._fetchGRN()
      }

      this.updateContext()
    }
  }

  _fetchGRNTemplate() {
    var { domain } = getPathInfo(location.pathname) // find out better way later.
    var timezoneOffSet = new Date().getTimezoneOffset().toString()

    switch (domain) {
      case 'el-ccl-selayang':
      case 'el-cold-chain-warehouse':
        this.shadowRoot.querySelector('#container').src = `/view_elccl_grn/${this._grnNo}`
        break
      case 'orientage-warehouse':
      case 'shah-alam-warehouse':
        this.shadowRoot.querySelector('#container').src = `/view_orientage_grn/${this._grnNo}`
        break
      case 'seebuu-warehouse':
        this.shadowRoot.querySelector('#container').src = `/view_seebuu_grn/${this._grnNo}`
        break
      case 'freight-mark-warehouse':
        this.shadowRoot.querySelector('#container').src = `/view_fm_grn/${this._grnNo}/${timezoneOffSet}`
        break
      case 'kimeda-warehouse':
        this.shadowRoot.querySelector('#container').src = `/view_kimeda_grn/${this._grnNo}/${timezoneOffSet}`
        break
      default:
        this.shadowRoot.querySelector('#container').src = `/view_grn/${this._grnNo}/${timezoneOffSet}`
        break
    }
  }

  // async _fetchGRN() {
  //   if (!this._grnNo) return
  //   const response = await client.query({
  //     query: gql`
  //       query {
  //         goodsReceivalNote(${gqlBuilder.buildArgs({
  //           name: this._grnNo
  //         })}) {
  //           id
  //           name
  //           customerStatus
  //         }
  //       }
  //     `
  //   })

  //   if (!response.errors) {
  //     const grn = response.data.goodsReceivalNote
  //     this._status = grn.customerStatus
  //   }
  // }

  async _receivedGrn() {
    try {
      const result = await CustomAlert({
        title: i18next.t('title.are_you_sure'),
        text: i18next.t('text.accept_goods_received_note'),
        confirmButton: { text: i18next.t('button.confirm') },
        cancelButton: { text: i18next.t('button.cancel') }
      })

      if (!result.value) {
        return
      }

      const response = await client.query({
        query: gql`
          mutation receivedGoodsReceivalNote($name: String!) {
            receivedGoodsReceivalNote(name: $name) {
              name
            }
          }
        `,
        variables: {
          name: this._grnNo
        }
      })

      if (!response.errors) {
        navigate('customer_grn_list')
        this._showToast({ message: i18next.t('text.goods_received_note_has_been_received') })
      }
    } catch (e) {
      this._showToast(e)
    }
  }

  _showToast({ type, message }) {
    document.dispatchEvent(
      new CustomEvent('notify', {
        detail: {
          type,
          message
        }
      })
    )
  }
}

window.customElements.define('customer-received-note', CustomerReceivedNote)
