"use client"

import { useIntl } from "react-intl"

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

import { Toast } from "@/components/TempDesignSystem/Toasts"
import { trackMyStayPageLink } from "@/utils/tracking"

import SummaryCard from "./SummaryCard"

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

import type { Hotel } from "@scandic-hotels/trpc/types/hotel"

interface BookingSummaryProps {
  hotel: Hotel
}

export default function BookingSummary({ hotel }: BookingSummaryProps) {
  const intl = useIntl()

  const directionsUrl = `https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(
    `${hotel.name}, ${hotel.address.streetAddress}, ${hotel.address.zipCode} ${hotel.address.city}`
  )}`
  return (
    <div className={styles.bookingSummary}>
      <Typography variant="Title/sm">
        <h2 className={styles.title}>
          {intl.formatMessage({
            defaultMessage: "Practical information",
          })}
        </h2>
      </Typography>
      <div className={styles.bookingSummaryContent}>
        <SummaryCard
          title={
            <Typography variant="Body/Paragraph/mdBold">
              <p>{hotel.name}</p>
            </Typography>
          }
          image={{
            src: "/_static/img/scandic-service.svg",
            alt: "Scandic service",
          }}
          texts={[
            hotel.address.streetAddress,
            `${hotel.address.zipCode} ${hotel.address.city}`,
          ]}
          supportingText={intl.formatMessage(
            {
              defaultMessage: "Long {long} ∙ Lat {lat}",
            },
            {
              lat: hotel.location.latitude,
              long: hotel.location.longitude,
            }
          )}
          links={[
            {
              href: directionsUrl,
              text: intl.formatMessage({
                defaultMessage: "Directions",
              }),
              icon: (
                <MaterialIcon
                  icon="directions"
                  size={20}
                  color="Icon/Interactive/Default"
                />
              ),
              onClick: () => trackMyStayPageLink("see on map"),
            },
            {
              href: `mailto:${hotel.contactInformation.email}`,
              text: intl.formatMessage({
                defaultMessage: "Email",
              }),
              icon: (
                <MaterialIcon
                  icon="mail"
                  size={20}
                  color="Icon/Interactive/Default"
                />
              ),
              onClick: () => trackMyStayPageLink("email us"),
            },
            {
              href: hotel.contactInformation.websiteUrl,
              text: intl.formatMessage({
                defaultMessage: "Homepage",
              }),
              icon: (
                <MaterialIcon
                  icon="link"
                  size={20}
                  color="Icon/Interactive/Default"
                />
              ),
              onClick: () => trackMyStayPageLink("hotel homepage"),
            },
          ]}
        />
      </div>
      {hotel.specialAlerts.length > 0 && (
        <div className={styles.toast}>
          <Toast variant="info">
            <ul>
              {hotel.specialAlerts.map((alert) => (
                <li key={alert.id}>
                  <Typography variant="Body/Paragraph/mdRegular">
                    <span>{alert.text}</span>
                  </Typography>
                </li>
              ))}
            </ul>
          </Toast>
        </div>
      )}
    </div>
  )
}