import { css, html } from 'lit'
import type { PropertyValues } 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 { customElementIfNotExist } from '../../utils/customElementIfNotExist'
import { dispatchCustomEvent } from '../../utils/dispatchCustomEvent'
import { UsBaseElement } from '../base/UsBaseElement'
import { localizeManager, localized } from '../../dependencies'
import type { IGroupBoxProps } from './model/IGroupBoxProps'
import UsGroupBox_css from './groupBox.pcss'

// import '../icon/UsIcon'

declare global {
  interface HTMLElementTagNameMap {
    'us-group-box': UsGroupBox
  }
}

@localized()
@customElementIfNotExist('us-group-box')
export class UsGroupBox extends UsBaseElement implements IGroupBoxProps {
  static styles = [
    UsBaseElement.styles,
    css([UsGroupBox_css] as TemplateStringsArray | any),
  ]

  @property({ type: Boolean }) hasBackground = false
  @property({ type: Boolean }) collapse = false
  @property({ type: Boolean }) collapseOpened = false
  @property({ type: Boolean }) showClearButton = false
  @property({ type: String, attribute: 'data-testid', reflect: true }) dataTestId = 'box_group'

  @state() isOpened = false

  willUpdate(changedProperties: PropertyValues) {
    if (changedProperties.has('collapseOpened'))
      this.isOpened = this.collapseOpened
    if (changedProperties.has('collapse') && !this.collapse)
      this.isOpened = true
  }

  render() {
    return html`
      <div class="${classMap({
        'group-box': true,
        'group-box_background': this.hasBackground,
      })}">
        <div
          class="${classMap({
            'group-box__header': true,
            'group-box__header_opened': this.isOpened,
          })}"
        >
          <slot name="title"></slot>
          <div class="group-box__controls">
            ${when(this.showClearButton, () => html`
              <span
                tabindex="0"
                class="group-box__clear"
                @click="${this.handleClearButton}"
              >
                ${localizeManager.button_clear()}
              </span>
            `)}
            ${when(this.collapse, () => html`
              <span
                tabindex="0"
                @click="${this.handleCollapseByClick}"
                @keydown="${(e: KeyboardEvent) => this.handleCollapseByEnter(e)}"
              >
                <us-icon
                  class="group-box__arrow"
                  size="sm"
                  name="direction-down"
                  color="var(--color-text-700)"
                ></us-icon>
              </span>
            `)}
          </div>
        </div>
        ${when(this.isOpened || !this.collapse, () => html`
          <slot class="group-box__body" name="body"></slot>
        `)}
      </div>
    `
  }

  handleCollapse() {
    this.isOpened = !this.isOpened
    dispatchCustomEvent('collapse', this.isOpened, this)
  }

  handleCollapseByClick(event: PointerEvent) {
    event.stopImmediatePropagation()
    this.handleCollapse()
  }

  handleClearButton() {
    dispatchCustomEvent('clear', true, this)
  }

  handleCollapseByEnter(e: KeyboardEvent) {
    if (e.key === 'Enter')
      this.handleCollapse()
  }
}