"use client"
import { useIntl } from "react-intl"

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

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

import styles from "./guests.module.css"

export default function Guests() {
  const intl = useIntl()
  const rooms = useMyStayStore((state) => state.rooms)

  const adults = rooms.reduce((acc, room) => acc + room.adults, 0)

  const children = rooms.reduce(
    (acc, room) => acc + (room.childrenAges?.length ?? 0),
    0
  )

  const adultsMsg = intl.formatMessage(
    {
      defaultMessage: "{adults, plural, one {# adult} other {# adults}}",
    },
    { adults }
  )

  const childrenMsg = intl.formatMessage(
    {
      defaultMessage: "{children, plural, one {# child} other {# children}}",
    },
    { children }
  )

  const adultsOnlyMsg = adultsMsg
  const adultsAndChildrenMsg = [adultsMsg, childrenMsg].join(" · ")

  let guests = ""
  if (children > 0) {
    guests = adultsAndChildrenMsg
  } else {
    guests = adultsOnlyMsg
  }

  return (
    <div className={styles.row}>
      <div className={styles.label}>
        <MaterialIcon icon="person" />
        <Typography variant="Body/Paragraph/mdRegular">
          <p className={styles.textDefault}>
            {intl.formatMessage({ defaultMessage: "Guests" })}
          </p>
        </Typography>
      </div>
      <Typography variant="Body/Paragraph/mdRegular">
        <p className={styles.guests}>{guests}</p>
      </Typography>
    </div>
  )
}