import '@material/web/icon/icon.js'
import '@material/web/button/elevated-button.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'

@customElement('process-versions')
export class ProcessVersions extends LitElement {
  static styles = [
    css`
      :host {
        display: block;
        background-color: var(--main-section-background-color);
        position: relative;
        text-align: center;
        color: var(--label-color);
        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(--margin-default);
        text-align: start;
        border-bottom: var(--border-dark-color);
      }

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

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

      span md-icon {
        --md-icon-size: var(--fontsize-large);
        vertical-align: middle;
        color: var(--primary-color);
      }

      md-text-button {
        position: absolute;
        right: 3px;
        top: 3px;
        opacity: 0.8;
      }

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

  @property({ type: String }) processId?: 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>
                  <md-elevated-button @click=${() => this.revertProcessVersion(version.version)}>
                    <md-icon slot="icon">recycling</md-icon>
                    ${String(i18next.t('button.revert-process-version'))}
                  </md-elevated-button>
                </div>
              `
            )}
          `}
    `
  }

  firstUpdated() {
    this.refresh()
  }

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

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

    this.versions = response.processVersions
  }

  revertProcessVersion(version: number) {
    this.dispatchEvent(
      new CustomEvent('revert-process-version', {
        detail: {
          id: this.processId,
          version
        },
        bubbles: true,
        composed: true
      })
    )

    this.close()
  }

  close() {
    history.back()
  }
}
