import '@material/web/icon/icon.js'
import '@material/web/chips/assist-chip.js'

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

import { i18next } from '@operato/i18n'
import { client } from '@operato/graphql'

import { privileged } from '@things-factory/auth-base/dist-client'

@customElement('board-versions')
export class BoardVersions extends LitElement {
  static styles = [
    css`
      :host {
        display: block;
        background-color: var(--md-sys-color-surface);
        position: relative;
        text-align: center;
        color: var(--label-color, var(--md-sys-color-on-surface));
        font: var(--label-font);
      }

      img {
        display: block;

        margin: auto;
        max-width: 100%;
        max-height: 100%;
        border-bottom: 2px solid rgba(0, 0, 0, 0.1);
      }

      div[card] {
        position: relative;
        margin: var(--spacing-medium);
        text-align: start;
        border-bottom: var(--border-dim-color);
      }

      div[info] {
        display: flex;
        align-items: center;
        gap: var(--spacing-medium);
      }

      span {
        margin-left: auto;
        font: var(--input-field-font);
        display: flex;
        align-items: center;
        gap: 5px;
      }

      span md-icon {
        font-variation-settings: 'FILL' 1;

        vertical-align: middle;
        font-size: var(--fontsize-large);
        color: var(--md-sys-color-primary);
      }

      md-assist-chip {
        position: absolute;
        right: 3px;
        top: 3px;
        opacity: 0.8;

        --md-assist-chip-elevated-container-color: var(--md-sys-color-primary);
        --md-assist-chip-label-text-color: var(--md-sys-color-on-primary);
        --md-assist-chip-leading-icon-color: var(--md-sys-color-on-primary);
      }

      @media screen and (max-width: 460px) {
        :host {
          width: 100vw;
        }
      }
    `
  ]

  @property({ type: String }) boardId?: string

  @state() versions: any[] = []

  render() {
    return html`
      ${this.versions.length == 0
        ? html` ${i18next.t('text.no released version information available')} `
        : html`
            ${this.versions.map(
              version => html`
                <div card>
                  <img src=${version.thumbnail} />
                  <div info>
                    <md-icon>pin</md-icon> ${version.version}
                    <span>
                      <md-icon>person</md-icon> ${(version.updater && version.updater.name) || 'anonymouse'}
                      <md-icon>schedule</md-icon> ${new Date(version.updatedAt).toLocaleString()}
                    </span>
                  </div>

                  ${privileged(
                    { privilege: 'mutation', category: 'board' },
                    html`
                      <md-assist-chip
                        elevated
                        label=${String(i18next.t('button.revert-board-version'))}
                        @click=${() => this.revertBoardVersion(version.version)}
                      >
                        <md-icon slot="icon">recycling</md-icon>
                      </md-assist-chip>
                    `
                  )}
                </div>
              `
            )}
          `}
    `
  }

  firstUpdated() {
    this.refresh()
  }

  async refresh() {
    if (!this.boardId) {
      return
    }

    var response = (
      await client.query({
        query: gql`
          query FetchBoardVersionsById($id: String!) {
            boardVersions(id: $id) {
              id
              version
              thumbnail
              updater {
                name
              }
              updatedAt
            }
          }
        `,
        variables: { id: this.boardId }
      })
    ).data

    this.versions = response.boardVersions
  }

  revertBoardVersion(version: number) {
    this.dispatchEvent(
      new CustomEvent('revert-board-version', {
        detail: {
          id: this.boardId,
          version
        },
        bubbles: true,
        composed: true
      })
    )

    this.close()
  }

  close() {
    history.back()
  }
}
