'use client'

import React from 'react'

import { PktIcon } from '../icon/Icon'
import { PktConsent } from '../consent/Consent'

export interface IPktFooterSimple extends React.HTMLAttributes<HTMLDivElement> {
  links?: Array<{
    href: string
    text: string
    external?: boolean
    openInNewTab?: boolean
  }>
  personvernOgInfoLink?: string
  tilgjengelighetLink?: string
  openLinksInNewTab?: boolean
  includeConsent?: boolean
  hotjarId?: string | null
  googleAnalyticsId?: string | null
  devMode?: boolean
  cookieDomain?: string | null
  cookieSecure?: string | null
  cookieExpiryDays?: string | null
  onToggleConsent?: (e: CustomEvent) => void
}

export const PktFooterSimple: React.FC<IPktFooterSimple> = ({
  links = [],
  openLinksInNewTab = false,
  personvernOgInfoLink = 'https://www.oslo.kommune.no/personvern-og-informasjonskapsler/',
  tilgjengelighetLink = 'https://www.oslo.kommune.no/tilgjengelighet/',
  includeConsent = false,
  hotjarId = null,
  googleAnalyticsId = null,
  devMode = false,
  cookieDomain = null,
  cookieSecure = null,
  cookieExpiryDays = null,
  onToggleConsent = (e: CustomEvent) => {
    console.log(e.detail)
  },
  className,
}) => {
  const classNames = [className, 'pkt-footer-simple'].filter(Boolean).join(' ')
  return (
    <footer className={classNames} data-mode="dark">
      <div className="pkt-footer-simple__container">
        <ul className="pkt-footer-simple__list">
          {links.map((link, index) => (
            <li className="pkt-footer-simple__list-item" key={index}>
              <a
                className={`pkt-footer-simple__link ${link.external ? ' pkt-link--external' : ''}`}
                href={link.href}
                target={link.openInNewTab || openLinksInNewTab ? '_blank' : '_self'}
                rel={link.openInNewTab || openLinksInNewTab ? 'noopener noreferrer' : undefined}
              >
                <PktIcon className="pkt-footer-simple__link-icon" name="chevron-right" />
                {link.text}
              </a>
            </li>
          ))}
          <li className="pkt-footer-simple__list-item">
            <a
              className="pkt-footer-simple__link"
              href={personvernOgInfoLink}
              target={openLinksInNewTab ? '_blank' : '_self'}
              rel={openLinksInNewTab ? 'noopener noreferrer' : undefined}
            >
              <PktIcon className="pkt-footer-simple__link-icon" name="chevron-right"></PktIcon>
              Personvern og informasjonskapsler
            </a>
          </li>
          <li className="pkt-footer-simple__list-item">
            <a
              className="pkt-footer-simple__link"
              href={tilgjengelighetLink}
              target={openLinksInNewTab ? '_blank' : '_self'}
              rel={openLinksInNewTab ? 'noopener noreferrer' : undefined}
            >
              <PktIcon className="pkt-footer-simple__link-icon" name="chevron-right"></PktIcon>
              Tilgjengelighet
            </a>
          </li>
          {includeConsent && (
            <li className="pkt-footer-simple__list-item">
              <PktConsent
                triggerType="footerlink"
                hotjarId={hotjarId}
                googleAnalyticsId={googleAnalyticsId}
                devMode={devMode}
                cookieDomain={cookieDomain}
                cookieSecure={cookieSecure}
                cookieExpiryDays={cookieExpiryDays}
                onToggleConsent={onToggleConsent}
              />
            </li>
          )}
        </ul>
      </div>
    </footer>
  )
}