"use client"

import { createContext, useCallback, useContext, useState } from "react"

import { trpc } from "@/lib/trpc/client"

import type { RedeemFlowContext } from "@/types/components/myPages/myPage/accountPage"
import type { RewardWithRedeem } from "@/server/routers/contentstack/reward/output"

export const RedeemContext = createContext<RedeemFlowContext>({
  redeemStep: "initial",
  setRedeemStep: () => undefined,
})

export default function useRedeemFlow(reward: RewardWithRedeem) {
  const { redeemStep, setRedeemStep } = useContext(RedeemContext)

  const update = trpc.contentstack.rewards.redeem.useMutation<{
    rewards: RewardWithRedeem[]
  }>()

  const onRedeem = useCallback(() => {
    if (reward?.id) {
      update.mutate(
        { rewardId: reward.id },
        {
          onSuccess() {
            setRedeemStep("redeemed")
          },
          onError(error) {
            console.error("Failed to redeem", error)
          },
        }
      )
    }
  }, [reward, update, setRedeemStep])

  return {
    onRedeem,
    redeemStep,
    setRedeemStep,
    isRedeeming: update.isPending,
  }
}