import { html, nothing, type TemplateResult } from 'lit'
import { customElement, property } from 'lit/decorators.js'
import type { IPktFooterColumn } from 'shared-types'
import { PktFooterBaseElement } from './footer-base'
import type { IPktFooter } from './types'

/**
 * PktFooter — footer med valgfritt custom innhold (grått sekundær-bånd)
 * stablet oppå den globale (blå) footeren. Uten `columns` rendres kun den
 * globale footeren. Den globale henter innhold fra Oslo kommunes felles
 * header/footer-endepunkt (samme som `pkt-header type="global"`).
 */
export class PktFooter extends PktFooterBaseElement<IPktFooter> implements IPktFooter {
  @property({ type: Array }) columns?: IPktFooterColumn[]

  connectedCallback() {
    super.connectedCallback()
    this.classList.add('pkt-footer-host')
  }

  private renderColumn(column: IPktFooterColumn): TemplateResult {
    return html`
      <section>
        <h2>${column.title}</h2>
        ${column.text ? html`<p>${column.text}</p>` : nothing}
        ${column.links?.length
          ? html`
              <ul class="pkt-footer__link-list">
                ${column.links.map((link) => html`<li>${this.renderCustomLink(link)}</li>`)}
              </ul>
            `
          : nothing}
      </section>
    `
  }

  private renderSecondary(): TemplateResult {
    // Med skipGlobal rendres consent-lenken i sekundær-båndet i stedet
    // for i den globale footeren.
    const consentInSecondary = this.skipGlobal && this.includeConsent
    return html`
      <div class="pkt-footer__band pkt-footer__band--secondary">
        <div class="pkt-footer__inner">
          ${this.columns?.length
            ? html`
                <div class="pkt-footer__sections">
                  ${this.columns.map((column) => this.renderColumn(column))}
                </div>
              `
            : nothing}
          ${consentInSecondary
            ? html`<div class="pkt-footer__consent">${this.renderConsent()}</div>`
            : nothing}
        </div>
      </div>
    `
  }

  render() {
    const hasCustomContent = !!this.columns?.length
    const consentInSecondary = this.skipGlobal && this.includeConsent
    return html`
      <footer class="pkt-footer">
        ${hasCustomContent || consentInSecondary ? this.renderSecondary() : nothing}
        ${this.renderGlobalFooter()}
      </footer>
    `
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'pkt-footer': PktFooter
  }
}

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