import { css, html } from 'lit'
import { property, state } from 'lit/decorators.js'
import { when } from 'lit/directives/when.js'
import { UsBaseElement } from '../base/UsBaseElement'
import { dispatchCustomEvent } from '../../utils/dispatchCustomEvent'
import { customElementIfNotExist } from '../../utils/customElementIfNotExist'
import type { IFilterProps } from './model/IFilterProps'
import UsFilter_css from './filter.pcss'

import '../form/checkbox/UsCheckbox'
import '../tooltip/UsTooltip'
// import '../icon/UsIcon'

declare global {
  interface HTMLElementTagNameMap {
    'us-filter': UsFilter
  }
}

@customElementIfNotExist('us-filter')
export class UsFilter extends UsBaseElement implements IFilterProps {
  static styles = [
    UsBaseElement.styles,
    css([UsFilter_css] as TemplateStringsArray | any),
  ]

  @property({ type: String }) widgetView: IFilterProps['widgetView'] = 'vertical'
  @property({ type: Boolean }) checkboxControl = false
  @property({ type: Boolean }) checkboxControlIndeterminate = false
  @property({ type: Boolean }) checkboxControlChecked = false
  @property({ type: String }) title = ''
  @property({ type: Boolean }) infoTooltip = false
  @property({ type: String }) titleClear = ''
  @property({ type: String, attribute: 'data-testid', reflect: true })
    dataTestId = 'filter'

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

  render() {
    return html`
      <div class="filter-wrapper">
        ${when(this.checkboxControl || this.title, () => html`
          <div class="filter-header">
            <div class="filter-header__left">
              ${when(this.checkboxControl, () => html`
                <us-checkbox 
                  class="checkbox"
                  ?indeterminate=${this.checkboxControlIndeterminate}
                  ?checked=${this.checkboxControlChecked}
                  @change=${this.reciveCheckboxControlValue}
                ></us-checkbox>
              `)}
              ${when(this.title, () => html`<span class="title">${this.title}</span>`)}
              ${when(this.infoTooltip, () => html`
                <div 
                  class="filter-header-info"
                  tabindex="0"
                  @click=${(e: Event) => 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="filter-header-info__tooltip">
                      <slot name="infoDescription"></slot>
                    </div>
                    <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} 
                      ></us-icon>
                    </div>
                  </us-tooltip>
                </div>
              `)}
            </div>
            <div class="filter-header__right">
              ${when(this.titleClear.length, () => html`<button @click=${this.clear}>${this.titleClear}</button>`)}
            </div>
          </div>
        `)}
        <div class="filter-content">
          <slot name="filterContent"></slot>
        </div>
      </div>
    `
  }

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

  handleFocus() {
    this.showInfo = true
  }

  handleBlur() {
    this.showInfo = false
  }

  reciveCheckboxControlValue(e: Event) {
    const checkbox = e.target as HTMLInputElement
    dispatchCustomEvent('changeMainControl', checkbox.checked, this)
  }

  clear(e: Event) {
    e.preventDefault()

    dispatchCustomEvent('clear', true, this, false, false)
  }
}