"use client";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Separator } from "@/components/ui/separator";
import { donateAction } from "@/lib/actions/campaigns";
import { DonateSchemaType, DonateSchema } from "@/types/validation/campaigns";
import { zodResolver } from "@hookform/resolvers/zod";
import { ArrowLeft } from "lucide-react";
import React, { useState } from "react";
import { useForm, SubmitHandler } from "react-hook-form";
import { toast } from "sonner";
import { AnimatePresence, motion } from "framer-motion";
import { useStepAnimation } from "@/hooks/useStepAnimations";
import DonateStep1 from "./DonateStep1";
import { PaymentMethod } from "@/types/custom/campaigns";
import PayWithCrypto from "./DonateStep2/PayWithCrypto";
import PayWithBank from "./DonateStep2/PayWithBank";
import DonateStep3 from "./DonateStep3";
import DonateSuccess from "./DonateSuccess";

const Donate = () => {
  const { currentStep, nextStep, prevStep, slideVariants } =
    useStepAnimation(4);
  const {
    handleSubmit,
    control,
    formState: { isDirty, isValid, isSubmitting },
  } = useForm<DonateSchemaType>({
    resolver: zodResolver(DonateSchema),
    mode: "onTouched",
  });
  const [paymentMethod, setPaymentMethod] = useState<PaymentMethod>(
    PaymentMethod.CRYPTO
  );

  const handleNextStep = (paymentMethod: PaymentMethod) => {
    setPaymentMethod(paymentMethod);
    nextStep();
  };

  const onSubmit: SubmitHandler<DonateSchemaType> = async (data) => {
    try {
      nextStep();
      await donateAction({ ...data });
    } catch (error) {
      toast.error(
        "Signup failed. Please check your credentials and try again."
      );
    }
  };

  return (
    <Dialog>
      <DialogTrigger>
        <Button className="">
          Donate <span className="ml-2">→</span>
        </Button>
      </DialogTrigger>
      <DialogContent className="bg-white">
        <DialogHeader>
          <DialogTitle className="font-bold text-center">Donate</DialogTitle>
        </DialogHeader>
        <Separator />
        {currentStep < 3 && (
          <Button
            onClick={prevStep}
            variant="ghost"
            className="rounded-full !p-1 h-9 w-9"
          >
            <ArrowLeft className="h-4 w-4 !m-0" />
          </Button>
        )}

        <AnimatePresence custom={currentStep}>
          <form
            onSubmit={handleSubmit(onSubmit)}
            className="h-fit flex overflow-hidden"
          >
            {currentStep === 0 && (
              <motion.div
                key="step1"
                variants={slideVariants}
                initial="hidden"
                animate="visible"
                exit="exit"
                custom={1}
                //@ts-ignore
                className="px-2 w-full"
              >
                <DonateStep1
                  control={control}
                  isSubmitting={isSubmitting}
                  nextStep={(paymentMethod) => handleNextStep(paymentMethod)}
                />
              </motion.div>
            )}

            {currentStep === 1 && paymentMethod === PaymentMethod.CRYPTO && (
              <motion.div
                key="step2"
                variants={slideVariants}
                initial="hidden"
                animate="visible"
                exit="exit"
                custom={-1}
                //@ts-ignore
                className="px-2 w-full"
              >
                <PayWithCrypto
                  control={control}
                  isSubmitting={isSubmitting}
                  nextStep={nextStep}
                />
              </motion.div>
            )}

            {currentStep === 1 && paymentMethod === PaymentMethod.BANK && (
              <motion.div
                key="step2"
                variants={slideVariants}
                initial="hidden"
                animate="visible"
                exit="exit"
                custom={-1}
                //@ts-ignore
                className="px-2 w-full"
              >
                <PayWithBank
                  control={control}
                  isSubmitting={isSubmitting}
                  nextStep={nextStep}
                />
              </motion.div>
            )}

            {currentStep === 2 && (
              <motion.div
                key="step3"
                variants={slideVariants}
                initial="hidden"
                animate="visible"
                exit="exit"
                custom={-2}
                //@ts-ignore
                className="px-2 w-full"
              >
                <DonateStep3
                  control={control}
                  isValid={isValid}
                  isDirty={isDirty}
                  isSubmitting={isSubmitting}
                />
              </motion.div>
            )}

            {currentStep === 3 && (
              <motion.div
                key="step4"
                variants={slideVariants}
                initial="hidden"
                animate="visible"
                exit="exit"
                custom={-3}
                //@ts-ignore
                className="px-2 w-full"
              >
                <DonateSuccess data={""} />
              </motion.div>
            )}
          </form>
        </AnimatePresence>
      </DialogContent>
    </Dialog>
  );
};

export default Donate;