import type { PropertyValues, TemplateResult } from 'lit'
import { css, html } from 'lit'
import { when } from 'lit/directives/when.js'
import { property, state } from 'lit/decorators.js'
import type { ClassMapDirective } from 'lit/directives/class-map.js'
import { classMap } from 'lit/directives/class-map.js'
import type { DirectiveResult } from 'lit/directive'
import { UsBaseElement } from '../base/UsBaseElement'
import { customElementIfNotExist } from '../../utils/customElementIfNotExist'
import type { IButtonProps, IButtonVariants } from './model/IButtonProps'
import UsButton_css from './styles.pcss'
import UsButton_vars from './vars.pcss'

// import '../icon/UsIcon'

declare global {
  interface HTMLElementTagNameMap {
    'us-button': UsButton
  }
}

@customElementIfNotExist('us-button')
export class UsButton extends UsBaseElement implements IButtonProps {
  static styles = [
    UsBaseElement.styles,
    css([UsButton_css] as TemplateStringsArray | any),
    css([UsButton_vars] as TemplateStringsArray | any),
  ]

  @property({ type: Boolean, reflect: true }) disabled = false
  @property({ type: Boolean }) loading!: boolean
  @property({ type: String }) variant: IButtonVariants = 'primary'
  @property({ type: String, attribute: 'icon' }) iconName = ''
  @property({ type: Boolean, attribute: 'full' }) isFullWidth = false
  @property({ type: Boolean, attribute: 'active' }) isActive = false
  @property({ type: Boolean }) uppercase = false
  @property({ type: Number }) dataIndexNumber = 0
  @property({ type: String, attribute: 'data-testid', reflect: true }) dataTestId = 'button'

  @state() evaluationPressed!: boolean

  constructor() {
    super()
    this.addEventListener('click', this.handleClick)
  }

  willUpdate(changedProperties: PropertyValues) {
    if ((changedProperties.has('variant') || changedProperties.has('isActive'))
      && (this.variant === 'like' || this.variant === 'dislike'))
      this.setEvaluationState()
  }

  override render(): TemplateResult {
    const mainButton = html`
      <button
        role="button"
        data-index-number="${this.dataIndexNumber}"
        class=${this.getButtonClasses()}  
        ?disabled=${this.disabled}
      >
        ${html`<slot name="leadingIcon">
          ${when(this.iconName, () => html`
            <us-icon class="usbutton__icon" name=${this.iconName} size=${this.getIconSize()}></us-icon>
          `)}
          </slot>`}
        ${when(this.isTextSlotAvailable(), () => html`<slot></slot>`)}
      </button>
    `
    const evaluationButton = html`
      <button
        role="button"
        data-index-number="${this.dataIndexNumber}"
        class=${this.getButtonClasses()}  
        ?disabled=${this.disabled}
        @mousedown=${() => this.setEvaluationState(true)}
        @mouseup=${() => this.setEvaluationState(false)}
      >
        <us-icon class="usbutton__icon" name=${`${this.variant}-active`} size="sm" ?hidden=${!this.evaluationPressed}></us-icon>
        <us-icon class="usbutton__icon" name=${`${this.variant}`} size="sm" ?hidden=${this.evaluationPressed}></us-icon>
        <slot></slot>
      </button>
    `

    return when(this.variant === 'like' || this.variant === 'dislike',
      () => evaluationButton,
      () => mainButton)
  }

  handleClick(e: Event) {
    if (this.disabled || this.loading)
      e.stopImmediatePropagation()
  }

  private getButtonClasses(): DirectiveResult<typeof ClassMapDirective> {
    return classMap({
      'usbutton': true,
      'active': this.isActive,
      [`usbutton_variant_${this.variant}`]: true,
      'uppercase': this.uppercase,
      'w-full': this.isFullWidth,
      'loading': this.loading,
    })
  }

  setEvaluationState(active?: boolean) {
    if (this.variant === 'like' || this.variant === 'dislike') {
      if (active || this.isActive)
        this.evaluationPressed = true
      else
        this.evaluationPressed = false
    }
  }

  getIconSize() {
    switch (this.variant) {
      case 'icon-secondary-m-dark':
      case 'icon-secondary-m-light':
      case 'icon-primary':
        return 'md'
      default:
        return 'sm'
    }
  }

  isTextSlotAvailable() {
    switch (this.variant) {
      case 'icon-primary':
      case 'icon-secondary-m-dark':
      case 'icon-secondary-s-dark':
      case 'icon-secondary-s-light':
      case 'icon-secondary-m-light':
        return false
      default:
        return true
    }
  }
}