pankod/refine

import React from "react";
import clsx from "clsx";
import { WarningIcon } from "./icons/warning";
import { Button } from "./button";
import { HourglassIcon } from "./icons/hourglass";
import { CheckAltIcon } from "./icons/check-alt";
import {
  fetchNewProjectId,
  getCurrentProjectIdStatus,
  updateProjectId,
} from "src/utils/project-id";
import { ProjectIdFixModal } from "./project-id-fix-modal";

export const ProjectIdFixBanner = () => {
  const [projectId, setProjectId] = React.useState<string | null>(null);
  const [modalVisible, setModalVisible] = React.useState(false);
  const [status, setStatus] = React.useState<
    "hidden" | "warning" | "fixing" | "success"
  >("hidden");

  const getProjectIdStatus = React.useCallback(async () => {
    getCurrentProjectIdStatus().then((s) => {
      if (s || typeof s === "undefined") {
        setStatus("hidden");
      } else {
        setStatus("warning");
      }
    });
  }, []);

  const getNewProjectId = React.useCallback(async () => {
    const newProjectId = await fetchNewProjectId();

    if (newProjectId) {
      setProjectId(newProjectId);
    }

    return newProjectId;
  }, []);

  const fixProjectId = React.useCallback(async () => {
    setStatus("fixing");
    const newProjectId = await getNewProjectId();
    if (!newProjectId) {
      setStatus("hidden");
      return;
    }

    const response = await updateProjectId(newProjectId);
    if (response) {
      setStatus("success");
      setTimeout(() => {
        setStatus("hidden");
      }, 2000);
    } else {
      setModalVisible(true);
    }
  }, [getNewProjectId]);

  React.useEffect(() => {
    getProjectIdStatus();
  }, [getProjectIdStatus]);

  return (
    <>
      <div
        className={clsx(
          status === "hidden" && "re-hidden",
          status === "warning" && "re-bg-project-id-warning",
          status === "fixing" && "re-bg-project-id-loading",
          status === "success" && "re-bg-project-id-success",
          "re-mb-4",
          "re-px-5",
          "re-h-14",
          "re-rounded-lg",
          "re-bg-gray-800",
          "re-flex",
          "re-items-center",
          "re-gap-3",
          "re-flex-shrink-0",
        )}
      >
        {status === "warning" && <WarningIcon className="re-text-alt-red" />}
        {status === "fixing" && (
          <HourglassIcon className="re-text-alt-blue re-w-4 re-animate-pulse-spin" />
        )}
        {status === "success" && <CheckAltIcon className="re-text-alt-green" />}
        <span className={clsx("re-text-xs", "re-text-gray-0")}>
          {status === "warning" &&
            "Project ID is missing. Fix it to not miss out any features of the devtools!"}
          {status === "fixing" && "Please wait while fixing..."}
          {status === "success" && "Fixing completed!"}
        </span>
        {status === "warning" && (
          <Button className={clsx("re-ml-3")} onClick={fixProjectId}>
            Fix it
          </Button>
        )}
      </div>
      <ProjectIdFixModal
        visible={modalVisible}
        projectId={projectId ?? ""}
        onClose={() => {
          setModalVisible(false);
          setStatus("hidden");
        }}
      />
    </>
  );
};