web/packages/booking-flow/lib/contexts/SelectRate/DebugButton.tsx

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

import { useSelectRateContext } from "./SelectRateContext"
import { type SelectRateContext } from "./types"

export function DebugButton() {
  const context = useSelectRateContext()

  if (process.env.NODE_ENV !== "development") {
    return null
  }

  const handleClick = () => {
    const allRoomAvailability = getAllRoomAvailability(context)
    const allRoomPackages = getAllRoomPackages(context)
    console.log("%c SelectRateContext: ", "background: #AD0015; color: #FFF", {
      ...context,
      ...allRoomAvailability,
      ...allRoomPackages,
    })
  }

  return (
    <Button
      style={{
        position: "fixed",
        bottom: "1rem",
        right: "4rem",
        background: "green",
        border: "none",
        padding: "0.5rem 1rem",
        zIndex: 1000,
      }}
      onClick={handleClick}
    >
      {/* // eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
      DEBUG
    </Button>
  )
}

function getAllRoomAvailability(context: SelectRateContext) {
  const obj: Record<
    string,
    ReturnType<SelectRateContext["getAvailabilityForRoom"]> | null
  > = {}
  for (let i = 0; i < context.input.roomCount; i++) {
    const key = `getAvailabilityForRoom(${i})`
    const availability = context.getAvailabilityForRoom(i) ?? null
    obj[key] = availability
  }

  return obj
}

function getAllRoomPackages(context: SelectRateContext) {
  const obj: Record<
    string,
    ReturnType<SelectRateContext["getPackagesForRoom"]> | null
  > = {}
  for (let i = 0; i < context.input.roomCount; i++) {
    const key = `getPackagesForRoom(${i})`
    const availability = context.getPackagesForRoom(i) ?? null
    obj[key] = availability
  }

  return obj
}