import { PktElementWithSlot } from '@/base-elements/element-with-slot'
import { slotContent } from '@/directives/slot-content'
import { html, PropertyValues, TemplateResult } from 'lit'
import { customElement, property } from 'lit/decorators.js'
import type { THeadingLevel, THeadingSize, THeadingWeight } from 'shared-types'

export type TPktHeadingLevel = THeadingLevel
export type TPktHeadingSize = THeadingSize
export type TPktHeadingWeight = THeadingWeight

export interface IPktHeading {
  size?: TPktHeadingSize
  level?: TPktHeadingLevel
  weight?: TPktHeadingWeight
  visuallyHidden?: boolean
  align?: 'start' | 'center' | 'end'
}

export class PktHeading extends PktElementWithSlot<IPktHeading> implements IPktHeading {
  @property({ type: String, reflect: true }) size: TPktHeadingSize | undefined = undefined
  @property({ type: Number, reflect: true }) level: TPktHeadingLevel = 2
  @property({ type: String, reflect: true }) weight: TPktHeadingWeight | undefined = undefined
  @property({ type: Boolean, reflect: true }) visuallyHidden: boolean = false
  @property({ type: String, reflect: true }) align: 'start' | 'center' | 'end' | undefined =
    undefined

  protected updated(_changedProperties: PropertyValues): void {
    super.updated(_changedProperties)

    if (_changedProperties.has('level')) {
      if (this.level < 1 || this.level > 6) {
        console.warn(`Invalid heading level: ${this.level}. Must be between 1 and 6.`)
      }
      if (!this.hasAttribute('size')) {
        this.size = this.defaultSizeForLevel
      }
      if (!this.hasAttribute('weight')) {
        this.weight = this.defaultWeightForLevel
      }
    }

    if (!this.hasAttribute('size') && this.size === undefined) {
      this.size = this.defaultSizeForLevel
    }
  }

  private get defaultSizeForLevel(): TPktHeadingSize {
    switch (this.level) {
      case 1:
        return 'xlarge'
      case 2:
        return 'large'
      case 3:
        return 'medium'
      case 4:
        return 'small'
      case 5:
      case 6:
        return 'xsmall'
      default:
        return 'medium'
    }
  }

  private get defaultWeightForLevel(): TPktHeadingWeight {
    switch (this.level) {
      case 1:
      case 2:
        return 'regular'
      case 3:
      case 4:
      case 5:
      case 6:
        return 'medium'
      default:
        return 'medium'
    }
  }

  private get headingClasses(): string {
    return [
      'pkt-heading',
      this.size && `pkt-heading--${this.size}`,
      this.weight && `pkt-heading--fw-${this.weight}`,
      this.visuallyHidden && 'pkt-sr-only',
      this.align && `pkt-heading--${this.align}`,
    ]
      .filter(Boolean)
      .join(' ')
  }

  render(): TemplateResult {
    const classes = this.headingClasses
    const content = slotContent(this)
    const safeLevel = this.level >= 1 && this.level <= 6 ? this.level : 2

    switch (safeLevel) {
      case 1:
        return html`<h1 class=${classes}>${content}</h1>`
      case 2:
        return html`<h2 class=${classes}>${content}</h2>`
      case 3:
        return html`<h3 class=${classes}>${content}</h3>`
      case 4:
        return html`<h4 class=${classes}>${content}</h4>`
      case 5:
        return html`<h5 class=${classes}>${content}</h5>`
      case 6:
        return html`<h6 class=${classes}>${content}</h6>`
      default:
        return html`<h2 class=${classes}>${content}</h2>`
    }
  }
}

try {
  customElement('pkt-heading')(PktHeading)
} catch (e) {
  console.warn('Forsøker å definere <pkt-heading>, men den er allerede definert')
}