web/packages/booking-flow/lib/components/RoomDetailsSidePeek/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 { trackOpenSidePeekEvent } from "@scandic-hotels/tracking/componentEvents"

import { RoomSidePeekContent } from "./RoomSidePeekContent"

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

enum SidePeekEnum {
  roomDetails = "room-detail-side-peek",
}

interface RoomDetailsSidePeekProps {
  hotelId: string
  room: Room
  triggerLabel: string
  roomTypeCode?: string
  buttonVariant?: "primary" | "secondary"
  wrapping?: boolean
}

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

export function RoomDetailsSidePeek({
  hotelId,
  room,
  roomTypeCode,
  triggerLabel,
  wrapping = true,
  buttonVariant: variant = "primary",
}: RoomDetailsSidePeekProps) {
  const buttonProps = buttonPropsMap[variant]

  return (
    <DialogTrigger>
      <Button
        {...buttonProps}
        wrapping={wrapping}
        onPress={() =>
          trackOpenSidePeekEvent({
            name: SidePeekEnum.roomDetails,
            hotelId,
            roomTypeCode,
            includePathname: true,
          })
        }
      >
        {triggerLabel}
        <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
      </Button>

      <SidePeekSelfControlled title={room.name}>
        <RoomSidePeekContent room={room} />
      </SidePeekSelfControlled>
    </DialogTrigger>
  )
}