import { html, LitElement } from 'lit'
import { customElement, property } from 'lit/decorators.js'
import { classMap } from 'lit/directives/class-map.js'

export type TPktAccordionSkin = 'borderless' | 'outlined' | 'beige' | 'blue'

export interface IPktAccordion {
  compact?: boolean
  skin?: TPktAccordionSkin
  ariaLabelledBy?: string
  /**
   * @description A unique identifier to connect the accordion with a heading
   */
}

@customElement('pkt-accordion')
export class PktAccordion extends LitElement implements IPktAccordion {
  // Properties
  @property({ type: String, reflect: true, attribute: 'aria-labelledby' }) ariaLabelledBy: string =
    ''
  @property({ type: Boolean, reflect: true, attribute: 'compact' }) compact: boolean = false
  @property({ type: String, reflect: true, attribute: 'skin' }) skin: TPktAccordionSkin =
    'borderless'

  updated(changedProperties: Map<string, any>) {
    if (changedProperties.has('skin')) {
      this.requestUpdate()
    }
  }

  render() {
    const accordionClasses = {
      'pkt-accordion': true,
      'pkt-accordion--compact': this.compact,
      [`pkt-accordion--${this.skin}`]: this.skin,
    }

    return html`
      <div
        part="container"
        class=${classMap(accordionClasses)}
        data-testid="pkt-accordion"
        aria-labelledby=${this.ariaLabelledBy}
      >
        <slot></slot>
      </div>
    `
  }
}

export default PktAccordion