"use client"

import { 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 { 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]
  const [isOpen, setIsOpen] = useState(false)

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

      <SidePeekSelfControlled
        title={room.name}
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
      >
        <RoomSidePeekContent room={room} />
      </SidePeekSelfControlled>
    </>
  )
}