web/packages/booking-flow/lib/components/HotelSidePeek/index.tsx

"use client"

import { useIntl } from "react-intl"

import Accordion from "@scandic-hotels/design-system/Accordion"
import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem"
import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
import { IconName } from "@scandic-hotels/design-system/Icons/iconName"
import SidePeek from "@scandic-hotels/design-system/SidePeek"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { SidePeekEnum } from "../../stores/sidepeek"
import { useTrackingContext } from "../../trackingContext"
import AdditionalAmenities from "../AdditionalAmenities"
import Contact from "../Contact"
import BreakfastAccordionItem from "../SidePeekAccordions/BreakfastAccordionItem"
import CheckInCheckOutAccordionItem from "../SidePeekAccordions/CheckInCheckOutAccordionItem"
import ParkingAccordionItem from "../SidePeekAccordions/ParkingAccordionItem"

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

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

type HotelSidePeekProps = {
  hotel: Hotel & { url: string | null }
  restaurants: Restaurant[]
  additionalHotelData: AdditionalData | undefined
  activeSidePeek: SidePeekEnum
  close: () => void
  showCTA: boolean
}

export default function HotelSidePeek({
  hotel,
  restaurants,
  additionalHotelData,
  activeSidePeek,
  close,
}: HotelSidePeekProps) {
  const intl = useIntl()

  return (
    <SidePeek
      title={hotel.name}
      isOpen={activeSidePeek === SidePeekEnum.hotelDetails}
      handleClose={close}
      closeLabel={intl.formatMessage({
        defaultMessage: "Close",
      })}
    >
      <div className={styles.content}>
        <Typography variant="Title/Subtitle/lg">
          <h3>
            {intl.formatMessage({ defaultMessage: "Practical information" })}
          </h3>
        </Typography>
        <Contact hotel={hotel} />

        <Accordion>
          <ParkingAccordionItem
            parking={hotel.parking}
            elevatorPitch={additionalHotelData?.hotelParking.elevatorPitch}
          />
          <BreakfastAccordionItem
            restaurants={restaurants}
            hotelType={hotel.hotelType}
          />
          <CheckInCheckOutAccordionItem
            checkInData={hotel.hotelFacts.checkin}
          />
          <AccessibilityAccordionItem
            elevatorPitch={additionalHotelData?.hotelSpecialNeeds.elevatorPitch}
          />
          <AdditionalAmenities amenities={hotel.detailedFacilities} />
        </Accordion>
        {hotel.url ? (
          <ButtonLink
            href={hotel.url}
            variant="Secondary"
            size="Medium"
            typography="Body/Paragraph/mdBold"
          >
            {intl.formatMessage({
              defaultMessage: "Read more about the hotel",
            })}
          </ButtonLink>
        ) : null}
      </div>
    </SidePeek>
  )
}

type AccessibilityAccordionItemProps = {
  elevatorPitch?: string
}

function AccessibilityAccordionItem({
  elevatorPitch,
}: AccessibilityAccordionItemProps) {
  const intl = useIntl()
  const tracking = useTrackingContext()

  if (!elevatorPitch) {
    return null
  }

  return (
    <AccordionItem
      title={intl.formatMessage({
        defaultMessage: "Accessibility",
      })}
      iconName={IconName.Accessibility}
      className={styles.accordionItem}
      variant="sidepeek"
      onOpen={() => tracking.trackAccordionItemOpen("amenities:accessibility")}
    >
      <div className={styles.accessibilityContent}>
        <Typography variant="Body/Paragraph/mdRegular">
          <p>{elevatorPitch}</p>
        </Typography>
      </div>
    </AccordionItem>
  )
}