"use client"
import { useSession } from "next-auth/react"
import { useIntl } from "react-intl"

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

import { useRatesStore } from "@/stores/select-rate"

import Divider from "@/components/TempDesignSystem/Divider"
import { useRoomContext } from "@/contexts/SelectRate/Room"
import { isValidClientSession } from "@/utils/clientSession"

import { getBreakfastMessage } from "./getBreakfastMessage"

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

import { BookingCodeFilterEnum } from "@/types/enums/bookingCodeFilter"

export default function BreakfastMessage({
  breakfastIncludedMember,
  breakfastIncludedStandard,
  hasRegularRates,
}: {
  breakfastIncludedMember: boolean
  breakfastIncludedStandard: boolean
  hasRegularRates: boolean
}) {
  const intl = useIntl()
  const { roomNr, selectedFilter } = useRoomContext()

  const { hotelType } = useRatesStore((state) => ({
    hotelType: state.hotelType,
  }))
  const { data: session } = useSession()
  const isUserLoggedIn = isValidClientSession(session)

  const breakfastMessages = {
    included: intl.formatMessage({
      defaultMessage: "Breakfast is included.",
    }),
    notIncluded: intl.formatMessage({
      defaultMessage: "Breakfast excluded, add in next step.",
    }),
    noSelection: intl.formatMessage({
      defaultMessage: "Select a rate",
    }),
    scandicgo: intl.formatMessage({
      defaultMessage: "Breakfast deal can be purchased at the hotel.",
    }),
  }

  const breakfastMessage = getBreakfastMessage(
    breakfastIncludedStandard,
    breakfastIncludedMember,
    hotelType,
    isUserLoggedIn,
    breakfastMessages,
    roomNr
  )

  const isDiscount = selectedFilter === BookingCodeFilterEnum.Discounted

  if (isDiscount || !hasRegularRates) {
    return null
  }

  return (
    <div className={styles.message}>
      <Divider className={styles.divider} color="borderDividerSubtle" />
      <Typography
        variant={"Body/Supporting text (caption)/smRegular"}
        className={styles.breakfastMessage}
      >
        <p>{breakfastMessage}</p>
      </Typography>
      <Divider className={styles.divider} color="borderDividerSubtle" />
    </div>
  )
}
