"use client"

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

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

import { useMyStayStore } from "@/stores/my-stay"

import BookedRoomSidePeek from "@/components/SidePeeks/BookedRoomSidePeek"
import { trackOpenSidePeekEvent } from "@/utils/tracking"

import { SidePeekEnum } from "@/types/sidepeek"
import type { SafeUser } from "@/types/user"

interface RoomDetailsSidePeekProps {
  user: SafeUser
}

export default function RoomDetailsSidePeek({
  user,
}: RoomDetailsSidePeekProps) {
  const intl = useIntl()
  const bookedRoom = useMyStayStore((state) => state.bookedRoom)

  return (
    <DialogTrigger>
      <Button
        intent="text"
        size="small"
        theme="base"
        variant="icon"
        wrapping
        onPress={() => {
          trackOpenSidePeekEvent({
            name: SidePeekEnum.bookedRoomDetails,
            hotelId: bookedRoom.hotelId,
            includePathname: true,
          })
        }}
      >
        {intl.formatMessage({ defaultMessage: "See room details" })}
        <MaterialIcon icon="chevron_right" size={14} color="CurrentColor" />
      </Button>
      <BookedRoomSidePeek
        hotelRoom={bookedRoom.room}
        room={bookedRoom}
        user={user}
      />
    </DialogTrigger>
  )
}