import { when } from 'lit/directives/when.js'
import { classMap } from 'lit/directives/class-map.js'
import { ifDefined } from 'lit/directives/if-defined.js'
import type { PropertyValueMap } from 'lit'
import { css, html } from 'lit'
import { property, query, state } from 'lit/decorators.js'
import type { HTMLInputElement } from 'happy-dom'
import { UsBaseElement } from '../../base/UsBaseElement'
import { customElementIfNotExist } from '../../../utils/customElementIfNotExist'
import UsCheckbox_css from './checkbox.pcss'
import vars_css from './vars.pcss'
import type { ICheckboxProps } from './model/ICheckboxProps'
import type { ICheckboxSettingsProps } from './model/ICheckboxSettingsProps'

import '../../tooltip/UsTooltip'

// import '../../icon/UsIcon'

declare global {
  interface HTMLElementTagNameMap {
    'us-checkbox': UsCheckbox
  }
}

@customElementIfNotExist('us-checkbox')
export class UsCheckbox extends UsBaseElement implements ICheckboxProps {
  static styles = [
    UsBaseElement.styles,
    css([vars_css] as TemplateStringsArray | any),
    css([UsCheckbox_css] as TemplateStringsArray | any),
  ]

  @property({ type: Boolean }) checked = false
  @property({ type: Boolean }) disabled = false
  @property({ type: Boolean }) indeterminate = false
  @property({ type: String }) labelColor = 'var(--color-text-1000)'
  @property({ type: Object }) checkboxSettings = {} as ICheckboxSettingsProps
  @property() variant: ICheckboxProps['variant'] = 'default'
  @property({ type: String, attribute: 'data-testid', reflect: true }) dataTestId = 'checkbox'

  @state() hovered = false

  @query('.checkbox') formElement!: HTMLInputElement

  willUpdate(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
    if (changedProperties.has('checked') && changedProperties.get('checked') !== undefined)
      this.formElement.checked = !changedProperties.get('checked')
  }

  render() {
    return html`
      <div class="checkbox-container">
        <span 
          tabindex="0"
          class="checkbox-icon ${this.variant}"
          role="checkbox"
          aria-checked="${this.checked}"
          aria-label="${this.checkboxSettings.label || 'checkbox'}"
          aria-labelledby="${this.checkboxSettings.id || 'usCheckbox'}"
          ?checked=${this.checked} 
          ?indeterminate=${this.indeterminate} 
          ?disabled=${this.disabled}
          @click="${this.handleControlClick}" 
          @keydown="${this.handleKeyEnter}"
        >
          ${this.getCheckboxIcon()}
        </span>
        <input 
          id="${this.checkboxSettings.id || 'usCheckbox'}" 
          class="checkbox ${this.variant}"
          type="checkbox"
          role="checkbox"
          placeholder=""
          ?checked=${this.checked} 
          ?indeterminate=${this.indeterminate} 
          ?disabled=${this.disabled}
          hidden
          @change="${this.handleChange}" 
          @click="${this.handleClick}" 
          @input="${this.handleInput}" 
        >
        <slot name="iconBeforeLabel"></slot>
        <label
          class=${this.getLabelClasses()}
          for="${this.checkboxSettings.id || 'usCheckbox'}"
          aria-label="${this.checkboxSettings.label || 'checkbox'}"
          aria-labelledby="${this.checkboxSettings.id || 'usCheckbox'}"
          style="color: ${this.labelColor}"
        >${this.checkboxSettings.label}</label>
        ${when(this.checkboxSettings.tooltipText, () => html`
          <div class="info">
            <us-tooltip corner="top">
              <p slot="content">${this.checkboxSettings.tooltipText}</p>  
              <div slot="activator">
                <us-icon
                  size="sm"
                  name="info"
                  .color=${this.hovered ? 'var(--color-primary-600)' : 'var(--color-neutral-700)'}
                  @mouseenter=${this.onHover}
                  @mouseleave=${this.onHover}
                  ariaLabel="tooltip"
                  title="${ifDefined(this.checkboxSettings.tooltipText)}"
                ></us-icon>
              </div>
            </us-tooltip>
          </div>
          `,
        )}
      </div>
    `
  }

  private getLabelClasses() {
    return classMap({
      'checkbox-label': true,
      [`${this.variant}-label`]: true,
      'checkbox-label_empty': !this.checkboxSettings.label,
    })
  }

  getCheckboxIcon() {
    const iconName = this.indeterminate ? 'line' : this.checked ? 'check' : ''
    const iconColor = (this.indeterminate && !this.disabled) ? 'var(--checkbox-border-color)' : (this.indeterminate && this.disabled) ? 'var(--checkbox-inactive-border-color)' : 'var(--color-neutral-0)'

    if (iconName.length) {
      return html`
        <us-icon 
          name="${iconName}" 
          size="sm" 
          ariaLabel="${iconName}"
          color="${iconColor}"
        ></us-icon>
      `
    } else {
      return null
    }
  }

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

  handleControlClick() {
    this.formElement.click()
  }

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

    this.formElement.checked = this.indeterminate ? false : this.formElement.checked
    this.checked = this.formElement.checked
    this.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }))
  }

  handleKeyEnter(e: KeyboardEvent) {
    e.stopPropagation()

    if (!this.disabled) {
      if (e.code === 'Enter' || e.code === 'Space') {
        this.formElement.checked = this.indeterminate ? false : !this.formElement.checked
        this.checked = this.formElement.checked
        this.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }))
      }
    }
  }

  handleInput(e: Event) {
    e.stopPropagation()
  }

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