import '@things-factory/board-ui'
import '@material/mwc-icon'

import gql from 'graphql-tag'
import { css, html, LitElement } from 'lit'

import { client } from '@things-factory/shell'

export default class BoardTileList extends LitElement {
  static get styles() {
    return [
      css`
        :host {
          overflow: auto;
          padding: var(--popup-content-padding);
          display: grid;

          grid-template-columns: var(--card-list-template);
          grid-auto-rows: var(--card-list-rows-height);
          grid-gap: 20px;
          --mdc-button-horizontal-padding: var(--padding-default);
        }

        [card] {
          position: relative;
          align-items: center;
          overflow: hidden;
        }

        [card][create] {
          overflow: visible;
          background-color: initial;
        }

        [card]:hover {
          cursor: pointer;
        }

        [name] {
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          margin-top: var(--margin-narrow);
          width: calc(100% - 45px);
          color: var(--primary-text-color);
          font-weight: bolder;
          font-size: var(--fontsize-small);
        }

        img {
          display: block;

          margin: auto;
          max-width: 100%;
          max-height: 100%;
        }

        mwc-icon[iconBtn] {
          float: right;
          margin-top: -20px;
          margin-left: 2px;
          color: var(--board-list-star-color);
          font-size: 1.4em;
        }
        mwc-icon[info] {
          color: var(--primary-color);
        }

        mwc-icon[iconBtn][favored],
        mwc-icon[info]:hover {
          color: var(--board-list-star-active-color);
        }

        a {
          display: block;
          border-radius: var(--card-list-border-radius);
          border: var(--border-dark-color);
          box-sizing: border-box;
          background-color: var(--card-list-background-color);
          margin: 0px;
          height: calc(100% - 25px);
        }

        :host > *:hover [info] {
          opacity: 1;
          -webkit-transition: opacity 0.8s;
          -moz-transition: opacity 0.8s;
          -o-transition: opacity 0.8s;
          transition: opacity 0.8s;
        }
      `
    ]
  }

  static get properties() {
    return {
      creatable: {
        type: Boolean,
        attribute: 'creatable'
      },
      boards: Array,
      favorites: Array,
      groups: Array,
      group: String
    }
  }

  render() {
    var boards = this.boards || []

    return html`
      ${this.creatable
        ? html`
            <board-creation-card
              .groups=${this.groups}
              .defaultGroup=${this.group}
              @create-board=${e => this.onCreateBoard(e)}
              card
              create
            ></board-creation-card>
          `
        : html``}
      ${boards.map(
        board =>
          html`
            <div card>
              <a href="board-viewer/${board.id}"> <img src=${board.thumbnail} /> </a>

              <div name>${board.name}</div>
              <!-- <div description>${board.description}</div> -->

              <mwc-icon
                iconBtn
                info
                @click=${e => {
                  this.infoBoard(board.id)
                  e.preventDefault()
                }}
                >info</mwc-icon
              >

              ${(this.favorites || []).includes(board.id)
                ? html` <mwc-icon iconBtn favored @click=${e => this.removeFavorite(board.id)}>star</mwc-icon> `
                : html` <mwc-icon iconBtn @click=${e => this.addFavorite(board.id)}>star_border</mwc-icon> `}
            </div>
          `
      )}
    `
  }

  updated(changes) {
    var creationCard = this.shadowRoot.querySelector('board-creation-card')
    if (creationCard) {
      creationCard.reset()
    }
  }

  onCreateBoard(e) {
    this.dispatchEvent(
      new CustomEvent('create-board', {
        detail: e.detail
      })
    )
  }

  infoBoard(boardId) {
    this.dispatchEvent(
      new CustomEvent('info-board', {
        detail: boardId
      })
    )
  }

  async removeFavorite(boardId) {
    await client.query({
      query: gql`
        mutation {
          deleteFavorite(routing: "${boardId}")
        }
      `
    })

    this.refreshFavorites()
  }

  async addFavorite(boardId) {
    await client.query({
      query: gql`
        mutation {
          createFavorite(favorite: {
            routing: "${boardId}"
          }) {
            id
            routing
          }
        }
      `
    })

    this.refreshFavorites()
  }

  async refreshFavorites() {
    this.dispatchEvent(new CustomEvent('refresh-favorites'))
  }
}

window.customElements.define('board-tile-list', BoardTileList)
