import { css, html } from 'lit'
import { classMap } from 'lit/directives/class-map.js'
import { property, query, state } from 'lit/decorators.js'
import { when } from 'lit/directives/when.js'
import type { DirectiveClass, DirectiveResult } from 'lit/directive'
import { customElementIfNotExist } from '../../utils/customElementIfNotExist'
import { dispatchCustomEvent } from '../../utils/dispatchCustomEvent'
import { UsBaseElement } from '../base/UsBaseElement'
import { parseNumberFromString } from '../../utils/parseNumberFromString'
import { getWidgetViewClasses } from '../../utils/getWidgetViewClasses'
import { debounce } from '../../upswot-components'
import type { ITransactionItem } from './models/ITransactionItem'
import type { ITransactionItemData } from './models/ITransactionItemData'
import UsTransactionItem_css from './transactionItem.pcss'
import '../badgeGroup/UsBadgeGroup'
import '../tooltip/UsTooltip'
// import '../icon/UsIcon'

declare global {
  interface HTMLElementTagNameMap {
    'us-transaction-item': UsTransactionItem
  }
}

@customElementIfNotExist('us-transaction-item')
export class UsTransactionItem extends UsBaseElement implements ITransactionItem {
  static styles = [
    UsBaseElement.styles,
    css([UsTransactionItem_css] as TemplateStringsArray | any),
  ]

  @property({ type: Object }) transaction: ITransactionItemData = {} as ITransactionItemData
  @property({ type: String }) widgetView: ITransactionItem['widgetView'] = 'vertical'
  @property({ type: Boolean }) isRightIconShown = false
  @property({ type: Boolean }) isHovered = false
  @property({ type: Boolean }) useDefaultColorForAmount = false

  @state() isTooltipRendered = false

  @query('.info-block') infoBlock!: HTMLDivElement
  @query('.title-text') titleText!: HTMLParagraphElement

  resizeObserverContainer!: ResizeObserver
  containerWidth = 0

  setIsTooltipRenderedDebounced = debounce(this.setIsTooltipRendered.bind(this), 300, false)

  disconnectedCallback(): void {
    this.disconnectResizeObserver()
  }

  firstUpdated(): void {
    this.initResizeObserver()
  }

  render() {
    return html`
      <div 
        tabindex="0"
        class="${this.getCardClasses()}" 
        @click="${this.handleClick}" 
        @keydown="${this.handleEnter}"
      >
        <div class="card__info">
          ${when(this.isBadgeGroupDisplayed() && this.isVerticalOrHorizontalSmall(),
            () => this.renderBadgeGroup(),
          )}
          <div class="info-block">
            <div class="info__title">
              ${when(this.isTooltipRendered,
                () => html`
                  <us-tooltip 
                    .widgetView="${this.widgetView}"
                    showArrow
                  >
                    <p class="title-text" slot="activator" tabindex="0">${this.transaction.title}</p>
                    <p slot="content">${this.transaction.title}</p>
                  </us-tooltip>
                `,
                () => html`
                  <p class="title-text">${this.transaction.title}</p>
                `,
              )}
            </div>
            <div class="card__amount-action">
              ${when(this.isBadgeGroupDisplayed() && !this.isVerticalOrHorizontalSmall(),
                () => this.renderBadgeGroup(),
              )}
              <div class="${this.getItemAmountClasses()}">
                ${this.transaction.amount}
              </div>
              ${when(this.isRightIconShown,
                () => html`  
                  <div class="card__action">
                    <us-icon
                      name="chevron-right"
                      size="sm"
                      title="open"
                      arialabel="open"
                      color="currentColor"
                    ></us-icon>
                  </div>
                `,
              )}
            </div>
          </div>
          <div class="info__subblock">
            <p class="subblock__subtitle">
              ${this.transaction.subtitle}
            </p>
            ${when(this.transaction?.subamount, () => html`
              <p class="subblock__subamount">
                ${this.transaction?.subamount}
              </p>
            `)}
          </div>
        </div>
        <slot name="rightSlot"></slot>
      </div>
    `
  }

  renderBadgeGroup() {
    return html`
      <div class="info__badge-group">
        <us-badge-group 
          .badgeGroup="${this.transaction?.badgeGroup || []}"
          .iconInGroup="${this.transaction?.iconInGroup}"
          ?isIgnored="${this.transaction.isIgnored}"
        ></us-badge-group>
      </div>
    `
  }

  getCardClasses(): DirectiveResult<DirectiveClass> {
    const widgetViewClasses = getWidgetViewClasses(this.widgetView)

    return classMap({
      'transaction-item': true,
      'transaction-item_new': ('isViewed' in this.transaction) && !this.transaction.isViewed,
      'transaction-item_ignored': this.transaction.isIgnored || false,
      'is-hovered': this.isHovered,
      ...widgetViewClasses,
    })
  }

  getItemAmountClasses(): DirectiveResult<DirectiveClass> {
    const amount = parseNumberFromString(this.transaction.amount)

    return classMap({
      card__amount: true,
      card__amount_positive: !this.useDefaultColorForAmount && amount > 0,
      card__amount_negative: !this.useDefaultColorForAmount && amount < 0,
    })
  }

  isBadgeGroupDisplayed(): boolean {
    return (this.transaction.badgeGroup && this.transaction.badgeGroup.length > 0)
    || (this.transaction.iconInGroup && Object.keys(this.transaction.iconInGroup).length > 0)
    || this.transaction.isIgnored
    || false
  }

  isVerticalOrHorizontalSmall() {
    return this.widgetView.includes('vertical') || this.widgetView.includes('horizontal-small')
  }

  setIsTooltipRendered() {
    this.isTooltipRendered = this.titleText.scrollHeight !== this.titleText.offsetHeight
  }

  handleClick(e: Event) {
    e.stopPropagation()

    if (this.isHovered)
      dispatchCustomEvent('click', this.transaction, this, false, false)
  }

  handleEnter(e: KeyboardEvent) {
    if (e.key === 'Enter' && this.isHovered)
      dispatchCustomEvent('click', this.transaction, this, false, false)
  }

  initResizeObserver() {
    if (this.infoBlock)
      this.resizeObserverContainer = this.resizeObserver()
  }

  resizeObserver(): ResizeObserver {
    const resizeWidgetObserver = new ResizeObserver((entries) => {
      for (const entry of entries) {
        const containerWidth = entry.contentRect.width

        if (this.containerWidth !== containerWidth) {
          this.setIsTooltipRenderedDebounced()
          this.containerWidth = containerWidth
        }
      }
    })

    resizeWidgetObserver.observe(this.infoBlock, {
      box: 'border-box',
    })

    return resizeWidgetObserver
  }

  disconnectResizeObserver() {
    if (this.resizeObserverContainer)
      this.resizeObserverContainer.disconnect()
  }
}