import { useAppSelector } from "@/hooks";
import confetti from "canvas-confetti";
import { useEffect } from "react";

// getOutcomeStr: function () {
//     return {
//         0: "UNKNOWN", 1: "ENTER",
//         2: "INCOMPLETE", 3: "COMPLETE"
//     }[this.get('status')] || '';
// }

export const Complete = () => {
  const ts = useAppSelector((state) => state.app.taskStatus);

  return (
    <>
      <h2 className="text-lg">Survey Completed</h2>
      <p className="text-emerald-700 text-lg font-bold">
        Congratulations! You completed the Survey.
      </p>
      <p className="text-emerald-700 text-2xl font-bold">
        {ts?.user_payout_string}
      </p>
      <p className="text-slate-300">You may close this tab</p>
    </>
  );
};

export const Enter = () => {
  return (
    <>
      <h2 className="text-lg">Entered</h2>
      <p className="text-slate-800 text-lg font-bold">
        You're currently in the Survey
      </p>
      <p className="text-slate-300">You may close this tab</p>
    </>
  );
};

export const InComplete = () => {
  const ts = useAppSelector((state) => state.app.taskStatus);
  if (!ts) {
    return null;
  }

  return (
    <>
      <h2 className="text-lg">Attempt Complete</h2>
      <p className="text-rose-800 text-lg font-bold">
        Survey terminated the attempt.
      </p>
      <p className="text-slate-300">You may close this tab</p>
    </>
  );
};

export const Unknown = () => {
  return (
    <>
      <h2 className="text-lg">Task Issue</h2>
      <p className="text-rose-800 text-lg font-bold">
        You're not currently eligible for any Surveys
      </p>
      <p className="text-slate-300">You may close this tab</p>
    </>
  );
};

export const Loading = () => {
  return <p className="text-2xl font-semibold">Loading...</p>;
};

const Result = () => {
  const ts = useAppSelector((state) => state.app.taskStatus);

  const confettiCannons = () => {
    const end = Date.now() + 3 * 1000;
    const colors = ["#84cc16", "#1e3a8a", "#ec4899"];
    const frame = () => {
      if (Date.now() > end) return;
      confetti({
        particleCount: 3,
        angle: 60,
        spread: 55,
        startVelocity: 80,
        gravity: 0.7,
        origin: { x: 0, y: 0.8 },
        colors: colors,
      });
      confetti({
        particleCount: 3,
        angle: 120,
        spread: 55,
        startVelocity: 80,
        gravity: 0.7,
        origin: { x: 1, y: 0.8 },
        colors: colors,
      });
      requestAnimationFrame(frame);
    };
    frame();
  };

  useEffect(() => {
    if (ts?.status === 3) {
      confettiCannons();
    }
  }, [ts]);

  switch (ts?.status) {
    case 0: // UNKNOWN
      return <Unknown />;
    case 1: // ENTER
      return <Enter />;
    case 2: // INCOMPLETE
      return <InComplete />;
    case 3: // COMPLETE
      return <Complete />;
    default:
      return <Loading />;
  }
};

export default Result;