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

import OpeningHours from "@/components/OpeningHours"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import { getIntl } from "@/i18n"

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

import { Country } from "@/types/enums/country"
import type { Hotel, Restaurant } from "@/types/hotel"

interface RestaurantSidebarProps {
  hotelAddress: Hotel["address"]
  restaurant: Restaurant
}

export default async function RestaurantSidebar({
  hotelAddress,
  restaurant,
}: RestaurantSidebarProps) {
  const intl = await getIntl()

  const { openingDetails, phoneNumber, email, bookTableUrl } = restaurant

  return (
    <>
      {openingDetails.length ? (
        <div className={styles.content}>
          <Typography variant="Title/xs" className={styles.heading}>
            <h3>
              {intl.formatMessage({
                defaultMessage: "Opening hours",
              })}
            </h3>
          </Typography>
          {openingDetails.map((details) => (
            <OpeningHours
              key={details.openingHours.name}
              openingHours={details.openingHours}
              alternateOpeningHours={details.alternateOpeningHours}
              heading={details.openingHours.name}
            />
          ))}
        </div>
      ) : null}
      {bookTableUrl && (
        <div className={styles.buttonContainer}>
          <Button intent="primary" theme="base" asChild>
            <a href={bookTableUrl}>
              {intl.formatMessage({
                defaultMessage: "Book a table",
              })}
            </a>
          </Button>
        </div>
      )}
      {restaurant.menus.length ? (
        <div className={styles.content}>
          <Typography variant="Title/xs" className={styles.heading}>
            <h3>
              {intl.formatMessage({
                defaultMessage: "Menus",
              })}
            </h3>
          </Typography>
          <ul className={styles.menuList}>
            {restaurant.menus.map(({ name, url }) => (
              <li key={name}>
                <Link
                  href={url}
                  color="Text/Interactive/Secondary"
                  textDecoration="underline"
                >
                  {name}
                  <MaterialIcon
                    icon="open_in_new"
                    size={20}
                    color="CurrentColor"
                  />
                </Link>
              </li>
            ))}
          </ul>
        </div>
      ) : null}
      <div className={styles.content}>
        <Typography variant="Title/xs" className={styles.heading}>
          <h3>
            {intl.formatMessage({
              defaultMessage: "Address",
            })}
          </h3>
        </Typography>
        <Typography variant="Body/Paragraph/mdRegular" className={styles.text}>
          <div>
            <p>{hotelAddress.streetAddress}</p>
            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
            <p>{`${hotelAddress.zipCode} ${hotelAddress.city}`}</p>
          </div>
        </Typography>
      </div>
      {(phoneNumber || email) && (
        <div className={styles.content}>
          <Typography variant="Title/xs" className={styles.heading}>
            <h3>
              {intl.formatMessage({
                defaultMessage: "Contact us",
              })}
            </h3>
          </Typography>
          <div className={styles.contactDetails}>
            {phoneNumber && (
              <>
                <Link href={`tel:${phoneNumber}`}>{phoneNumber}</Link>
                {hotelAddress.country === Country.Finland ? (
                  <Typography
                    variant="Body/Paragraph/mdRegular"
                    className={styles.text}
                  >
                    <p>
                      {intl.formatMessage({
                        defaultMessage: "Price 0,16 €/min + local call charges",
                      })}
                    </p>
                  </Typography>
                ) : null}
              </>
            )}
            {email && (
              <Link textDecoration="underline" href={`mailto:${email}`}>
                {email}
              </Link>
            )}
          </div>
        </div>
      )}
    </>
  )
}
