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 { openPopup } from '@things-factory/layout-base'
import './issue-details-popup'
import '@material/mwc-button'
import gql from 'graphql-tag'

class WorksheetInfo extends localize(i18next)(LitElement) {
  static get properties() {
    return {
      worksheetId: String,
      worksheet: Object,
      data: Object
    }
  }

  static get styles() {
    return [
      css`
        :host {
          padding: 12px;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          background-color: var(--main-section-background-color);
        }

        legend {
          margin: 0;
          padding: var(--padding-narrow) 0 var(--padding-default) 0;
          font-weight: bold;
          color: var(--legend-color);
          text-transform: uppercase;
        }
        .color-teal {
          color: #007e7f !important;
        }
        .font-bold {
          font-weight: bold;
        }
        .worksheet-info {
          display: grid;
          grid-template-columns: repeat(12, 1fr);
          grid-gap: 8px;
          color: #3a5877;
          padding: 0 0 12px 0;
          margin: 0 0 12px 0;
          border-bottom: solid 0.5px #3a5877;
        }
        .worksheet-info-title {
          grid-column: span 3;
          font-size: 12px;
          font-weight: 600;
          color: #3a5877;
        }
        .worksheet-info-description {
          grid-column: span 9;
          font-size: 12px;
        }
        .worksheet-issue-container {
          flex-grow: 1;
          overflow-y: scroll;
        }
        .worksheet-issue {
          display: flex;
          flex-direction: row;
          padding: 0 0 12px 0;
          margin: 0 0 12px 0;
          border-bottom: solid 0.5px #3a5877;
        }
        .worksheet-issue > div {
          display: flex;
          flex-direction: column;
        }
        .worksheet-issue-info {
          flex: 0 0 90%;
        }
        .worksheet-issue-info > div {
          display: grid;
          grid-template-columns: repeat(12, 1fr);
          grid-gap: 4px;
          margin-bottom: 4px;
          align-items: center;
        }
        .worksheet-issue-title {
          grid-column: span 3;
          font-size: 12px;
          color: #3a5877;
          align-self: start;
        }
        .worksheet-issue-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;
        }
        .worksheet-issue-action {
          justify-content: center;
          align-items: flex-end;
          flex: 0 0 10%;
        }
      `
    ]
  }

  constructor() {
    super()
  }

  render() {
    return html`
      ${worksheetInfo(this.worksheet)}
      <legend>Total Issue : ${this.data.length}</legend>
      <div class="worksheet-issue-container">
        ${this.data.map(issue => {
          return html`
            <div class="worksheet-issue">
              <div class="worksheet-issue-info">
                <div>
                  <label class="worksheet-issue-title color-teal font-bold">SKU</label>
                  <label class="worksheet-issue-description color-teal font-bold"
                    >${issue?.inventory.product.sku}</label
                  >
                </div>

                <div>
                  <label class="worksheet-issue-title font-bold">Product</label>
                  <label class="worksheet-issue-description">${issue?.inventory.product.name}</label>
                </div>

                <div>
                  <label class="worksheet-issue-title font-bold">Type</label>
                  <label class="worksheet-issue-description">${issue.transactionType}</label>
                </div>

                <div>
                  <label class="worksheet-issue-title font-bold">Details</label>
                  <label class="worksheet-issue-description">${issue.details}</label>
                </div>

                <div>
                  <label class="worksheet-issue-title font-bold">Status</label>
                  <label class="worksheet-issue-description">${issue.status}</label>
                </div>
              </div>
              <div class="worksheet-issue-action">
                <mwc-icon
                  class="color-teal"
                  @click=${e => {
                    this.openIssueDetailPopup(issue)
                  }}
                  >menu</mwc-icon
                >
              </div>
            </div>
          `
        })}
      </div>
    `
  }

  async openIssueDetailPopup(data) {
    let popup = await openPopup(
      html`
        <issue-details-popup
          .data=${data}
          @submit="${e => this.data.filter(data => data.id == e.detail)}"
        ></issue-details-popup>
      `,
      {
        backdrop: true,
        size: 'medium',
        title: i18next.t('title.issue_details')
      }
    )
  }
}

window.customElements.define('worksheet-info', WorksheetInfo)

function worksheetInfo(worksheet) {
  return html`
    <div class="worksheet-info">
      <label class="worksheet-info-title">Name</label>
      <label class="worksheet-info-description">: ${worksheet.name}</label>

      <label class="worksheet-info-title">Company</label>
      <label class="worksheet-info-description">: ${worksheet.bizplaceName}</label>

      <label class="worksheet-info-title">Ref 2</label>
      <label class="worksheet-info-description">: ${worksheet.groupedRefNo2}</label>

      <label class="worksheet-info-title">Start Time</label>
      <label class="worksheet-info-description">: ${worksheet.startedAt}</label>

      <label class="worksheet-info-title">Status</label>
      <label class="worksheet-info-description">: ${worksheet.status}</label>
    </div>
  `
}
