import { useIntl } from "react-intl"

import { Button } from "@scandic-hotels/design-system/Button"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { ChildBedMapEnum } from "@scandic-hotels/trpc/enums/childBedMapEnum"

import AdultSelector from "../AdultSelector"
import ChildSelector from "../ChildSelector"

import styles from "../guests-rooms-picker.module.css"

import type { GuestsRoom } from "../.."

export function GuestsRoom({
  room,
  index,
  onRemove,
  containerRef,
}: {
  room: GuestsRoom
  index: number
  onRemove: (index: number) => void
  containerRef?: React.RefObject<HTMLDivElement | null>
}) {
  const intl = useIntl()

  const roomLabel = intl.formatMessage(
    {
      id: "booking.roomIndex",
      defaultMessage: "Room {roomIndex}",
    },
    {
      roomIndex: index + 1,
    }
  )

  const childrenInAdultsBed = room.childrenInRoom.filter(
    (child) => child.bed === ChildBedMapEnum.IN_ADULTS_BED
  ).length

  return (
    <div className={styles.roomContainer}>
      <section className={styles.roomDetailsContainer}>
        <Typography variant="Title/Subtitle/md" className={styles.roomHeading}>
          <p>{roomLabel}</p>
        </Typography>
        <AdultSelector roomIndex={index} currentAdults={room.adults} />
        <ChildSelector
          roomIndex={index}
          currentAdults={room.adults}
          currentChildren={room.childrenInRoom}
          childrenInAdultsBed={childrenInAdultsBed}
          containerRef={containerRef}
        />
        {index !== 0 && (
          <Button
            variant="Text"
            onPress={() => onRemove(index)}
            size="sm"
            className={styles.roomActionsButton}
            leadingIconName="delete"
          >
            {intl.formatMessage({
              id: "bookingWidget.roomsPicker.removeRoom",
              defaultMessage: "Remove room",
            })}
          </Button>
        )}
      </section>

      <Divider color="Border/Divider/Subtle" />
    </div>
  )
}