import { LitElement, css, html } from 'lit'
import { property, query, state } from 'lit/decorators.js'
import type { DirectiveResult } from 'lit/directive'
import type { ClassMapDirective } from 'lit/directives/class-map.js'
import { classMap } from 'lit/directives/class-map.js'
import { ifDefined } from 'lit/directives/if-defined.js'
import { when } from 'lit/directives/when.js'
import { localizeManager, localized } from '../../dependencies'
import { customElementIfNotExist } from '../../utils/customElementIfNotExist'
import { UsBaseElement } from '../base/UsBaseElement'
import { ETextVariant } from './model/ETextVariant'
import type { IPolicyProp } from './model/IPolicyProp'
import type { TTextAlign } from './model/TTextAlign'
import UsPolicy_css from './policy.pcss'

import '../popup/UsPopup'

declare global {
  interface HTMLElementTagNameMap {
    'us-policy': UsPolicy
  }
}

@customElementIfNotExist('us-policy')
@localized()
export class UsPolicy extends LitElement implements IPolicyProp {
  static styles = [
    UsBaseElement.styles,
    css([UsPolicy_css] as TemplateStringsArray | any),
  ]

  @property() textVariant = ETextVariant.DEFAULT
  @property() textAlign: TTextAlign = 'center'
  @property() buttonName = localizeManager.next()
  @property() url!: string
  @property() policy!: string
  @property() terms!: string
  @property({ type: Boolean }) openInPopup = false
  @property() popupWidth = '320px'
  @property() popupMaxHeight = '320px'
  @property({ type: Boolean }) inline = true
  @property({ type: String, attribute: 'data-testid', reflect: true })
    dataTestId = 'policy'

  @state() modalName: 'policy' | 'terms' = 'policy'
  @state() showPopup = false

  @query('slot[name=popup]') slotPopup!: HTMLSlotElement

  render() {
    const linkToPolicy = this.policy || this.url
    const linkToTerms = this.terms || this.url

    const policyElement = this.getLinkElement('policy', linkToPolicy)
    const termsElement = this.getLinkElement('terms', linkToTerms)

    return html`
      <div class=${this.getPolicyClasses()}>
        ${when(this.textVariant === ETextVariant.DEFAULT, () =>
          localizeManager.policy_default(this.buttonName, policyElement, termsElement),
        )}
        ${when(this.textVariant === ETextVariant.DEFAULT_BUREAU, () =>
          localizeManager.policy_default_bureaus(this.buttonName, policyElement, termsElement),
        )}
        ${when(this.textVariant === ETextVariant.SIMPLE, () => html`
          ${policyElement}
          ${termsElement}
        `)}
        ${when(this.openInPopup, () => html`
          <us-popup
            variant="preview"
            ?show=${this.showPopup}
            boxShadow
            overlay
            position="right"
            scrollable
            name=${this.getLinkText(this.modalName)}
            width=${this.popupWidth}
            height="100%"
            maxHeight=${this.popupMaxHeight}
            @close=${this.closePopup}
          >
            <slot name="popup"></slot>
          </us-popup>
        `)}
      </div>
    `
  }

  closePopup() {
    this.showPopup = false
  }

  handleLinkClickEvent(e: Event) {
    e.preventDefault()

    const target = e.target as any
    if (!target)
      return

    this.handleLinkClick(target.name)
  }

  handleLinkClick(name: 'policy' | 'terms') {
    this.modalName = name
    this.showPopup = true

    const slotElements = this.slotPopup.assignedElements({ flatten: true })
    const href = (name === 'policy' ? (this.policy || this.url) : (this.terms || this.url))

    if (slotElements.length) {
      slotElements[0].setAttribute('policyType', this.modalName)
      slotElements[0].setAttribute('href', href)
    }
  }

  getLinkElement(linkTo: 'policy' | 'terms', link?: string, alternativeText?: string) {
    return html`
      <a
        tabindex="0"
        name=${linkTo}
        target="_blank"
        href=${ifDefined(this.openInPopup ? undefined : link)}
        @keydown=${(ev: KeyboardEvent) => this.keyDownAction(ev, linkTo)}
        @click=${this.openInPopup ? this.handleLinkClickEvent : null}
      >${alternativeText || this.getLinkText(linkTo)}</a>
    `
  }

  keyDownAction(event: KeyboardEvent, name: 'policy' | 'terms') {
    if (event.code === 'Enter' && this.openInPopup)
      this.handleLinkClick(name)
  }

  getLinkText(linkTo: 'policy' | 'terms') {
    switch (linkTo) {
      case 'policy': return localizeManager.privacy_policy()
      case 'terms': return localizeManager.terms_of_use()
    }
  }

  getPolicyClasses(): DirectiveResult<typeof ClassMapDirective> {
    return classMap({
      'us-policy': true,
      'us-policy_inline': this.inline,
      [`us-policy_variant_${this.textVariant}`]: true,
      [`us-policy_text_${this.textAlign}`]: true,
    })
  }
}