"use client";
import { useEffect } from 'react'
import { useRouter } from 'next/navigation';
import { signOut } from "next-auth/react";
import { useAppDispatch } from "@/store/hooks";
import { clearCart } from "@/store/slices/cart-slice";
//https://nextjs.org/docs/app/api-reference/file-conventions/error
export default function Error({
  error, 
  reset
}: {
  reset: () => void;
  error: Error & { digest?: string };
}) {
  const router = useRouter();
  const dispatch = useAppDispatch();
  let msg = "There was an issue with our storefront. This could be a temporary issue, please try your action again.";
  if(error.name === 'UnauthorizedError') {
    msg = "Authorization Bearer token is required. Will redirect to Login page.";
  }
  const clickHandler = () => {
      if(error.name === 'UnauthorizedError') {
          router.push('/customer/login')
      } else {
        reset();
      }
  };
  useEffect(() => {
      if (error.name === "UnauthorizedError") {
            signOut({
              callbackUrl:"/customer/login",
              redirect: false,
            }).then(() => {
                dispatch(clearCart());
     
                setTimeout(() => {
                  router.push("/customer/login");
                  router.refresh();
                }, 100);
            });

      }
    // Log the error to an error reporting service
    console.error(error)
  }, [error])

  return (
    <div className="mx-auto my-4 flex max-w-xl flex-col rounded-lg border border-neutral-200 bg-white p-8 md:p-12 dark:border-neutral-800 dark:bg-black">
      <h2 className="text-xl font-bold">Oh no!</h2>
      <p className="my-2">
        {msg}
      </p>
      <button
        className="mx-auto mt-4 flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white hover:opacity-90"
        onClick={clickHandler}
      >
        {error.name === 'UnauthorizedError' ? "To Login" : "Try Again"}
      </button>
    </div>
  );
}