import { i18next, localize } from '@things-factory/i18n-base'
import { css, html, LitElement } from 'lit-element'
import '@material/mwc-button'

class ReleaseGoodInfo extends localize(i18next)(LitElement) {
  static get properties() {
    return {
      releaseGoodNo: String,
      data: Object
    }
  }

  static get styles() {
    return [
      css`
        :host {
          padding: 12px;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          background-color: var(--main-section-background-color);
        }
        .text-14 {
          font-size: 14px !important;
          line-height: 1.5 !important;
        }
        .color-teal {
          color: #007e7f !important;
        }
        .font-bold {
          font-weight: bold;
        }
        .order-no {
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
          border-bottom: 2px black;
        }
        .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;
        }
        .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;
        }
      `
    ]
  }

  render() {
    return html`
      <label class="text-14 font-bold order-no">Order No.: ${this.data?.releaseGood?.name || ''}</label>

      <div class="worksheet-info">
        <label class="worksheet-info-title">Attention</label>
        <label class="worksheet-info-description">: ${this.data?.releaseGood?.attentionTo || ''}</label>

        <label class="worksheet-info-title">Company</label>
        <label class="worksheet-info-description">: ${this.data?.releaseGood?.attentionCompany || ''}</label>

        <label class="worksheet-info-title">Ref 1</label>
        <label class="worksheet-info-description">: ${this.data?.releaseGood?.refNo || ''}</label>

        <label class="worksheet-info-title">Ref 2</label>
        <label class="worksheet-info-description">: ${this.data?.releaseGood?.refNo2 || ''}</label>

        <label class="worksheet-info-title">Ref 3</label>
        <label class="worksheet-info-description">: ${this.data?.releaseGood?.refNo3 || ''}</label>

        <label class="worksheet-info-title">${i18next.t('field.rtm')}</label>
        <label class="worksheet-info-description">: ${this.data?.releaseGood?.rtm || ''}</label>

        <label class="worksheet-info-title">Remark</label>
        <label class="worksheet-info-description">: ${this.data?.releaseGood?.remark || ''}</label>

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

        <label class="worksheet-info-title">Status</label>
        <label class="worksheet-info-description">: ${this.data?.releaseGood?.status || ''}</label>

        <label class="worksheet-info-title">Address 1</label>
        <label class="worksheet-info-description">: ${this.data?.releaseGood?.deliveryAddress1 || ''}</label>

        <label class="worksheet-info-title">Address 2</label>
        <label class="worksheet-info-description">: ${this.data?.releaseGood?.deliveryAddress2 || ''}</label>
      </div>
    `
  }
}

window.customElements.define('release-good-info', ReleaseGoodInfo)
