import '@material/web/icon/icon.js'

import gql from 'graphql-tag'
import { css, html, LitElement } from 'lit'
import { customElement, property, query } from 'lit/decorators.js'

import { navigate } from '@operato/shell'
import { client, gqlContext } from '@operato/graphql'

const FETCH_BOARD_GQL = id => {
  return gql`
  {
    board(id:"${id}") {
      id
      name
      description
      thumbnail
    }
  }
`
}

@customElement('board-renderer')
class BoardRendererElement extends LitElement {
  static styles = [
    css`
      :host {
        display: flex;
        justify-content: center;
        position: relative;

        max-width: var(--board-renderer-max-width);
        border: var(--board-renderer-border);

        width: 100%;
      }
      span {
        position: absolute;
        bottom: 0;
        width: 100%;
        text-indent: 5px;

        font: var(--board-renderer-name-font);
        color: var(--md-sys-color-on-primary);
        background-color: var(--md-sys-color-primary);
      }
      img {
        object-fit: contain;
        max-width: 100%;
        max-height: 100%;
      }
      md-icon {
        position: absolute;
        top: 0;
        text-align: center;
        color: var(--md-sys-color-on-primary);
        background-color: var(--md-sys-color-primary);

        width: var(--board-renderer-icon-size);
        height: var(--board-renderer-icon-size);
        font: var(--board-renderer-font);
      }
      md-icon[edit] {
        right: 0;

        border-bottom-left-radius: var(--board-renderer-icon-border-radius);
      }
      md-icon[view] {
        left: 0;

        border-bottom-right-radius: var(--board-renderer-icon-border-radius);
      }
    `
  ]

  @property({ type: Object }) value: any
  @property({ type: String }) boardViewerPage?: string
  @property({ type: Object }) _value: any

  async updated(changes) {
    if (changes.has('value')) {
      if (typeof this.value == 'string' && this.value) {
        /* fetchBoard..., */
        try {
          var response = await client.query({
            query: FETCH_BOARD_GQL(this.value),
            context: gqlContext()
          })

          this._value = (response && response.data && response.data.board) || {}
        } catch (e) {
          console.error(e)
        }
      } else {
        this._value = this.value || {}
      }
    }
  }

  render() {
    var { id, name = '', thumbnail = 'image/gif' } = this._value || {}

    return id
      ? html`
          <span>${name}</span>
          <img src=${thumbnail} alt="no thumbnail!" />
          <md-icon view @mousedown=${e => this.onClickViewer(e, id)}>search</md-icon>
          <md-icon edit @mousedown=${e => this.onClickModeler(e, id)}>edit</md-icon>
        `
      : html` choose board.. `
  }

  onClickViewer(e, id) {
    e.preventDefault()
    e.stopPropagation()

    var boardViewerPage = this.boardViewerPage || 'board-viewer'

    navigate(`${boardViewerPage}/${id}${window.location.search}`)
  }

  onClickModeler(e, id) {
    e.preventDefault()
    e.stopPropagation()

    navigate(`board-modeller/${id}${window.location.search}`)
  }
}

export const BoardRenderer = (value, column, record) => {
  var { boardViewerPage = '' } = column.record.options || {}

  return html` <board-renderer .value=${value} .boardViewerPage=${boardViewerPage}></board-renderer> `
}
