"use client"

import { useIntl } from "react-intl"

import Image from "@scandic-hotels/design-system/Image"
import Link from "@scandic-hotels/design-system/OldDSLink"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { Typography } from "@scandic-hotels/design-system/Typography"

import useLang from "@/hooks/useLang"
import { trackFooterClick, trackSocialMediaClick } from "@/utils/tracking"

import { getAppDownloadAttributes } from "./utils"

import styles from "./secondarynav.module.css"

import { type FooterSecondaryNavProps } from "@/types/components/footer/navigation"

export default function FooterSecondaryNav({
  secondaryLinks,
  appDownloads,
}: FooterSecondaryNavProps) {
  const lang = useLang()
  const intl = useIntl()

  return (
    <div className={styles.secondaryNavigation}>
      <nav className={styles.secondaryNavigationGroup}>
        <Typography variant="Title/Overline/sm">
          <h2>{appDownloads.title}</h2>
        </Typography>
        {appDownloads.links.length ? (
          <ul className={styles.secondaryNavigationList}>
            {appDownloads.links.map(({ href, type }) => {
              const attributes = getAppDownloadAttributes(
                intl,
                `${type}_${lang}`
              )
              return href && attributes ? (
                <li key={type}>
                  <a
                    href={href.href}
                    target="_blank"
                    onClick={() => trackSocialMediaClick(href.title)}
                    title={intl.formatMessage({
                      id: "common.linkOpenInNewTab",
                      defaultMessage: "Opens in a new tab/window",
                    })}
                  >
                    <Image
                      src={attributes.src}
                      alt={attributes.alt}
                      width={125}
                      height={40}
                    />
                  </a>
                </li>
              ) : null
            })}
          </ul>
        ) : null}
      </nav>

      {secondaryLinks.map((group) => (
        <nav className={styles.secondaryNavigationGroup} key={group.title}>
          <Typography variant="Title/Overline/sm">
            <h2>{group.title}</h2>
          </Typography>
          {group.links.length ? (
            <ul className={styles.secondaryNavigationList}>
              {group.links.map((link) => (
                <li key={link.title}>
                  <Link
                    href={link.url}
                    target={link.openInNewTab ? "_blank" : undefined}
                    onClick={() => trackFooterClick(group.title, link.title)}
                  >
                    {link.title}
                  </Link>
                </li>
              ))}
            </ul>
          ) : null}
        </nav>
      ))}
    </div>
  )
}

export function FooterSecondaryNavSkeleton() {
  return (
    <div className={styles.secondaryNavigation}>
      <nav className={styles.secondaryNavigationGroup}>
        <SkeletonShimmer width="10ch" />
        <ul className={styles.secondaryNavigationList}>
          <li>
            <SkeletonShimmer width="16ch" />
          </li>
          <li>
            <SkeletonShimmer width="16ch" />
          </li>
        </ul>
      </nav>
      <nav className={styles.secondaryNavigationGroup}>
        <SkeletonShimmer width="20ch" />
        <ul className={styles.secondaryNavigationList}>
          <li>
            <SkeletonShimmer width="25ch" />
          </li>
        </ul>
      </nav>
      <nav className={styles.secondaryNavigationGroup}>
        <SkeletonShimmer width="15ch" />
        <ul className={styles.secondaryNavigationList}>
          <li>
            <SkeletonShimmer width="30ch" />
          </li>
          <li>
            <SkeletonShimmer width="36ch" />
          </li>
          <li>
            <SkeletonShimmer width="12ch" />
          </li>
          <li>
            <SkeletonShimmer width="20ch" />
          </li>
        </ul>
      </nav>
    </div>
  )
}