import { css, html, LitElement } from 'lit'
import { customElement, query } from 'lit/decorators.js'

import { i18next, localize } from '@operato/i18n'
import { auth } from '@things-factory/auth-base/dist-client'

@customElement('change-password')
export class ChangePassword extends localize(i18next)(LitElement) {
  static styles = [
    css`
      * {
        box-sizing: border-box;
      }

      *:focus {
        outline: none;
      }

      form {
        display: flex;
        flex-direction: column;
      }

      input {
        border: var(--change-password-field-border);
        border-radius: var(--change-password-field-border-radius);
        margin: var(--change-password-field-margin);
        padding: var(--change-password-field-padding);

        font: var(--change-password-field-font);
        width: var(--change-password-field-width);
      }

      input:focus {
        border: 1px solid var(--focus-background-color);
      }

      ::placeholder {
        font-size: 0.8rem;
        text-transform: capitalize;
      }

      mwc-button {
        margin: var(--margin-narrow) auto var(--margin-default) auto;
      }

      button {
        background-color: var(--secondary-color, #394e64);
        margin: 2px 2px 10px 2px;
        height: var(--button-height, 28px);
        color: var(--button-color, #fff);
        font: var(--button-font);
        border-radius: var(--button-radius, 5px);
        border: var(--button-border, 1px solid transparent);
        line-height: 1.5;
      }

      button:hover,
      button:active {
        background-color: var(--button-active-background-color, #22a6a7);
        border: var(--button-active-border);
      }
    `
  ]

  @query('form') form!: HTMLFormElement

  render() {
    return html`
      <form>
        <div class="field">
          <input type="password" name="current_pass" placeholder=${i18next.t('text.current password')} required />
        </div>
        <div class="field">
          <input type="password" name="new_pass" placeholder=${i18next.t('text.new password')} required />
        </div>
        <div class="field">
          <input type="password" name="confirm_pass" placeholder=${i18next.t('text.confirm password')} required />
        </div>

        <mwc-button raised label="${i18next.t('text.change password')}" @click=${this.submit.bind(this)}></mwc-button>
      </form>
    `
  }

  async submit() {
    const formData = new FormData(this.form)
    let params = {}
    for (const [key, value] of formData.entries()) {
      if (!value) {
        const placeholder = (this.form.querySelector(`[name=${key}]`) as HTMLInputElement)?.placeholder
        return this.showToast(i18next.t('error.value is empty', { value: placeholder || key }))
      }
      params[key] = value
    }

    if (params['new_pass'] !== params['confirm_pass']) {
      return this.showToast(i18next.t('error.new-password-and-confirm-password-do-not-match'))
    }

    auth.changePassword(params)
    this.form.reset()
  }

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