import { css, html } from 'lit'
import { property, query, state } from 'lit/decorators.js'
import { classMap } from 'lit/directives/class-map.js'
import { when } from 'lit/directives/when.js'
import { unsafeHTML } from 'lit/directives/unsafe-html.js'
import type { Placement } from '@floating-ui/dom'
import { customElementIfNotExist } from '../../utils/customElementIfNotExist'
import { dispatchCustomEvent } from '../../utils/dispatchCustomEvent'
import { UsBaseElement } from '../base/UsBaseElement'
import { getDataByLocale, localizeManager, localized } from '../../dependencies'
import UsInsightButton_css from './insightButton.pcss'
import vars_css from './vars.pcss'
import type { IInsgihtOpenEventData, IInsightAction, IInsightButtonProps, IInsightCTAEventData } from './model/IInsightButtonProps'
import { IInsightActionName, IInsightActionType, IInsightNotificationCounterVariant } from './model/IInsightButtonProps'

import '../button/UsButton'
import '../notification/UsNotification'
import '../tooltip/UsTooltip'
import '../badge/UsBadge'
import '../alert/UsAlert'

declare global {
  interface HTMLElementTagNameMap {
    'us-insight-button': UsInsightButton
  }
}
@customElementIfNotExist('us-insight-button')
@localized()
export class UsInsightButton extends UsBaseElement implements IInsightButtonProps {
  static override styles = [
    UsBaseElement.styles,
    css([vars_css] as TemplateStringsArray | any),
    css([UsInsightButton_css] as TemplateStringsArray | any),
  ]

  @property({ type: Boolean, attribute: 'item' }) isItem!: boolean
  @property({ type: Boolean, attribute: 'alert' }) isAlert!: boolean
  @property({ type: Boolean, attribute: 'read' }) isRead!: boolean
  @property({ type: Boolean }) demo = false
  @property({ type: Boolean }) disableApps = false
  @property({ type: Boolean }) showAction = false
  @property({ type: String }) insightId!: string
  @property({ type: String }) placementId!: string
  @property({ type: Number }) flipPadding!: number
  @property({ type: Number }) notificationCounter = 0
  @property({ type: String }) tooltip = ''
  @property({ type: String }) tooltipCorner: Placement = 'bottom'
  @property({ type: String }) tooltipStrategy: 'absolute' | 'fixed' = 'absolute'
  @property({ type: String }) locale = ''
  @property({ type: String }) widgetView = ''
  @property({ type: Object }) actionData = {} as IInsightAction
  @property({ type: String }) notificationVariant: IInsightNotificationCounterVariant = IInsightNotificationCounterVariant.COUNTER
  @property({ type: String, attribute: 'data-testid', reflect: true }) dataTestId = 'button_insight'

  @state() inFocus = false

  @query('#item-button') itemButtonEl!: HTMLButtonElement | null

  render() {
    return html`
      <div class="insight-button">
          ${this.renderCurrentView()}
      </div>
    `
  }

  renderCurrentView() {
    switch (true) {
      case this.isItem:
        return this.renderItemBtn()
      case this.isAlert:
        return this.renderAlert()
      default:
        return this.renderListBtn()
    }
  }

  renderListBtn() {
    return html`
      <div class="insight-button__wrapper">
        <us-tooltip
          .offset=${[0, 8]}
          .corner=${this.tooltipCorner}
          .widgetView=${this.widgetView}
          .strategy=${this.tooltipStrategy}
          showArrow
          focusContent
        >
          <button slot="activator" @click="${this.onListClick}">
            <us-badge
              ?round=${this.isVerticalNarrowView()}
              contrast="moderate"
              status="primary"
            >
              <us-icon
                name="lightbulb"
                size="sm">
              </us-icon>

              ${when(!this.isVerticalNarrowView(), () => html`
                <span class="insight-button__badge-icon">
                  ${localizeManager.insight_list_button_text()}
                </span>
              `)}
            </us-badge>
          </button>

          <span slot="content">${localizeManager.insight_list_tooltip_text()}</span>
        </us-tooltip>

        <us-notification
          class="insight-button__notification-counter ${`insight-button__notification-counter_${this.notificationVariant}`}"
          .counter=${this.notificationCounter}
          .variant=${this.notificationVariant}
          @click="${this.onListClick}"
        >
        </us-notification>
      </div>
    `
  }

  renderItemBtn() {
    return html`
      <us-tooltip
        .offset=${[0, 8]}
        .corner=${this.tooltipCorner}
        .widgetView=${this.widgetView}
        .flipPadding=${this.flipPadding}
        .strategy=${this.tooltipStrategy}
        showArrow
        focusContent
        @onActivatorFocus=${() => this.setInFocus(true)}
        @onBlur=${() => this.setInFocus(false)}
      >
        <button
          id="item-button"
          slot="activator"
          @click="${this.onItemClick}"
          class="${this.getLightBulbClasses()}"
          tabindex="0"
          @keydown="${this.onBulbPressEnter}"
        >
          <us-icon class="insight-button__item-icon" name="lightbulb" size="sm"></us-icon>
        </button>

        <div class="insight-button__slot-content" slot="content">
          <p>${this.getInsightDescription()}</p>

          <div class="insight-button__item-content">
            <a
              class="insight-button__item-link"
              href="#"
              @click=${this.handleLinkClick}
            >
              ${localizeManager.view_insight()}
            </a>


            ${when(this.isCTAButtonShown(), () => {
              const actionText = getDataByLocale(this.actionData.text, this.locale)

              return html`
                <us-button
                  class="insight-button__item-action"
                  variant="tertiary-action"
                  title=${actionText}
                  ?disabled=${this.demo}
                  @click=${this.handleCTAClick}
                >
                  <span class="insight-button__item-action-text">
                    ${actionText}
                  </span>
                </us-button> 
              `
            })}
          </div>
        </div>
      </us-tooltip>
    `
  }

  renderAlert() {
    return html`
      <us-alert
        class="insight-button__alert ${this.widgetView}"
        icon="lightbulb-glowing"
        show
      >
        <div class="insight-button__alert-content">
          <span class="insight-button__alert-description">${this.getInsightDescription()}</span>
          <a
            href="#"
            class="insight-button__item-link"
            @click=${this.handleLinkClick}
            @keydown=${this.onBulbPressEnter}
          >
            ${localizeManager.insight_alert_link()}
          </a>
        </div>
      </us-alert>
    `
  }

  getInsightDescription() {
    return unsafeHTML(getDataByLocale(this.tooltip, this.locale))
  }

  setInFocus(state: boolean) {
    this.inFocus = state
  }

  onItemClick(event: Event) {
    const eventData: IInsgihtOpenEventData = {
      notificationId: this.insightId,
      placementId: this.placementId,
    }

    event.preventDefault()
    event.stopPropagation()
    dispatchCustomEvent('openInsight', eventData, this as any)
  }

  handleLinkClick(event: MouseEvent) {
    event.preventDefault()
    this.onItemClick(event)
  }

  handleCTAClick(event: MouseEvent) {
    event.stopPropagation()

    const eventData: IInsightCTAEventData = {
      insightId: this.insightId,
      actionData: this.actionData,
      fromTooltip: true,
      placementId: this.placementId,
    }

    dispatchCustomEvent('redirect', eventData, this, false, false)
  }

  onBulbPressEnter(e: KeyboardEvent) {
    if (e.key === 'Enter') {
      e.stopPropagation()
      this.onItemClick(e)
    }
  }

  onListClick(event: Event) {
    event.preventDefault()
    event.stopPropagation()
    dispatchCustomEvent('openList', true, this as any)
  }

  isVerticalNarrowView() {
    return this.widgetView.includes('vertical-narrow')
  }

  isCTAButtonShown() {
    const isExternalAction = Boolean(this.actionData?.link) && this.actionData?.type === IInsightActionType.EXTERNAL
    const isCompanyInfoAction = this.actionData?.name === IInsightActionName.COMPANY_INFO
    const isConnectorAction = this.actionData?.name === IInsightActionName.CONNECTOR

    return ((!this.disableApps && isConnectorAction) || isExternalAction || isCompanyInfoAction)
      && this.actionData?.text
      && this.showAction
  }

  private getLightBulbClasses() {
    return classMap({
      'insight-button__item': true,
      'insight-button__item_unread': this.isRead,
      'insight-button__item_shake': !this.isRead,
      'insight-button__item_focused': this.inFocus,
    })
  }
}