"use client"

import Image from "@/components/Image"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import Link from "@/components/TempDesignSystem/Link"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import useLang from "@/hooks/useLang"
import { trackFooterClick, trackSocialMediaClick } from "@/utils/tracking"

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

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

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

  return (
    <div className={styles.secondaryNavigation}>
      {appDownloads && (
        <nav className={styles.secondaryNavigationGroup}>
          <Caption
            color="textMediumContrast"
            textTransform="uppercase"
            type="label"
          >
            {appDownloads.title}
          </Caption>
          <ul className={styles.secondaryNavigationList}>
            {appDownloads.links.map(
              ({ href, type }) =>
                href && (
                  <li key={type} className={styles.appDownloadItem}>
                    <a
                      href={href.href}
                      target="_blank"
                      aria-label={href.title}
                      onClick={() => trackSocialMediaClick(href.title)}
                    >
                      <Image
                        src={
                          AppDownLoadLinks[
                            `${type}_${lang}` as keyof typeof AppDownLoadLinks
                          ]
                        }
                        alt=""
                        width={125}
                        height={40}
                      />
                    </a>
                  </li>
                )
            )}
          </ul>
        </nav>
      )}
      {secondaryLinks.map((group) => (
        <nav className={styles.secondaryNavigationGroup} key={group.title}>
          <Caption
            color="textMediumContrast"
            textTransform="uppercase"
            type="label"
          >
            {group.title}
          </Caption>
          <ul className={styles.secondaryNavigationList}>
            {group?.links?.map((link) => (
              <li key={link.title} className={styles.secondaryNavigationItem}>
                <Link
                  href={link.url}
                  target={link.openInNewTab ? "_blank" : undefined}
                  color="burgundy"
                  onClick={() => trackFooterClick(group.title, link.title)}
                >
                  {link.title}
                </Link>
              </li>
            ))}
          </ul>
        </nav>
      ))}
    </div>
  )
}

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