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

"use client"

import { type ReactNode, useState } from "react"

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 { 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: ReactNode
  buttonVariant: "primary" | "secondary"
  wrapping?: boolean
}

const buttonPropsMap: Record<
  HotelDetailsSidePeekProps["buttonVariant"],
  Pick<React.ComponentProps<typeof Button>, "variant" | "color" | "size">
> = {
  primary: {
    variant: "Text",
    color: "Primary",
    size: "md",
  },
  secondary: {
    variant: "Secondary",
    color: "Inverted",
    size: "sm",
  },
}

export function HotelDetailsSidePeek({
  hotel,
  restaurants,
  additionalHotelData,
  triggerLabel,
  wrapping = true,
  buttonVariant,
}: HotelDetailsSidePeekProps) {
  const buttonProps = buttonPropsMap[buttonVariant]
  const [isOpen, setIsOpen] = useState(false)

  return (
    <>
      <Button
        {...buttonProps}
        wrapping={wrapping}
        onPress={() => {
          setIsOpen(true)
          trackOpenSidePeekEvent({
            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}
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
      >
        <HotelSidePeekContent
          hotel={hotel}
          restaurants={restaurants}
          additionalHotelData={additionalHotelData}
        />
      </SidePeekSelfControlled>
    </>
  )
}