import { useIntl } from "react-intl"

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

import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
import { isMembershipLevel } from "@/utils/membershipLevels"

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: "Campaign" })
      case "Surprise":
        return intl.formatMessage({ id: "Surprise!" })
      case "Member-voucher":
        return intl.formatMessage({ id: "Voucher" })
      default:
        return null
    }
  }

  const label = getLabel()

  if (!label) return null

  return (
    <BiroScript type="two" color="red" tilted="small">
      {label}
    </BiroScript>
  )
}