import { useIntl } from "react-intl"

import { isMembershipLevel } from "@scandic-hotels/common/utils/membershipLevels"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { TIER_TO_FRIEND_MAP } from "@/constants/membershipLevels"

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

import type { ScriptedRewardTextProps } from "@/types/components/myPages/myPage/accountPage"

export default function ScriptedRewardText({
  reward,
}: ScriptedRewardTextProps) {
  const intl = useIntl()

  function getLabel() {
    switch (reward.rewardType) {
      case "Tier": {
        const { rewardTierLevel } = reward
        return rewardTierLevel && isMembershipLevel(rewardTierLevel)
          ? TIER_TO_FRIEND_MAP[rewardTierLevel]
          : null
      }
      case "Campaign":
        return intl.formatMessage({
          id: "booking.campaign",
          defaultMessage: "Campaign",
        })
      case "Surprise":
        return intl.formatMessage({
          id: "rewards.surprise",
          defaultMessage: "Surprise!",
        })
      case "Member-voucher":
        return intl.formatMessage({
          id: "rewards.voucher",
          defaultMessage: "Voucher",
        })
      default:
        return null
    }
  }

  const label = getLabel()

  if (!label) return null

  return (
    <Typography variant="Title/Decorative/md">
      <span className={styles.scriptedText}>{label}</span>
    </Typography>
  )
}
