import { css, html } from 'lit'
import type { PropertyValueMap } from 'lit'
import { property, state } from 'lit/decorators.js'
import { when } from 'lit/directives/when.js'
import { classMap } from 'lit/directives/class-map.js'
import type { DirectiveClass, DirectiveResult } from 'lit/directive.js'
import { UsBaseElement } from '../base/UsBaseElement'
import { customElementIfNotExist } from '../../utils/customElementIfNotExist'
import { dispatchCustomEvent } from '../../utils/dispatchCustomEvent'
import type { AccordionVariants, IAccordionProps } from './model/IAccordionProps'
import UsAccordion_css from './accordion.pcss'
import vars_css from './vars.pcss'

// import '../icon/UsIcon'
import '../tooltip/UsTooltip'

declare global {
  interface HTMLElementTagNameMap {
    'us-accordion': UsAccordion
  }
}

@customElementIfNotExist('us-accordion')
export class UsAccordion extends UsBaseElement implements IAccordionProps {
  static styles = [
    UsBaseElement.styles,
    css([vars_css] as TemplateStringsArray | any),
    css([UsAccordion_css] as TemplateStringsArray | any),
  ]

  @property({ type: String }) widgetView: IAccordionProps['widgetView'] = 'vertical'
  @property({ type: String }) variant: AccordionVariants = 'primary'
  @property({ type: Boolean }) alternativeBackground = false
  @property({ type: String }) iconName = ''
  @property({ type: String }) title = ''
  @property({ type: String }) titleClose = ''
  @property({ type: Boolean }) infoTooltip = false
  @property({ type: Boolean }) isAccordionOpen = false
  @property({ type: String, attribute: 'data-testid', reflect: true })
    dataTestId = 'accordion'

  @state() showInfo = false
  @state() showContent = false
  @state() hovered = false

  connectedCallback() {
    super.connectedCallback()
  }

  updated(changedProperties: PropertyValueMap<any>) {
    if (changedProperties.has('isAccordionOpen'))
      this.showContent = this.isAccordionOpen
  }

  render() {
    return html`
      <div class="accordion-wrapper ${this.variant}">
        ${this.renderTypeOfAccordion(this.variant)}
        <div class="accordion-content ${this.variant} ${(this.showContent && this.variant === 'secondary') ? 'removeOverflowHidden' : ''}">
          ${when(this.showContent, () => html`
            <slot name="accordionContent"></slot>
          `)}
        </div>
      </div>
    `
  }

  renderTypeOfAccordion(type: AccordionVariants) {
    switch (type) {
      case 'primary':
        return html`
          <div class="${this.getAccordionClasses(type)}" tabindex="0" role="button" @click=${this.toggleAccordion} @keydown=${this.toggleAccordion}>
            <div class="accordion-header__left">
            <div @click=${e => e.stopPropagation()}><slot name="headerControl"></slot></div>
              ${when(this.iconName.length, () => html`
                <us-icon size="md" color="var(--accordion-base-icon-color)" name="${this.iconName}"></us-icon>
              `)}
              <span class="title ${type}">${this.title}</span>
              ${when(this.infoTooltip,
                () => html`
                  <div class="accordion-header-info" tabindex="0" @click=${e => e.stopPropagation()} @focus=${this.handleFocus} @blur=${this.handleBlur}>
                    <us-tooltip
                      scrollable
                      .scrolledWidth=${this.widgetView?.includes('vertical') ? '290px' : '324px'}
                      .show=${this.showInfo}
                    >
                      <div slot="content" class="accordion-header-info__tooltip">
                        <slot name="infoDescription"></slot>
                      </div>
                      <div slot="activator">
                        <us-icon size="md" color="var(--accordion-base-icon-color)" .color=${this.hovered ? 'var(--accordion-hover-icon-color)' : 'var(--accordion-base-icon-color)'}  @mouseenter=${this.onHover} @mouseleave=${this.onHover} name="info"></us-icon>
                      </div>
                    </us-tooltip>
                  </div>
                  `,
                () => html``)}
            </div>
            <div class="accordion-header__right">
              <us-icon size="md" color="var(--accordion-base-icon-color)" name="${!this.showContent ? 'direction-down' : 'direction-up'}"></us-icon>
            </div>
          </div>
        `
      case 'secondary':
        return html`
          <div class="${this.getAccordionClasses(type)}" tabindex="0" role="button" @click=${this.toggleAccordion} @keydown=${this.toggleAccordion}>
            <div class="accordion-header__left">
              <span class="title ${type}">${this.title}</span>
              <slot name="extra"></slot>
            </div>
            <div class="accordion-header__right ${type}">
              <slot name="headerContentNearArrow"></slot>
              <us-icon size="sm" color="var(--accordion-base-icon-color)" name="${!this.showContent ? 'direction-down' : 'direction-up'}"></us-icon>
            </div>
          </div>
        `
      case 'link':
        return html`
          <div class="accordion-header" role="button" tabindex="0" @click=${this.toggleAccordion} @keydown=${this.toggleAccordion} @mouseenter=${this.onHover} @mouseleave=${this.onHover}>
            <div class="accordion-header__left">
              <span class="title">${!this.showContent ? this.title : (this.titleClose || this.title)}</span>
            </div>
            <div class="accordion-header__right">
              <us-icon size="sm" .color=${this.hovered ? 'var(--color-primary-1000)' : 'var(--color-primary-800)'} name="${!this.showContent ? 'direction-down' : 'direction-up'}"></us-icon>
            </div>
          </div>
        `
      case 'button':
        return html`
        <div class="accordion-header" role="button" tabindex="0" @click=${this.toggleAccordion} @keydown=${this.toggleAccordion}>
          <span class="title">${this.title}</span>
          <div class="accordion-header__right ${!this.showContent ? 'down' : 'up'}">
            <us-icon size="xs" color="${!this.showContent ? 'var(--color-text-700)' : 'var(--color-primary-600)'}" name="${!this.showContent ? 'direction-down' : 'direction-up'}"></us-icon>
          </div>
        </div>
      `
    }
  }

  getAccordionClasses(type: string): DirectiveResult<DirectiveClass> {
    return classMap({
      'accordion-header': true,
      'accordion-header__alternative': this.alternativeBackground,
      'open': this.showContent,
      [type]: type.length,
    })
  }

  toggleAccordion(e: KeyboardEvent | MouseEvent) {
    if (e.type === 'click')
      this.showContent = !this.showContent
    else if (e.type === 'keydown' && (e as KeyboardEvent).key === 'Enter')
      this.showContent = !this.showContent
    dispatchCustomEvent('showContent', this.showContent, this)
  }

  onHover() {
    this.hovered = !this.hovered
  }

  handleFocus(e: any) {
    if (e?.sourceCapabilities !== null)
      this.showInfo = true
  }

  handleBlur() {
    this.showInfo = false
  }
}