import '@material/web/button/elevated-button.js'

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

import { client, gqlContext } from '@operato/graphql'
import { i18next, localize } from '@operato/i18n'
import { OxPrompt } from '@operato/popup/ox-prompt.js'

@customElement('ownership-transfer-popup')
class OwnershipTransferPopup extends localize(i18next)(LitElement) {
  static styles = [
    css`
      :host {
        display: flex;
        flex-direction: column;
        background-color: var(--md-sys-color-background);
        padding: var(--spacing-large);
        overflow: auto;
      }
      .container {
        display: flex;
        flex-direction: column;
        flex: 1;
      }
      input {
        border: var(--border-dim-color);
        border-radius: var(--border-radius);
        margin: var(--input-margin);
        padding: var(--input-padding);
        min-width: 250px;
        font: var(--input-font);
      }
      .input-container {
        margin: auto;
        display: flex;
      }
      .input-container md-elevated-button {
        margin: auto 0px auto var(--spacing-large);
      }
    `
  ]

  @property({ type: Object }) user: any

  @query('input[name=email]') emailInput!: HTMLInputElement

  render() {
    return html`
      <div class="container">
        <div>${i18next.t('text.please enter the email of the user you want to transfer owner')}</div>
        <div class="input-container">
          <input name="email" />
          <md-elevated-button @click=${this.transferOwnership}>${i18next.t('button.confirm')}</md-elevated-button>
        </div>
      </div>
    `
  }

  async transferOwnership() {
    if (!this.doubleCheckEmail()) {
      this.showToast(i18next.t('text.email is not matched'))

      return
    }

    if (
      await OxPrompt.open({
        title: i18next.t('text.are_you_sure'),
        text: i18next.t('text.are_you_sure_to_transfer_owner'),
        confirmButton: { text: i18next.t('button.confirm') },
        cancelButton: { text: i18next.t('button.cancel') }
      })
    ) {
      const response = await client.mutate({
        mutation: gql`
          mutation transferOwner($username: String!) {
            transferOwner(username: $username)
          }
        `,
        variables: { username: this.user.username || this.user.email },
        context: gqlContext()
      })

      if (!response.errors?.length) {
        await OxPrompt.open({
          type: 'success',
          title: i18next.t('text.completed'),
          text: i18next.t('text.owner_transfer_completed'),
          confirmButton: { text: i18next.t('button.confirm') }
        })

        history.back()

        this.dispatchEvent(new CustomEvent('ownershipTransferred', { bubbles: true, composed: true }))
      }
    } else {
      history.back()
    }
  }

  doubleCheckEmail() {
    return this.emailInput.value === this.user.email
  }

  showToast(message) {
    document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))
  }
}
