import { getFooter, getLanguageSwitcher } from "@/lib/trpc/memoizedRequests"

import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
import Image from "@/components/Image"
import LanguageSwitcher from "@/components/LanguageSwitcher"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import Link from "@/components/TempDesignSystem/Link"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"

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

import type { SocialIconsProps } from "@/types/components/footer/socialIcons"
import type { IconName } from "@/types/components/icon"

function SocialIcon({ iconName }: SocialIconsProps) {
  const SocialIcon = getIconByIconName(iconName as IconName)
  return SocialIcon ? <SocialIcon color="white" /> : <span>{iconName}</span>
}

export default async function FooterDetails() {
  const lang = getLang()
  const intl = await getIntl()
  // preloaded
  const footer = await getFooter()
  const languages = await getLanguageSwitcher()
  const currentYear = new Date().getFullYear()

  return (
    <section className={styles.details}>
      <div className={styles.topContainer}>
        <Link href={`/${lang}`}>
          <Image
            alt="Scandic Hotels logo"
            height={22}
            src="/_static/img/scandic-logotype-white.svg"
            width={103}
          />
        </Link>
        <nav className={styles.socialNav}>
          {footer?.socialMedia.links.map(
            (link) =>
              link.href && (
                <a
                  color="white"
                  href={link.href.href}
                  key={link.href.title}
                  target="_blank"
                  aria-label={link.href.title}
                >
                  <SocialIcon iconName={link.href.title} />
                </a>
              )
          )}
        </nav>
      </div>
      <div className={styles.bottomContainer}>
        <div className={styles.copyrightContainer}>
          <Footnote type="label" textTransform="uppercase">
            © {currentYear}{" "}
            {intl.formatMessage({ id: "Copyright all rights reserved" })}
          </Footnote>
        </div>
        <div className={styles.navigationContainer}>
          <nav className={styles.navigation}>
            {footer?.tertiaryLinks.map(
              (link) =>
                link.url && (
                  <Footnote
                    asChild
                    type="label"
                    textTransform="uppercase"
                    key={link.title}
                  >
                    <Link
                      className={styles.link}
                      color="peach50"
                      href={link.url}
                      target="_blank"
                    >
                      {link.title}
                    </Link>
                  </Footnote>
                )
            )}
          </nav>
          {languages?.urls ? (
            <LanguageSwitcher type="footer" urls={languages.urls} />
          ) : null}
        </div>
      </div>
    </section>
  )
}

export async function FooterDetailsSkeleton() {
  const lang = getLang()
  const intl = await getIntl()
  const currentYear = new Date().getFullYear()

  return (
    <section className={styles.details}>
      <div className={styles.topContainer}>
        <Link href={`/${lang}`}>
          <Image
            alt="Scandic Hotels logo"
            height={22}
            src="/_static/img/scandic-logotype-white.svg"
            width={103}
          />
        </Link>
        <nav className={styles.socialNav}>
          <SkeletonShimmer width="10ch" height="20px" contrast="dark" />
        </nav>
      </div>
      <div className={styles.bottomContainer}>
        <div className={styles.copyrightContainer}>
          <Footnote type="label" textTransform="uppercase">
            © {currentYear}{" "}
            {intl.formatMessage({ id: "Copyright all rights reserved" })}
          </Footnote>
        </div>
        <div className={styles.navigationContainer}>
          <nav className={styles.navigation}>
            <SkeletonShimmer width="40ch" height="20px" contrast="dark" />
          </nav>
        </div>
      </div>
    </section>
  )
}