import type { LitElement, PropertyValueMap } from 'lit'
import { html } from 'lit'
import { property } from 'lit/decorators.js'
import { when } from 'lit/directives/when.js'
import { customElementIfNotExist } from '../../utils/customElementIfNotExist'
import { UsBaseElement } from '../base/UsBaseElement'
import type { ITabProps } from './model/ITabProps'

declare global {
  interface HTMLElementTagNameMap {
    'us-tab': UsTab
  }
}

@customElementIfNotExist('us-tab')
export class UsTab extends UsBaseElement implements ITabProps {
  static styles = [
    UsBaseElement.styles,
  ]

  @property({ type: String }) name!: string
  @property({ type: String }) value!: string
  @property({ type: Boolean }) selected!: boolean
  @property({ type: Boolean }) disabled!: boolean
  @property({ type: String }) icon!: string

  updated(changedProperties: PropertyValueMap<any>) {
    const changeNameTrigger = changedProperties.has('name') && (changedProperties.get('name') !== null && changedProperties.get('name') !== undefined)
    const changeValueTrigger = changedProperties.has('value') && changedProperties.get('value')
    const changeDisabledTrigger = changedProperties.has('disabled')
      && (changedProperties.get('disabled') === true
      || changedProperties.get('disabled') === false)

    if (changeNameTrigger || changeValueTrigger || changeDisabledTrigger)
      (this.parentElement as LitElement)?.requestUpdate()
  }

  render() {
    return html`
      ${when(this.selected, () => html`<slot></slot>`, () => '')}
    `
  }
}