import { useIntl } from "react-intl"

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

import Row from "./Row"

export default function BedPreference() {
  const intl = useIntl()

  const bedType = useMyStayStore((state) => state.bookedRoom.room?.bedType)

  if (!bedType) {
    return null
  }

  const mainBedWidthValueMsg = intl.formatMessage(
    {
      defaultMessage: "{value} cm",
    },
    {
      value: bedType.mainBed.widthRange.min,
    }
  )

  const mainBedWidthRangeMsg = intl.formatMessage(
    {
      defaultMessage: "{min}–{max} cm",
    },
    {
      min: bedType.mainBed.widthRange.min,
      max: bedType.mainBed.widthRange.max,
    }
  )

  const sameWidth =
    bedType.mainBed.widthRange.min === bedType.mainBed.widthRange.max
  const widthMsg = sameWidth ? mainBedWidthValueMsg : mainBedWidthRangeMsg
  const text = `${bedType.mainBed.description} (${widthMsg})`

  return (
    <Row
      icon="bed"
      text={text}
      title={intl.formatMessage({
        defaultMessage: "Bed preference",
      })}
    />
  )
}