import '@things-factory/grist-ui'

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

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

class SelectManifestPopup extends localize(i18next)(LitElement) {
  static get styles() {
    return [
      ScrollbarStyles,
      css`
        :host {
          display: flex;
          flex-direction: column;
          overflow: hidden;
          background-color: white;
          width: 300px;
          height: 200px;
        }

        #courier {
          width: 155px;
          height: 35px;
        }

        .container {
          display: flex;
          justify-content: center;
        }

        .select-courier {
          display: flex;
          flex-flow: column wrap;
          transform: translateX(55%);
          align-items: center;
          gap: 10px;
        }

        .button-container {
          transform: translateX(-45%);
          display: flex;
          margin-top: 130px;
        }

        .button-container input {
          margin: 0 5px;
        }

        .button-container input[class='cancel'] {
          background-color: white;
          color: red;
          padding: 10px 20px;
          border: 2px solid red;
          border-radius: 5px;
          font-weight: bold;
          padding: 8px 22px;
          margin-right: 10px;
        }

        .button-container input[class='confirm'] {
          background-color: #117e7f;
          color: white;
          padding: 10px 20px;
          border: 1px solid white;
          border-radius: 5px;
          font-weight: bold;
        }

        .courierName h2 {
          font: 12px;
          color: rgb(58, 88, 119);
        }

        label[for='courier-name'] {
          white-space: nowrap;
        }

        .courierName h5 {
          white-space: nowrap;
        }

        h5 {
          margin: 2px;
        }

        .wide-dropdown {
          width: 200px;
        }
      `
    ]
  }

  static get properties() {
    return {
      shippingCourier: String
    }
  }

  render() {
    return html` <div class="container">
      <div class="select-courier">
        <label for="courier-name">New Courier Scanned:</label>
        <div class="courierName">
          <h5>${this.shippingCourier}</h5>
        </div>
        <select id="courier" class="wide-dropdown">
          <option value="newManifest">Create New Manifest</option>
          <option value="existingManifest">Existing Manifest</option>
        </select>
      </div>
      <div class="button-container">
        <input type="button" value="Confirm" class="confirm" @click=${() => this._createLoadingManifest()} />
        <input type="button" value="Cancel" class="cancel" @click=${this.closePopup} />
      </div>
    </div>`
  }

  closePopup() {
    history.back()
  }

  async _createLoadingManifest() {
    try {
      const selectedOption = this.shadowRoot.getElementById('courier').value

      if (selectedOption === 'newManifest') {
        this.dispatchEvent(new CustomEvent('manifestSelected', { detail: true, bubbles: true, composed: true }))
      } else {
        navigate('existing_manifest_list')
      }
    } catch (e) {
      this._showToast(e)
    }
  }

  _showToast({ type, message }) {
    document.dispatchEvent(
      new CustomEvent('notify', {
        detail: {
          type,
          message
        }
      })
    )
  }
}

window.customElements.define('select-manifest-popup', SelectManifestPopup)
