import { useIntl } from "react-intl"

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

import Button from "@/components/TempDesignSystem/Button"
import Divider from "@/components/TempDesignSystem/Divider"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

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

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

import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums"
import type { GuestsRoom } from "@/types/components/bookingWidget/guestsRoomsPicker"

export function GuestsRoom({
  room,
  index,
  onRemove,
}: {
  room: GuestsRoom
  index: number
  onRemove: (index: number) => void
}) {
  const intl = useIntl()
  const roomLabel = intl.formatMessage(
    { id: "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}>
        <Subtitle type="two" className={styles.roomHeading}>
          {roomLabel}
        </Subtitle>
        <AdultSelector
          roomIndex={index}
          currentAdults={room.adults}
          currentChildren={room.childrenInRoom}
          childrenInAdultsBed={childrenInAdultsBed}
        />
        <ChildSelector
          roomIndex={index}
          currentAdults={room.adults}
          currentChildren={room.childrenInRoom}
          childrenInAdultsBed={childrenInAdultsBed}
        />
        {index !== 0 && (
          <Button
            intent="text"
            variant="icon"
            wrapping
            theme="secondaryLight"
            onPress={() => onRemove(index)}
            size="small"
            className={styles.roomActionsButton}
          >
            <MaterialIcon icon="delete" color="CurrentColor" />
            {intl.formatMessage({ id: "Remove room" })}
          </Button>
        )}
      </section>
      <Divider color="primaryLightSubtle" />
    </div>
  )
}