import { property } from 'lit/decorators.js'
import { LitElement, css, html } from 'lit'
import { customElementIfNotExist } from '../../utils/customElementIfNotExist'
import { UsBaseElement } from '../base/UsBaseElement'
import UsInfoTooltip_css from './infoTooltip.pcss'
import type { IInfoProps } from './model/IInfoProps'

declare global {
  interface HTMLElementTagNameMap {
    'us-info': InfoTooltip
  }
}

@customElementIfNotExist('us-info')
export class InfoTooltip extends LitElement implements IInfoProps {
  static styles = [
    UsBaseElement.styles,
    css([UsInfoTooltip_css] as TemplateStringsArray | any),
  ]

  @property() corner: IInfoProps['corner'] = 'top'
  @property({ type: Array }) offset: IInfoProps['offset'] = [0, 4]
  @property({ type: Boolean }) showArrow = false
  @property({ type: String }) widgetView: IInfoProps['widgetView'] = 'vertical'
  @property({ type: String }) strategy: IInfoProps['strategy'] = 'absolute'
  @property({ type: String }) color = 'currentColor'
  @property() iconSize: IInfoProps['iconSize'] = 'sm'

  render() {
    return html`
      <us-tooltip 
        class="info-tooltip"
        .widgetView=${this.widgetView}
        .corner=${this.corner}
        .strategy=${this.strategy}
        .offset=${this.offset}
        ?showArrow="${this.showArrow}"
      >
        <us-icon
          slot="activator"
          name="info"
          .size=${this.iconSize}
          .color=${this.color}
          class="info-tooltip__icon"
          tabindex="0"
        ></us-icon>
        <slot name="title" slot="title"></slot>
        <slot name="content" slot="content"></slot>
      </us-tooltip>
    `
  }
}