import { LitElement, html, css } from 'lit-element'
import { notifyChangeEvent } from '@things-factory/utils'
import '@material/mwc-button'

import './robot-arm-pose-list-item'

const ZERO = { x: 0, y: 0, z: 0, u: 0, v: 0, w: 0 }

export class RobotArmPoseListInput extends LitElement {
  static get styles() {
    return css`
      :host {
        flex: 1;

        display: block;
        overflow: auto;
      }

      [pose] {
        display: flex;
        flex-direction: row;
      }

      [pose] robot-arm-pose-list-item {
        flex: 1;
      }
      mwc-icon-button {
        width: 34px;
        --mdc-icon-button-size: 34px;
        max-height: 32px;
      }
      [moveBtn] {
        width: 18px;
        height: 18px;
        --mdc-icon-button-size: 18px;
        --mdc-icon-size: 14px;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 15px;
        margin: 5px 4px 0 0;
        background-color: var(--primary-color);
        color: #fff;
      }
      [listFunctionBtn] {
        width: 32px;
        --mdc-icon-button-size: 32px;
        --mdc-icon-size: 22px;
        max-height: 32px;
        background-color: #777;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        color: #fff;
      }
    `
  }

  static get properties() {
    return {
      value: Array,
      connection: String
    }
  }

  render() {
    const poses = this.value || []
    const connection = this.connection

    return html`
      ${poses.map((pose, index) => {
        return html`
          <div pose added @change=${e => this.onchange(e)}>
            <mwc-icon-button
              dense
              @click=${e => this.onMoveDown(e, index)}
              icon="arrow_downward"
              moveBtn
            ></mwc-icon-button>
            <mwc-icon-button dense @click=${e => this.onMoveUp(e, index)} icon="arrow_upward" moveBtn></mwc-icon-button>
            <robot-arm-pose-list-item .connection=${connection} .value=${pose}></robot-arm-pose-list-item>
            <mwc-icon-button
              dense
              @click=${e => this.onClickDelete(e)}
              icon="delete_forever"
              listFunctionBtn
            ></mwc-icon-button>
          </div>
        `
      })}

      <div pose add>
        <mwc-icon-button dense></mwc-icon-button>
        <mwc-icon-button dense></mwc-icon-button>

        <robot-arm-pose-list-item
          id="add-pose-id"
          .connection=${connection}
          .value=${{ pose: { ...ZERO } }}
          @change=${e => e.stopPropagation()}
        ></robot-arm-pose-list-item>

        <mwc-icon-button dense @click=${e => this.onClickAdd()} icon="playlist_add" listFunctionBtn></mwc-icon-button>
      </div>
    `
  }

  extractPose(element) {
    return element.querySelector('robot-arm-pose-list-item')?.value
  }

  async onClickAdd(e) {
    const input = this.renderRoot.querySelector('#add-pose-id')
    // const pose = await input.setByCurrentPose()
    const value = input.value

    this.value = [...(this.value || []), value]

    notifyChangeEvent(this, this.value)
  }

  onClickDelete(e) {
    var target = e.target
    var parent = target.parentElement

    var poses = this.renderRoot.querySelectorAll('div[added]')

    this.value = Array.from(poses)
      .filter(pose => parent !== pose)
      .map(pose => this.extractPose(pose))

    notifyChangeEvent(this, this.value)
  }

  onMoveUp(e, index) {
    if (index == 0) {
      return
    }

    const swap = this.value.splice(index - 1, 2)
    this.value.splice(index - 1, 0, swap[1], swap[0])

    this.value = [...this.value]

    notifyChangeEvent(this, this.value)
  }

  onMoveDown(e, index) {
    if (index == this.value.length - 1) {
      return
    }

    const swap = this.value.splice(index, 2)
    this.value.splice(index, 0, swap[1], swap[0])

    this.value = [...this.value]

    notifyChangeEvent(this, this.value)
  }

  onchange(e) {
    e.stopPropagation()

    var poses = this.renderRoot.querySelectorAll('div[added]')
    this.value = Array.from(poses).map(pose => this.extractPose(pose))

    notifyChangeEvent(this, this.value)
  }
}

customElements.define('robot-arm-pose-list-input', RobotArmPoseListInput)
