import gql from 'graphql-tag'
import { i18next, localize } from '@things-factory/i18n-base'
import { client, CustomAlert } from '@things-factory/shell'
import { css, html, LitElement } from 'lit-element'
import { SingleColumnFormStyles } from '@things-factory/form-ui'
import { showToast } from '../../../util'

class IssueDetailsPopup extends localize(i18next)(LitElement) {
  static get properties() {
    return {
      data: Object
    }
  }

  static get styles() {
    return [
      SingleColumnFormStyles,
      css`
        :host {
          display: flex;
          flex-direction: column;
          overflow-y: auto;
          background-color: var(--main-section-background-color);
        }
        .color-teal {
          color: #007e7f;
        }
        .font-bold {
          font-weight: bold;
        }
        .container {
          display: flex;
          flex-direction: column;
          width: auto;
          margin: 20px;
          height: 100vh;
        }
        .button-container {
          justify-self: center;
        }
        .title {
          grid-column: span 3;
          font-size: 12px;
          color: #3a5877;
          align-self: start;
        }
        .description {
          grid-column: span 9;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          font-size: 12px;
          color: #3a5877;
          align-self: start;
        }
        .text-left {
          text-align: left !important;
        }
        .mt-5px {
          margin-top: 5px;
        }
        .info {
          display: grid;
          grid-template-columns: repeat(12, 1fr);
          grid-gap: 8px;
          color: #3a5877;
          padding: 0 0 12px 0;
          margin: 0 0 12px 0;
          flex-direction: column;
        }
        .info input,
        .info textarea {
          grid-column: span 12;
        }
        .info label {
          text-transform: capitalize;
        }
        [danger] {
          --mdc-theme-primary: var(--mdc-danger-button-primary-color);
        }
        [raised] {
          width: 100%;
          margin-top: 10px;
        }
        [back-button] {
          --mdc-theme-primary: var(--main-section-background-color);
          border: solid 1px #007e7f;
          border-radius: 4px;
        }
      `
    ]
  }

  render() {
    return html`
      <div class="container">
        <div class="info">
          <label class="title font-bold">SKU No.</label>
          <label class="description">: ${this.data.inventory.product.sku}</label>
          <label class="mt-5px text-left title font-bold">${i18next.t('label.issue_type')}</label>
          <input name="issue" readonly value=${this.data.transactionType} />
          <label class="mt-5px text-left title font-bold">${i18next.t('label.details')} (Optional)</label>
          <textarea name="details" rows="12" readonly>${this.data.details}</textarea>
        </div>
        <div class="button-container">
          ${this.data.status === 'PENDING'
            ? html`<mwc-button
                raised
                danger
                @click="${e => {
                  this._cancelIssue(e)
                }}"
                label="${i18next.t('button.cancel')}"
              ></mwc-button>`
            : ''}
          <mwc-button
            raised
            back-button
            @click="${e => {
              this._back(e)
            }}"
            ><label class="color-teal">${i18next.t('button.back')}</label></mwc-button
          >
        </div>
      </div>
    `
  }

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

      if (result.value) {
        const response = await client.mutate({
          mutation: gql`
            mutation cancelInventoryChanges($inventoryChangeId: String!) {
              cancelInventoryChanges(inventoryChangeId: $inventoryChangeId)
            }
          `,
          variables: { inventoryChangeId: this.data.id }
        })
        if (!response.error) {
          showToast({type: 'success', message: 'Issue cancelled succesfully'})
          this.dispatchEvent(new CustomEvent('submit', { detail: this.data.id }))
        }
      }
    } catch (e) {
      showToast(e)
    }
  }

  _back(e) {
    history.back()
  }
}

window.customElements.define('issue-details-popup', IssueDetailsPopup)
