import '@things-factory/form-ui'
import '@things-factory/grist-ui'
import '@things-factory/import-ui'

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

import {
  i18next,
  localize
} from '@things-factory/i18n-base'
import { client } from '@things-factory/shell'
import { ScrollbarStyles } from '@things-factory/styles'
import { isMobileDevice } from '@things-factory/utils'

class PutawayReplenishmentInventoryPopup extends localize(i18next)(LitElement) {
  static get styles() {
    return [
      ScrollbarStyles,
      css`
        :host {
          display: flex;
          flex-direction: column;
          overflow: hidden;
          background-color: white;
        }
        search-form {
          overflow: visible;
        }
        data-grist {
          overflow-y: auto;
          flex: 1;
        }
        [danger] {
          --mdc--theme--primary: var(--mdc-danger-button-primary-color);
        }
      `
    ]
  }

  static get properties() {
    return {
      config: Object
    }
  }

  constructor() {
    super()
  }

  render() {
    return html`
      <data-grist
        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
        .config=${this.config}
        .fetchHandler="${this.fetchHandler.bind(this)}"
      ></data-grist>
    `
  }

  async firstUpdated() {
    this.config = {
      columns: [
        {
          type: 'string',
          name: 'productSKU',
          header: i18next.t('field.sku'),
          record: { editable: false },
          width: 200
        },
        {
          type: 'string',
          name: 'cartonId',
          header: i18next.t('field.carton_id'),
          record: { editable: false },
          width: 200
        },
        {
          type: 'object',
          name: 'location',
          header: i18next.t('field.location'),
          record: { editable: false },
          width: 200
        },
        {
          type: 'number',
          name: 'qty',
          header: i18next.t('field.transfer_qty'),
          record: { editable: false },
          width: 200
        }
      ]
    }
  }

  async fetchHandler({}) {
    const replenishmentId = this.replenishmentId
    const inventoryId = this.inventoryId

    const response = await client.query({
      query: gql`
        query putawayReplenishmentInventories($replenishmentId: String!, $inventoryId: [String!]!) {
          putawayReplenishmentInventories(replenishmentId: $replenishmentId, inventoryId: $inventoryId) {
            items {
              productSKU
              cartonId
              qty
              location {
                name
              }
            }
            total
          }
        }
      `,
      variables: {
        replenishmentId: replenishmentId,
        inventoryId: inventoryId
      }
    })

    if (!response.errors) {
      return {
        records: response.data.putawayReplenishmentInventories.items || [],
        total: response.data.putawayReplenishmentInventories.total || 0
      }
    }
  }

  get dataGrist() {
    return this.shadowRoot.querySelector('data-grist')
  }
}
window.customElements.define('putaway-replenishment-inventory-popup', PutawayReplenishmentInventoryPopup)
