import '@material/mwc-textfield'

import gql from 'graphql-tag'
import { css, html, LitElement } from 'lit'
import { customElement, 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('create-role')
class CreateRole extends localize(i18next)(LitElement) {
  static styles = css`
    :host {
      --mdc-text-field-fill-color: var(--theme-white-color);
      background-color: var(--theme-white-color);
      margin: var(--margin-wide) 0;
      padding: var(--padding-wide);
      border-radius: var(--border-radius);
      box-shadow: var(--box-shadow);

      display: grid;
      grid-template-columns: 1fr 2fr auto;
      gap: 5px 15px;
      clear: both;
      max-width: var(--input-container-max-width);

      align-items: center;
    }

    mwc-button {
      margin: var(--input-margin);
    }

    @media screen and (max-width: 480px) {
      :host {
        grid-template-columns: 1fr 1fr;
      }

      mwc-button {
        grid-column: span 2;

        margin: var(--input-margin);
      }
    }
  `

  @query('[name=name]') nameInput!: HTMLInputElement
  @query('[name=description]') descriptionInput!: HTMLInputElement

  render() {
    return html`
      <mwc-textfield
        type="text"
        name="name"
        label=${String(i18next.t('label.x name', { x: i18next.t('label.role') }))}
      ></mwc-textfield>
      <mwc-textfield
        type="text"
        name="description"
        label=${String(i18next.t('label.x description', { x: i18next.t('label.role') }))}
      ></mwc-textfield>

      <mwc-button
        @click=${this.onCreateRole.bind(this)}
        outlined
        label=${String(i18next.t('button.create'))}
      ></mwc-button>
    `
  }

  async onCreateRole() {
    let role: { name?: string; description?: string } = {}

    const name = this.nameInput.value.trim()
    const description = this.descriptionInput.value

    if (!name) {
      return this.showToast(i18next.t('error.value is empty', { value: i18next.t('field.name') }))
    }

    role.name = name
    role.description = description

    if (
      await OxPrompt.open({
        title: i18next.t('text.are_you_sure'),
        text: i18next.t('text.do_you_want_to_create_x', { x: i18next.t('label.role') }),
        confirmButton: { text: i18next.t('button.confirm') },
        cancelButton: { text: i18next.t('button.cancel') }
      })
    ) {
      const response = await client.mutate({
        mutation: gql`
          mutation createRole($role: NewRole!) {
            createRole(role: $role) {
              name
            }
          }
        `,
        variables: { role },
        context: gqlContext()
      })

      if (!response.errors) {
        await this.dispatchEvent(new CustomEvent('fetch-roles'))

        await OxPrompt.open({
          type: 'success',
          title: i18next.t('text.completed'),
          text: i18next.t('text.data_uploaded_successfully'),
          confirmButton: { text: i18next.t('button.confirm') }
        })

        this.nameInput.value = ''
        this.descriptionInput.value = ''
      }
    }
  }

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