import '../../components/popup-note'
import '../../components/vas-templates'
import '@things-factory/grist-ui'
import { client, PageView } from '@things-factory/shell'
import { css, html } from 'lit-element'
import { isMobileDevice } from '@things-factory/utils'
import { CommonButtonStyles } from '@things-factory/styles'
import { i18next, localize } from '@things-factory/i18n-base'
import { MultiColumnFormStyles } from '@things-factory/form-ui'
import gql from 'graphql-tag'
import { ORDER_STATUS, TRANSFER_TYPES } from '../../constants'

class RejectedTransferOrder extends localize(i18next)(PageView) {
  static get properties() {
    return {
      _toNo: String,
      _ownTransport: Boolean,
      _rejectReason: String,
      _template: Object,
      _transferOrderNo: String,
      inventoryData: Object,
      inventoryGristConfig: Object,
      vasData: Object,
      vasGristConfig: Object
    }
  }

  static get styles() {
    return [
      MultiColumnFormStyles,
      css`
        :host {
          display: flex;
          flex-direction: column;
          overflow-x: auto;
        }
        popup-note {
          flex: 1;
        }
        .container {
          display: flex;
          flex: 4;
        }
        .grist {
          background-color: var(--main-section-background-color);
          display: flex;
          flex-direction: column;
          flex: 1;
          overflow-y: auto;
        }
        data-grist {
          overflow-y: hidden;
          flex: 1;
        }
        .guide-container {
          max-width: 30vw;
          display: flex;
        }
        h2 {
          padding: var(--subtitle-padding);
          font: var(--subtitle-font);
          color: var(--subtitle-text-color);
          border-bottom: var(--subtitle-border-bottom);
        }
        .grist h2 {
          margin: var(--grist-title-margin);
          border: var(--grist-title-border);
          font: var(--grist-title-font);
          color: var(--secondary-color);
        }

        .grist h2 mwc-icon {
          vertical-align: middle;
          margin: var(--grist-title-icon-margin);
          font-size: var(--grist-title-icon-size);
          color: var(--grist-title-icon-color);
        }

        h2 + data-grist {
          padding-top: var(--grist-title-with-grid-padding);
        }
      `
    ]
  }

  render() {
    return html`
      <popup-note
        .title="${i18next.t('title.rejection_reason')}"
        .value="${this._rejectReason}"
        .readonly="${true}"
      ></popup-note>
      <form name="transferOrder" class="multi-column-form">
        <fieldset>
          <legend>${i18next.t('title.transfer_order_no')}: ${this._toNo}</legend>

          <label>${i18next.t('label.ref_no')}</label>
          <input name="refNo" readonly />

          <label>${i18next.t('label.issued_date')}</label>
          <input name="issuedDate" type="date" readonly />

          <label>${i18next.t('label.status')}</label>
          <select name="status" disabled>
            ${Object.keys(ORDER_STATUS).map(key => {
              const status = ORDER_STATUS[key]
              return html` <option value="${status.value}">${i18next.t(`label.${status.name}`)}</option> `
            })}
          </select>

          <label>${i18next.t('label.type')}</label>
          <select name="type" disabled>
            ${Object.keys(TRANSFER_TYPES).map(key => {
              const type = TRANSFER_TYPES[key]
              return html` <option value="${type.value}">${i18next.t(`label.${type.name}`)}</option> `
            })}
          </select>

          <input
            id="ownTransport"
            type="checkbox"
            name="ownTransport"
            ?checked="${this._ownTransport}"
            @change="${e => (this._ownTransport = e.currentTarget.checked)}"
            disabled
          />
          <label>${i18next.t('label.own_transport')}</label>
        </fieldset>
      </form>

      <div class="container">
        <div class="grist">
          <h2><mwc-icon>list_alt</mwc-icon>${i18next.t('title.product')}</h2>
          <data-grist
            .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
            .config=${this.config}
            .data="${this.productData}"
          ></data-grist>
        </div>
      </div>
    `
  }

  //vas --inbound
  constructor() {
    super()
    this._exportOption = false
    this._ownTransport = true
    this._attachments = []
    this.inventoryData = { records: [] }
    this.vasData = { records: [] }
  }

  get context() {
    return {
      title: i18next.t('title.rejected_transfer_order'),
      actions: [
        {
          title: i18next.t('button.back'),
          action: () => history.back(),
          ...CommonButtonStyles.back
        }
      ]
    }
  }

  get transferOrderForm() {
    return this.shadowRoot.querySelector('form[name=transferOrder]')
  }

  get _ownTransportInput() {
    return this.shadowRoot.querySelector('input[name=ownTransport]')
  }

  get inventoryGrist() {
    return this.shadowRoot.querySelector('data-grist#inventory-grist')
  }

  get vasGrist() {
    return this.shadowRoot.querySelector('data-grist#vas-grist')
  }

  pageUpdated(changes) {
    if (this.active && changes.resourceId) {
      this._transferOrderNo = changes.resourceId
      this._fetchTransferOrder()
    }
  }

  pageInitialized() {
    this.config = {
      rows: { selectable: { multiple: true }, appendable: false },
      list: { fields: ['name', 'bizplace', 'releaseDate', 'status', 'updatedAt'] },
      columns: [
        { type: 'gutter', gutterName: 'sequence' },
        {
          type: 'string',
          name: 'batchId',
          header: i18next.t('field.batch_id'),
          record: { align: 'left' },
          width: 100
        },
        {
          type: 'object',
          name: 'product',
          header: i18next.t('field.product'),
          record: { align: 'center', options: { queryName: 'products' } },
          width: 350
        },
        {
          type: 'string',
          name: 'packingType',
          header: i18next.t('field.packing_type'),
          record: { align: 'center' },
          width: 150
        },
        {
          type: 'float',
          name: 'weight',
          header: i18next.t('field.weight'),
          record: { align: 'center', options: { min: 0 } },
          width: 100
        },
        {
          type: 'string',
          name: 'unit',
          header: i18next.t('field.unit'),
          record: { align: 'center' },
          width: 150
        },
        {
          type: 'float',
          name: 'packQty',
          header: i18next.t('field.pack_qty'),
          record: { align: 'center', options: { min: 0 } },
          width: 100
        },
        {
          type: 'float',
          name: 'totalWeight',
          header: i18next.t('field.total_weight'),
          record: { align: 'center', options: { min: 0 } },
          width: 100
        },
        {
          type: 'string',
          name: 'status',
          header: i18next.t('field.status'),
          record: { align: 'center' },
          width: 150
        }
      ]
    }

    this.vasGristConfig = {}
  }

  _fillupTOForm(data) {
    this._fillupForm(this.transferOrderForm, data)
  }

  _fillupForm(form, data) {
    form.reset()
    for (let key in data) {
      Array.from(form.querySelectorAll('input, textarea, select')).forEach(field => {
        if (field.name === key && field.type === 'checkbox') {
          field.checked = data[key]
        } else if (field.name === key && field.type === 'datetime-local') {
          const datetime = Number(data[key])
          const timezoneOffset = new Date(datetime).getTimezoneOffset() * 60000
          field.value = new Date(datetime - timezoneOffset).toISOString().slice(0, -1)
        } else if (field.name === key) {
          if (data[key] instanceof Object) {
            const objectData = data[key]
            field.value = `${objectData.name} ${objectData.description ? ` (${objectData.description})` : ''}`
          } else {
            field.value = data[key]
          }
        }
      })
    }
  }

  async _fetchTransferOrder() {
    if (!this._toNo) return

    try {
      const response = await client.query({
        query: gql`
          query transferOrder($name: String!) {
            transferOrder(name: $name) {
              bizplace {
                name
                description
              }
              name
              issuedDate
              status
              refNo
              type
              ownTransport
              orderInventories {
                batchId
                status
                product {
                  sku
                  name
                  description
                }
              }
              updatedAt
            }
          }
        `,
        variables: {
          name: this._toNo
        }
      })

      if (!response.errors) {
        const transferOrder = response.data.transferOrder
        const orderVass = transferOrder.orderVass
        const orderInventories = transferOrder.orderInventories
        this._ownTransport = transferOrder.ownTransport
        this._status = transferOrder.status
        this.productData = { records: orderInventories }
        this._fillupTOForm(transferOrder)
      }
    } catch (e) {
      this._showToast(e)
    }
  }

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

window.customElements.define('rejected-transfer-order', RejectedTransferOrder)
