import { html, nothing, type TemplateResult } from 'lit'
import { customElement, property } from 'lit/decorators.js'
import { ifDefined } from 'lit/directives/if-defined.js'
import type { IPktFooterLink } from 'shared-types'
import { PktFooterBaseElement } from './footer-base'
import type { IPktFooterSimple } from './types'

import '@/components/icon'

/**
 * PktFooterSimple — kompakt footer: en sentrert rad med pil-lenker i det
 * grå sekundær-båndet, stablet oppå den globale (blå) footeren. Uten
 * `links` rendres kun den globale footeren.
 */
export class PktFooterSimple
  extends PktFooterBaseElement<IPktFooterSimple>
  implements IPktFooterSimple
{
  @property({ type: Array }) links?: IPktFooterLink[]

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

  private renderLink(link: IPktFooterLink): TemplateResult {
    const { target, rel } = this.linkTarget(link)
    return html`
      <a class="pkt-footer-simple__link" href=${link.href} target=${target} rel=${ifDefined(rel)}>
        <pkt-icon class="pkt-footer-simple__link-icon" name="arrow-link"></pkt-icon>
        <span>${link.text}${this.renderLinkDomain(link, 'pkt-footer-simple__link-domain')}</span>
      </a>
    `
  }

  render() {
    const hasCustomContent = !!this.links?.length
    // 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`
      <footer class="pkt-footer-simple">
        ${hasCustomContent || consentInSecondary
          ? html`
              <div class="pkt-footer__band pkt-footer__band--secondary">
                <div class="pkt-footer__inner pkt-footer__inner--compact">
                  <ul class="pkt-footer-simple__list">
                    ${this.links?.map((link) => html`<li>${this.renderLink(link)}</li>`)}
                    ${consentInSecondary ? html`<li>${this.renderConsent()}</li>` : nothing}
                  </ul>
                </div>
              </div>
            `
          : nothing}
        ${this.renderGlobalFooter()}
      </footer>
    `
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'pkt-footer-simple': PktFooterSimple
  }
}

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