import type { PropertyValueMap } from 'lit'
import { css, html } from 'lit'
import { property, state } from 'lit/decorators.js'
import { repeat } from 'lit/directives/repeat.js'
import { when } from 'lit/directives/when.js'
import { UsBaseElement } from '../../base/UsBaseElement'
import { dispatchCustomEvent } from '../../../utils/dispatchCustomEvent'
import { customElementIfNotExist } from '../../../utils/customElementIfNotExist'
import UsRadioButton_css from './radioButton.pcss'
import vars_css from './vars.pcss'
import type { IRadioButtonProps } from './model/IRadioButtonProps'
import type { IRadioButtonSettingsProps } from './model/IRadioButtonSettingsProps'

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

declare global {
  interface HTMLElementTagNameMap {
    'us-radio-button': UsRadioButton
  }
}

@customElementIfNotExist('us-radio-button')
export class UsRadioButton extends UsBaseElement implements IRadioButtonProps {
  static styles = [
    UsBaseElement.styles,
    css([vars_css] as TemplateStringsArray | any),
    css([UsRadioButton_css] as TemplateStringsArray | any),
  ]

  @property() radioButtonSettings: IRadioButtonSettingsProps[] = []
  @property() orientation: IRadioButtonProps['orientation'] = 'vertical'
  @property({ type: String, attribute: 'data-testid', reflect: true }) dataTestId = 'button_radio'

  @state() tooltips = this.getTooltips()

  willUpdate(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
    if (changedProperties.has('radioButtonSettings') && this.radioButtonSettings)
      this.tooltips = this.getTooltips()
  }

  render() {
    return html`
      <div class="radio-button-wrapper radio-button-${this.orientation}">
        ${this.getRenderRadio()}
      </div>
    `
  }

  getTooltips() {
    const tooltips = {}

    if (Array.isArray(this.radioButtonSettings)) {
      this.radioButtonSettings.filter((setting: IRadioButtonSettingsProps) => setting.tooltipText).forEach((setting: IRadioButtonSettingsProps) => {
        tooltips[setting.id] = false
      })
    }

    return tooltips
  }

  getRenderRadio() {
    return repeat(this.radioButtonSettings, (setting: IRadioButtonSettingsProps) => (setting.id), (setting) => {
      return html`
        <div class="radio-button">
          <input type="radio"
            tabindex="0"
            id="${setting.id}"
            name="${setting.name}" 
            value="${setting.value}" 
            role="radio"
            .checked="${setting.checked}"
            ?disabled="${setting.disabled}"
            @change="${(e: Event) => {
              this.handleChange(e, setting)
            }}" 
            @keydown="${(e: KeyboardEvent) => {
              this.handleKeyEnter(e, setting)
            }}"
          >
          <label 
            for="${setting.id}" 
            aria-label="${setting.label}" 
            aria-labelledby="${setting.id}" 
          >${setting.label}</label>
          ${when(setting.tooltipText, () => html`
            <div 
              class="info"
            >
              <us-tooltip .strategy="${setting.tooltipStrategy || 'absolute'}" ?show="${this.tooltips[setting.id]}">
                <p slot="content">${setting.tooltipText}</p>  
                <div slot="activator">
                  <us-button
                    slot="activator"
                    variant="icon-secondary-s-light"
                    icon="circle-info"
                  >
                  </us-button>
                </div>
              </us-tooltip>
            </div>
          `)}
        </div>
      `
    })
  }

  handleChange(e: Event, setting: IRadioButtonSettingsProps) {
    e.stopPropagation()
    dispatchCustomEvent('change', setting.id, this)
  }

  handleKeyEnter(e: KeyboardEvent, setting: IRadioButtonSettingsProps) {
    e.stopPropagation()

    if (e.code === 'Enter' || e.code === 'Space')
      dispatchCustomEvent('change', setting.id, this)
  }
}