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

"use client"

import { DialogTrigger } from "react-aria-components"

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

import { useTrackingContext } from "../../trackingContext"
import { HotelSidePeekContent } from "./HotelSidePeekContent"

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

enum SidePeekEnum {
  hotelDetails = "hotel-detail-side-peek",
}

interface HotelDetailsSidePeekProps {
  hotel: Hotel & { url: string | null }
  restaurants: Restaurant[]
  additionalHotelData: AdditionalData | undefined
  triggerLabel: string
  buttonVariant: "primary" | "secondary"
  wrapping?: boolean
}

const buttonPropsMap: Record<
  HotelDetailsSidePeekProps["buttonVariant"],
  Pick<
    React.ComponentProps<typeof Button>,
    "variant" | "color" | "size" | "typography"
  >
> = {
  primary: {
    variant: "Text",
    color: "Primary",
    size: "Medium",
    typography: "Body/Paragraph/mdBold",
  },
  secondary: {
    variant: "Secondary",
    color: "Inverted",
    size: "Small",
    typography: "Body/Supporting text (caption)/smBold",
  },
}

export function HotelDetailsSidePeek({
  hotel,
  restaurants,
  additionalHotelData,
  triggerLabel,
  wrapping = true,
  buttonVariant,
}: HotelDetailsSidePeekProps) {
  const tracking = useTrackingContext()
  const buttonProps = buttonPropsMap[buttonVariant]

  return (
    <DialogTrigger>
      <Button
        {...buttonProps}
        wrapping={wrapping}
        onPress={() =>
          tracking.trackOpenSidePeek({
            name: SidePeekEnum.hotelDetails,
            hotelId: hotel.operaId,
            includePathname: true,
          })
        }
      >
        {triggerLabel}
        <MaterialIcon
          icon="chevron_right"
          size={buttonVariant === "primary" ? 24 : 20}
          color="CurrentColor"
        />
      </Button>

      <SidePeekSelfControlled title={hotel.name}>
        <HotelSidePeekContent
          hotel={hotel}
          restaurants={restaurants}
          additionalHotelData={additionalHotelData}
        />
      </SidePeekSelfControlled>
    </DialogTrigger>
  )
}