import { LitElement, css, html, svg } from 'lit'
import { property, state } from 'lit/decorators.js'
import type { DirectiveClass, DirectiveResult } from 'lit/directive.js'
import { unsafeSVG } from 'lit/directives/unsafe-svg.js'
import { map } from 'lit/directives/map.js'
import { classMap } from 'lit/directives/class-map.js'
import { when } from 'lit/directives/when.js'
import { formatNumber } from '@upswot/core'
import { dispatchCustomEvent } from '../../utils/dispatchCustomEvent'
import { customElementIfNotExist } from '../../utils/customElementIfNotExist'
import { getLocale } from '../../dependencies'
import { UsBaseElement } from '../base/UsBaseElement'
import UsCurrenciesSwitcher_css from './currenciesSwitcher.pcss'
import type { ICurrency } from './models/ICurrency'

import '../loader/UsLoader'
import '../button/UsButton'

declare global {
  interface HTMLElementTagNameMap {
    'us-currencies-switcher': UsCurrenciesSwitcher
  }
}

@customElementIfNotExist('us-currencies-switcher')
export class UsCurrenciesSwitcher extends LitElement {
  static styles = [
    UsBaseElement.styles,
    css([UsCurrenciesSwitcher_css] as TemplateStringsArray | any),
  ]

  @property({ type: Object }) activeCurrency = {} as ICurrency
  @property({ type: Array }) switcherData: ICurrency[] = []
  @property({ type: Boolean }) isLoading = false
  @property({ type: String, attribute: 'data-testid', reflect: true }) dataTestId = 'switcher_currencies'
  @property({ type: String }) popupTitle = ''
  @property({ type: String }) mainText = ''
  @property({ type: String }) buttonText = ''
  @property({ type: String }) currenciesSwitcherTotal = ''
  @property({ type: String }) currenciesSwitcherPay = ''
  @property({ type: String }) currenciesSwitcherReceive = ''
  @property({ type: Boolean }) readonly = false

  @state() isSwitcherOpen = false
  @state() selectedCurrency = this.activeCurrency

  disconnectedCallback() {
    super.disconnectedCallback()
  }

  render() {
    return html`
      <div class="currencies-switcher">
        <us-button 
          variant="tertiary-neutral" 
          size="md" 
          ?disabled=${this.readonly}
          @click="${this.handleOpenSwitcher}"
        >
          ${this.getCurrencyIcon(this.activeCurrency.icon, true)}
          ${this.activeCurrency.charCode}
        </us-button>
        <us-popup
          position="right"
          width="376px"
          height="100%"
          name="${this.popupTitle}"
          variant="preview"
          noContentPadding
          scrollable
          overlay
          ?show=${this.isSwitcherOpen}
          @close="${this.handleCloseSwitcher}"
        >
          <div class="currencies-switcher__container">
            <div class="${this.getSwitcherBodyClasses()}">
              ${when(this.isLoading, () => html`
                <div class="switcher-loader">
                  <us-loader
                    data-testid="loader"
                    type="infinity"
                  ></us-loader>
                </div>
              `, () => html`
                <p class="main-text">${this.mainText}</p>
                ${this.renderCurrenciesSwitcherItem()}`,
              )}
            </div>
          </div>

          <div class="currencies-switcher__footer" slot="afterContent">
            <us-button variant="primary" size="md" full @click="${this.handleConfirmSwitcher}">
              ${this.buttonText}
            </us-button>
          </div>
        </us-popup>
      </div>
    `
  }

  renderCurrenciesSwitcherItem() {
    return map(this.switcherData, (item: ICurrency) => html`
      <div 
        tabindex="0" 
        class="${this.getCurrenciesSwitcherItemClasses(item)}" 
        @click="${(e: MouseEvent) => this.handleSetActiveCurrency(e, item)}"
        @keydown="${(e: KeyboardEvent) => this.handleSetActiveCurrency(e, item)}"
      >
        <div class="currencies-switcher__item-currency">
          <div class="img-container">
            ${this.getCurrencyIcon(item.icon)}
          </div>
          <span>${item.charCode}</span>
        </div>
        ${when(item.total !== undefined && item.total !== null, () => html`
          <div class="currencies-switcher__item-total">
            <span class="item-total-amount">${this.getFormatNumber(item.total || 0)}</span>
            <p class="item-total-block-name">${this.currenciesSwitcherTotal}</p>
          </div>
        `, () => html`
          <div class="currencies-switcher__item-pay-receive">
            <div class="section">
              <span>${this.getFormatNumber(item.paidAmount || 0)}</span>
              <p>${this.currenciesSwitcherPay}</p>
            </div>
            <div class="section">
              <span>${this.getFormatNumber(item.receivedAmount || 0)}</span>
              <p>${this.currenciesSwitcherReceive}</p>
            </div>
          </div>
        `)}
      </div>
    `)
  }

  getSwitcherBodyClasses(): DirectiveResult<DirectiveClass> {
    return classMap({
      'switcher-body': true,
      'switcher-body_loading': this.isLoading,
    })
  }

  getCurrenciesSwitcherItemClasses(item: ICurrency): DirectiveResult<DirectiveClass> {
    const selected = ('charCode' in this.selectedCurrency) ? this.selectedCurrency : this.activeCurrency

    return classMap({
      'currencies-switcher__container-item': true,
      'active_switcher': item.charCode === selected.charCode,
    })
  }

  async handleOpenSwitcher() {
    this.selectedCurrency = this.activeCurrency
    this.isSwitcherOpen = true
    dispatchCustomEvent('handleOpenSwitcher', null, this, false, false)
  }

  handleCloseSwitcher() {
    this.isSwitcherOpen = false
    this.selectedCurrency = {} as ICurrency
    dispatchCustomEvent('handleCloseSwitcher', null, this, false, false)
  }

  handleConfirmSwitcher() {
    this.isSwitcherOpen = false
    dispatchCustomEvent('handleConfirmSwitcher', this.selectedCurrency, this, false, false)
  }

  handleSetActiveCurrency(e: MouseEvent | KeyboardEvent, currency: ICurrency) {
    if (e.type === 'click' || ('key' in e && e.key === 'Enter'))
      this.selectedCurrency = currency
  }

  getFormatNumber(value: number, toFixedValue = 2): string {
    return formatNumber(value, {
      symbol: '',
      toFixedValue,
      locale: getLocale(),
      sign: {
        need: true,
        needPlus: false,
      },
    })
  }

  getCurrencyIcon(icon: string, buttonIcon = false) {
    const buttonIconName = buttonIcon ? 'default-currency-button' : 'default-currency'

    if (icon)
      return html`<span slot="leadingIcon" class="currency-icon">${svg`${unsafeSVG(icon)}`}</span>`

    return html`<us-icon slot="leadingIcon" size="sm" name="${buttonIconName}"></us-icon>`
  }
}