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

import ButtonLink from "@/components/ButtonLink"
import OpeningHours from "@/components/OpeningHours"
import Link from "@/components/TempDesignSystem/Link"
import { getIntl } from "@/i18n"
import { appendSlugToPathname } from "@/utils/appendSlugToPathname"

import SidePeekImages from "../../Images"

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

import type { RestaurantBarItemProps } from "@/types/components/hotelPage/sidepeek/restaurantBar"

export default async function RestaurantBarItem({
  restaurant,
}: RestaurantBarItemProps) {
  const intl = await getIntl()
  const {
    bookTableUrl,
    name,
    openingDetails,
    content,
    menus,
    restaurantPage,
    mainBody,
  } = restaurant
  const visibleImages = restaurant.content.images.slice(0, 2)

  const restaurantPageHref = restaurantPage
    ? await appendSlugToPathname(restaurant.nameInUrl)
    : null

  return (
    <div className={styles.restaurantBarItem}>
      <div className={styles.stickyHeading}>
        <Typography variant="Title/Subtitle/lg">
          <h3 className={styles.heading}>{name}</h3>
        </Typography>
      </div>
      {visibleImages.length ? <SidePeekImages images={visibleImages} /> : null}
      <Typography variant="Body/Paragraph/mdRegular">
        <p>{content.texts.descriptions.short}</p>
      </Typography>
      {openingDetails.length ? (
        <div className={styles.content}>
          <Typography variant="Title/Subtitle/md">
            <h4 className={styles.text}>
              {intl.formatMessage({
                defaultMessage: "Opening hours",
              })}
            </h4>
          </Typography>
          {openingDetails.map((details) => (
            <OpeningHours
              key={details.openingHours.name}
              openingHours={details.openingHours}
              alternateOpeningHours={details.alternateOpeningHours}
            />
          ))}
        </div>
      ) : null}
      {menus.length ? (
        <div className={styles.content}>
          <Typography variant="Title/Subtitle/md">
            <h4 className={styles.text}>
              {intl.formatMessage({
                defaultMessage: "Menus",
              })}
            </h4>
          </Typography>
          <ul className={styles.menuList}>
            {menus.map(({ name, url }) => (
              <li key={name}>
                <Link
                  href={url}
                  target="_blank"
                  textDecoration="underline"
                  color="Text/Interactive/Secondary"
                >
                  {name}
                  <MaterialIcon
                    icon="open_in_new"
                    size={20}
                    color="CurrentColor"
                  />
                </Link>
              </li>
            ))}
          </ul>
        </div>
      ) : null}
      {/* If (restaurantPageHref && bookTableUrl && mainBody==empty), link to external restaurant page. */}
      {bookTableUrl || restaurantPageHref ? (
        <div className={styles.ctaWrapper}>
          {bookTableUrl ? (
            <ButtonLink
              variant="Primary"
              color="Primary"
              size="Medium"
              typography="Body/Paragraph/mdBold"
              href={bookTableUrl}
              target="_blank"
              trackingId="book a table"
              trackingParams={{ restaurantName: name }}
            >
              {restaurantPageHref && !mainBody?.length
                ? intl.formatMessage({
                    defaultMessage: "Read more",
                  })
                : intl.formatMessage({
                    defaultMessage: "Book a table",
                  })}
            </ButtonLink>
          ) : null}
          {restaurantPageHref && mainBody?.length ? (
            <ButtonLink
              variant="Secondary"
              color="Primary"
              size="Medium"
              typography="Body/Paragraph/mdBold"
              href={restaurantPageHref}
            >
              {intl.formatMessage(
                {
                  defaultMessage: "Discover {name}",
                },
                { name: name }
              )}
            </ButtonLink>
          ) : null}
        </div>
      ) : null}
    </div>
  )
}
