import { i18next, localize } from '@things-factory/i18n-base'
import { navigate, client } from '@things-factory/shell'
import { css, html, LitElement } from 'lit-element'
import { WORKSHEET_STATUS } from '../../constants'
import '@material/mwc-button'
import gql from 'graphql-tag'

class ShowMyLoadingWorksheetListPopup extends localize(i18next)(LitElement) {
  static get properties() {
    return {
      pendingNum: Number,
      loadingNum: Number,
      userId: String,
      type: String
    }
  }

  static get styles() {
    return [
      css`
        :host {
          display: flex;
          flex-direction: column;
          justify-content: center;
          overflow: hidden;
          background-color: var(--main-section-background-color);
        }
        .button-container {
          display: flex;
          flex-direction: column;
          height: 100vh;
          justify-content: space-evenly;
          padding: 0 20px;
          margin: var(--button-container-margin);
          text-align: var(--button-container-align);
          background-color: var(--button-container-background);
        }
      `
    ]
  }

  render() {
    const pendingLabel = `${i18next.t('label.pending')} (${this.pendingNum || 0})`
    const loadingLabel = `${i18next.t('label.loading')} (${this.loadingNum || 0})`

    return html`
      <div class="button-container">
        <mwc-button raised @click=${this.goToPendingList.bind(this)} label="${pendingLabel}"></mwc-button>
        <mwc-button raised @click=${this.goToLoadingList.bind(this)} label="${loadingLabel}"></mwc-button>
      </div>
    `
  }

  async firstUpdated() {
    await this.getPickingAssignmentStatus()
  }

  goToPendingList() {
      navigate(`single_outbound_worksheets?status=${WORKSHEET_STATUS.DEACTIVATED.value}&assigneeId=${this.userId}`)
  }

  goToLoadingList() {
      navigate(`single_outbound_worksheets?status=${WORKSHEET_STATUS.EXECUTING.value}&assigneeId=${this.userId}`)
  }

  async getPickingAssignmentStatus() {
    const response = await client.query({
      query: gql`
        query {
          myLoadingAssignmentStatus {
            userId
            pending {
              id
            }
            loading {
              id
            }
          }
        }
      `
    })

    if (!response.errors) {
      const result = response.data.myLoadingAssignmentStatus

      this.userId = result.userId
      this.pendingNum = result.pending?.length
      this.loadingNum = result.loading?.length
    }
  }
}

window.customElements.define('show-my-loading-worksheet-list-popup', ShowMyLoadingWorksheetListPopup)
