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

import { CancellationRuleEnum } from "@scandic-hotels/common/constants/booking"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"

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

import { GuaranteeInfoModal } from "./GuaranteeInfoModal"

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

export default function GuaranteeInfo() {
  const intl = useIntl()
  const { guaranteeInfo, allRoomsAreCancelled, cancellationRule, priceType } =
    useMyStayStore((state) => ({
      guaranteeInfo: state.bookedRoom.guaranteeInfo,
      allRoomsAreCancelled: state.allRoomsAreCancelled,
      cancellationRule: state.bookedRoom.rateDefinition.cancellationRule,
      priceType: state.bookedRoom.priceType,
    }))
  const isFlexBooking =
    cancellationRule === CancellationRuleEnum.CancellableBefore6PM
  const isRewardNight = priceType === "points"

  const showGuaranteeInfoModal =
    isFlexBooking && !!guaranteeInfo && !isRewardNight

  if (
    allRoomsAreCancelled ||
    (!guaranteeInfo && isFlexBooking && !isRewardNight)
  ) {
    return null
  }

  return (
    <div className={styles.row}>
      <div className={styles.label}>
        <MaterialIcon icon="check_circle" />
        <Typography variant="Body/Paragraph/mdRegular">
          <p className={styles.textDefault}>
            {intl.formatMessage({
              id: "myStay.bookingGuaranteed",
              defaultMessage: "Booking guaranteed",
            })}
          </p>
        </Typography>
      </div>
      <Typography variant="Body/Paragraph/mdRegular">
        <span className={styles.guaranteeInfo}>
          {showGuaranteeInfoModal && <GuaranteeInfoModal />}
          {intl.formatMessage({
            id: "myStay.roomHeldAfter18",
            defaultMessage: "Room held after 18:00",
          })}
        </span>
      </Typography>
    </div>
  )
}