import { useLocation, useNavigate } from "react-router-dom";
import text404 from "../assets/image/404/404.svg";
import hero from "../assets/image/404/404_bk.png";

const PageNotFound = () => {
  const savedTheme = localStorage.getItem("theme");
  const isLogedIn = localStorage.getItem("userId");
  const navigate = useNavigate();
  const { hash } = useLocation();

  function getErrorContext() {
    const contexts = hash.split("#");
    const context = contexts[1];
    const info = contexts.length > 1 ? contexts[2] : "";
    switch (context) {
      case "project_not_found":
        return `Project Not found - The project ${
          info !== "" && `with ID (${info})`
        } was not found.`;
      default:
        return "Page not Found - looks like we have hit a roadblock";
    }
  }

  return (
    <div className="page-not-found-wrapper">
      <div className="page-not-found-container">
        <div className="text-404">
          <img
            src={text404}
            alt=""
            style={savedTheme === "dark" ? { filter: "invert(1)" } : {}}
          />
        </div>
        <div className="hero-container">
          <img src={hero} alt="" />
        </div>
        <div className="context">{getErrorContext()}</div>
        <button
          className="back-to-home"
          id="go-back-home-404-btn"
          onClick={() => {
            if (isLogedIn) {
              navigate("/Dashboard");
            } else {
              navigate("/");
            }
          }}
        >
          Go Back to Home
        </button>
      </div>
    </div>
  );
};

export default PageNotFound;
