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

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

import Image from "@/components/Image"
import LanguageSwitcher from "@/components/LanguageSwitcher"
import Link from "@/components/TempDesignSystem/Link"
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 = await getLang()
  const intl = await getIntl()
  // preloaded
  const footer = await getFooter()
  const currentYear = new Date().getFullYear()

  return (
    <div 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}>
        <Typography variant="Tag/sm">
          <p>
            {intl.formatMessage(
              {
                defaultMessage:
                  "© {currentYear} Scandic Hotels all rights reserved",
              },
              { currentYear }
            )}
          </p>
        </Typography>
        <div className={styles.navigationContainer}>
          <nav className={styles.navigation}>
            {footer?.tertiaryLinks.map((link) => (
              <Typography key={link.title} variant="Tag/sm">
                <Link
                  className={styles.link}
                  color="peach50"
                  href={link.url}
                  target="_blank"
                >
                  {link.title}
                </Link>
              </Typography>
            ))}
          </nav>
          <LanguageSwitcher type="footer" />
        </div>
      </div>
    </div>
  )
}

export async function FooterDetailsSkeleton() {
  const lang = await 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}>
        <Typography variant="Tag/sm">
          <p>
            {intl.formatMessage(
              {
                defaultMessage:
                  "© {currentYear} Scandic Hotels all rights reserved",
              },
              { currentYear }
            )}
          </p>
        </Typography>
        <div className={styles.navigationContainer}>
          <nav className={styles.navigation}>
            <SkeletonShimmer width="40ch" height="20px" contrast="dark" />
          </nav>
        </div>
      </div>
    </section>
  )
}