import { PolymerElement, html } from '@polymer/polymer/polymer-element'
import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class'
import { PaperDialogBehavior } from '@polymer/paper-dialog-behavior/paper-dialog-behavior'
import '@polymer/paper-dialog-behavior/paper-dialog-shared-styles'
import { NeonAnimationRunnerBehavior } from '@polymer/neon-animation/neon-animation-runner-behavior'
import '@polymer/paper-dropdown-menu/paper-dropdown-menu'
import '@polymer/paper-listbox/paper-listbox'
import '@polymer/paper-item/paper-item'

import '@material/mwc-button/mwc-button'

class BoardPlayerDialog extends mixinBehaviors([NeonAnimationRunnerBehavior, PaperDialogBehavior], PolymerElement) {
  static get template() {
    return html`
      <style include="paper-dialog-shared-styles">
        :host {
          padding: 20px;
        }

        .buttons {
          padding: 5px 12px;
          text-align: right;
        }
      </style>

      <h2>Player Settings</h2>

      <div>
        <paper-dropdown-menu label="Transition Type" value="{{transition}}">
          <paper-listbox slot="dropdown-content" selected="[[selectedTransition(transition)]]">
            <template is="dom-repeat" items="[[transitions]]">
              <paper-item>[[item]]</paper-item>
            </template>
          </paper-listbox>
        </paper-dropdown-menu>
      </div>

      <template is="dom-if" if="[[_needPlaytime(transition)]]">
        <div>
          <paper-dropdown-menu label="Playtime for a Scene" value="{{playtime}}">
            <paper-listbox slot="dropdown-content" selected="[[selectedPlaytime(playtime)]]">
              <template is="dom-repeat" items="[[playtimes]]">
                <paper-item>[[item]]</paper-item>
              </template>
            </paper-listbox>
          </paper-dropdown-menu>
        </div>

        <div>
          <paper-dropdown-menu label="Columns for a Scene" value="{{columns}}">
            <paper-listbox slot="dropdown-content" selected="[[selectedColumns(columns)]]">
              <template is="dom-repeat" items="[[rowcolumns]]">
                <paper-item>[[item]]</paper-item>
              </template>
            </paper-listbox>
          </paper-dropdown-menu>
        </div>

        <div>
          <paper-dropdown-menu label="Rows for a Scene" value="{{rows}}">
            <paper-listbox slot="dropdown-content" selected="[[selectedRows(rows)]]">
              <template is="dom-repeat" items="[[rowcolumns]]">
                <paper-item>[[item]]</paper-item>
              </template>
            </paper-listbox>
          </paper-dropdown-menu>
        </div>
      </template>

      <div class="buttons"><mwc-button dialog-confirm autofocus>OK</mwc-button></div>
    `
  }

  static get is() {
    return 'board-player-dialog'
  }

  static get properties() {
    return {
      transitions: {
        type: Array,
        notify: true,
        value: ['carousel', 'flip-card', 'flip-card2', 'enlarge-grid']
      },
      transition: {
        type: String,
        value: 'carousel',
        notify: true
      },
      playtimes: {
        type: Array,
        value: [10, 30, 60, 300, 600]
      },
      rowcolumns: {
        type: Array,
        value: [1, 2, 3, 4, 5]
      },
      playtime: {
        type: Number,
        value: 30,
        notify: true
      },
      columns: {
        type: Number,
        value: 1,
        notify: true
      },
      rows: {
        type: Number,
        value: 1,
        notify: true
      }
    }
  }

  // TODO 아래 두개 함수 구현 이상함. (불필요한 것 아닌가 ?)
  selectedTransition(transition) {
    for (var i = 0; i < this.transitions.length; i++) {
      if (this.transitions[i] == transition) return i
    }
  }

  selectedPlaytime(playtime) {
    for (var i = 0; i < this.playtimes.length; i++) {
      if (this.playtimes[i] == playtime) return i
    }
  }

  selectedRows(rows) {
    for (var i = 0; i < this.rowcolumns.length; i++) {
      if (this.rowcolumns[i] == rows) return i
    }
  }

  selectedColumns(columns) {
    for (var i = 0; i < this.rowcolumns.length; i++) {
      if (this.rowcolumns[i] == columns) return i
    }
  }

  _needPlaytime(transition) {
    return transition !== 'enlarge-grid'
  }
}

customElements.define(BoardPlayerDialog.is, BoardPlayerDialog)
