"use client"

import { useIntl } from "react-intl"

import JsonToHtml from "@/components/JsonToHtml"
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 { Surprise, Tier } from "@/types/components/myPages/rewards"

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

  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>

        {reward.redeemLocation !== "Non-redeemable" && (
          <>
            {redeemStep === "initial" && (
              <Body textAlign="center">{reward.description}</Body>
            )}

            {redeemStep === "confirmation" && reward.redeem_description && (
              <JsonToHtml
                embeds={
                  reward.redeem_description.embedded_itemsConnection.edges
                }
                nodes={reward.redeem_description.json.children}
              />
            )}

            {redeemStep === "redeemed" &&
              isRestaurantOnSiteTierReward(reward) &&
              membershipNumber && (
                <MembershipNumberBadge membershipNumber={membershipNumber} />
              )}
          </>
        )}
        {reward.redeemLocation === "Non-redeemable" &&
          reward.redeem_description && (
            <JsonToHtml
              embeds={reward.redeem_description.embedded_itemsConnection.edges}
              nodes={reward.redeem_description.json.children}
            />
          )}
      </div>

      {reward.redeemLocation !== "Non-redeemable" ? (
        <>
          {redeemStep === "initial" && (
            <footer className={styles.modalFooter}>
              <Button
                onClick={() => setRedeemStep("confirmation")}
                intent="primary"
                theme="base"
              >
                {intl.formatMessage({
                  defaultMessage: "Redeem benefit",
                })}
              </Button>
            </footer>
          )}

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