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

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 SocialLink from "./SocialLink"

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

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(
            ({ href }) => href && <SocialLink link={href} key={href.title} />
          )}
        </nav>
      </div>
      <div className={styles.bottomContainer}>
        <div className={styles.copyrightContainer}>
          <Footnote type="label" textTransform="uppercase">
            {intl.formatMessage(
              { id: "© {currentYear} Scandic AB All rights reserved" },
              { currentYear }
            )}
          </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">
            {intl.formatMessage(
              { id: "© {currentYear} Scandic AB All rights reserved" },
              { currentYear }
            )}
          </Footnote>
        </div>
        <div className={styles.navigationContainer}>
          <nav className={styles.navigation}>
            <SkeletonShimmer width="40ch" height="20px" contrast="dark" />
          </nav>
        </div>
      </div>
    </section>
  )
}