import { i18next, localize } from '@things-factory/i18n-base'
import { openPopup } from '@things-factory/layout-base'
import { client, navigate, PageView } from '@things-factory/shell'
import { CommonButtonStyles, ScrollbarStyles } from '@things-factory/styles'
import gql from 'graphql-tag'
import { css, html } from 'lit-element'
import './job-sheet-popup'

class JobSheetReport extends localize(i18next)(PageView) {
  static get properties() {
    return {
      _arrivalNoticeRefNo: String,
      _etaDate: String,
      _ata: String,
      _containerNo: String,
      _looseItem: Boolean,
      _containerSize: String,
      _containerMtDate: String,
      _adviseMtDate: String,
      _sumPalletQty: Number
    }
  }

  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() {
    return {
      title: i18next.t('title.job_sheet_report'),
      actions: [
        {
          title: i18next.t('button.edit'),
          action: this._editJobSheet.bind(this),
          ...CommonButtonStyles.edit
        },
        {
          title: i18next.t('button.print'),
          action: () => {
            this.renderRoot.querySelector('iframe').contentWindow.print()
          },
          ...CommonButtonStyles.print
        },
        {
          title: i18next.t('button.back'),
          action: () => navigate(`job_sheets`),
          ...CommonButtonStyles.back
        }
      ]
    }
  }

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

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

      if (this._arrivalNoticeRefNo) {
        await this._fetchJobSheet(this._arrivalNoticeRefNo)
      }
    }
  }

  async _fetchJobSheet(arrivalNoticeRefNo) {
    const response = await client.query({
      query: gql`
        query jobSheet($arrivalNoticeRefNo: String!) {
          jobSheet(arrivalNoticeRefNo: $arrivalNoticeRefNo) {
            name
            containerSize
            containerMtDate
            adviseMtDate
            sumPalletQty
            arrivalNoticeRefNo
            containerNo
            looseItem
            etaDate
            ata
          }
        }
      `,
      variables: {
        arrivalNoticeRefNo
      }
    })

    if (!response.errors) {
      const jobSheet = response.data.jobSheet

      this._etaDate = jobSheet.etaDate
      this._ata = jobSheet.ata
      this._containerNo = jobSheet.containerNo
      this._looseItem = jobSheet.looseItem
      this._containerSize = jobSheet.containerSize || null
      this._mtDate = jobSheet.containerMtDate
      this._adviseMtDate = jobSheet.adviseMtDate
      this._sumPalletQty = jobSheet.sumPalletQty
      this._jobSheetNo = jobSheet.name

      //var { domain } = getPathInfo(location.pathname) // find out better way later.
      var timezoneOffSet = new Date().getTimezoneOffset().toString()
      this.shadowRoot.querySelector('#container').src = `/view_job_sheet/${this._arrivalNoticeRefNo}/${timezoneOffSet}`
    }
  }

  _editJobSheet() {
    openPopup(
      html`
        <job-sheet-popup
          .containerMtDate="${this._mtDate}"
          .etaDate="${this._etaDate}"
          .ata="${this._ata}"
          .adviseMtDate="${this._adviseMtDate}"
          .containerSize="${this._containerSize}"
          .containerNo="${this._containerNo}"
          .sumPalletQty="${this._sumPalletQty}"
          .looseItem="${this._looseItem}"
          .jobSheetNo="${this._jobSheetNo}"
          @job-sheet-updated="${() => {
            this.pageReset()
          }}"
        ></job-sheet-popup>
      `,
      {
        backdrop: true,
        size: 'medium',
        title: i18next.t('title.edit_job_sheet')
      }
    )
  }

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

window.customElements.define('job-sheet-report', JobSheetReport)
