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

class PrintQuantityPopup extends localize(i18next)(LitElement) {
  static get properties() {
    return {
      printQuantity: { type: Number }
    }
  }

  static get styles() {
    return [
      css`
        :host {
          display: flex;
          flex-direction: column;
          overflow: hidden;
          background-color: var(--main-section-background-color);
          padding: 20px;
        }
        .content {
          display: flex;
          flex: 1;
          align-items: center;
          justify-content: center;
        }
        .input-row {
          display: flex;
          align-items: center;
          gap: 12px;
          width: 100%;
        }
        .input-row label {
          font-size: 14px;
          font-weight: 500;
          white-space: nowrap;
        }
        .input-row input {
          flex: 1;
          padding: 8px 12px;
          font-size: 14px;
          border: 1px solid var(--secondary-color, #ccc);
          border-radius: 4px;
        }
        .button-container {
          display: flex;
          gap: 10px;
          justify-content: center;
          margin-top: 20px;
        }
      `
    ]
  }

  constructor() {
    super()
    this.printQuantity = 1
  }

  render() {
    return html`
      <div class="content">
        <div class="input-row">
          <label>${i18next.t('label.print_quantity')}</label>
          <input
            name="printQuantity"
            type="number"
            min="1"
            .value="${this.printQuantity}"
            @input="${e => {
              this.printQuantity = parseInt(e.target.value)
            }}"
          />
        </div>
      </div>
      <div class="button-container">
        <mwc-button
          outlined
          @click="${() => {
            this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }))
            history.back()
          }}"
        >
          <mwc-icon slot="icon">close</mwc-icon>
          ${i18next.t('button.close') || 'Close'}
        </mwc-button>
        <mwc-button
          raised
          @click="${() => {
            this.dispatchEvent(
              new CustomEvent('print', {
                detail: { printQuantity: this.printQuantity },
                bubbles: true,
                composed: true
              })
            )
          }}"
        >
          <mwc-icon slot="icon">print</mwc-icon>
          ${i18next.t('button.print') || 'Print'}
        </mwc-button>
      </div>
    `
  }

  get printQuantityInput() {
    return this.shadowRoot?.querySelector('input[name=printQuantity]')
  }

  firstUpdated() {
    if (this.printQuantityInput) {
      this.printQuantityInput.focus()
      this.printQuantityInput.select()
    }
  }
}

window.customElements.define('print-quantity-popup', PrintQuantityPopup)
