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 { getRewardType } from "@/utils/rewards"

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

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

  function getLabel(rewardType?: string, rewardTierLevel?: string) {
    const type = getRewardType(rewardType)

    switch (type) {
      case "Tier":
        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(rewardType, rewardTierLevel)

  if (!label) return null

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