"use client"

import { useIntl } from "react-intl"

import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import { isRestaurantOnSiteTierReward } from "@/utils/rewards"

import { RewardIcon } from "../RewardIcon"
import ActiveRedeemedBadge from "./ActiveRedeemedBadge"
import MembershipNumberBadge from "./MembershipNumberBadge"
import TimedRedeemedBadge from "./TimedRedeemedBadge"
import useRedeemFlow from "./useRedeemFlow"

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

import type { RewardWithRedeem } from "@/server/routers/contentstack/reward/output"

export default function Tier({
  reward,
  membershipNumber,
}: {
  reward: RewardWithRedeem
  membershipNumber: string
}) {
  const { onRedeem, redeemStep, setRedeemStep, isRedeeming } =
    useRedeemFlow(reward)
  const intl = useIntl()

  return (
    <>
      <div className={styles.modalContent}>
        {redeemStep === "redeemed" && (
          <div className={styles.badge}>
            {isRestaurantOnSiteTierReward(reward) ? (
              <ActiveRedeemedBadge />
            ) : (
              <TimedRedeemedBadge />
            )}
          </div>
        )}
        <RewardIcon rewardId={reward.reward_id} />
        <Title level="h3" textAlign="center" textTransform="regular">
          {reward.label}
        </Title>

        {redeemStep === "initial" && (
          <Body textAlign="center">{reward.description}</Body>
        )}

        {redeemStep === "confirmation" && (
          <Body textAlign="center">{reward.redeem_description}</Body>
        )}

        {redeemStep === "redeemed" &&
          isRestaurantOnSiteTierReward(reward) &&
          membershipNumber && (
            <MembershipNumberBadge membershipNumber={membershipNumber} />
          )}
      </div>

      {redeemStep === "initial" && (
        <footer className={styles.modalFooter}>
          <Button
            onClick={() => setRedeemStep("confirmation")}
            intent="primary"
            theme="base"
          >
            {intl.formatMessage({ id: "Redeem benefit" })}
          </Button>
        </footer>
      )}

      {redeemStep === "confirmation" && (
        <footer className={styles.modalFooter}>
          <Button
            onClick={onRedeem}
            disabled={isRedeeming}
            intent="primary"
            theme="base"
          >
            {intl.formatMessage({ id: "Yes, redeem" })}
          </Button>
          <Button onClick={close} intent="secondary" theme="base">
            {intl.formatMessage({ id: "Go back" })}
          </Button>
        </footer>
      )}
    </>
  )
}
