import { cn } from "~/lib/utils";
import { run } from "~/utils/utils";

export function SubscriptionStatus({
  status,
  errorMsg,
  reset,
}: {
  status: "idle" | "connecting" | "pending" | "error";
  errorMsg: string | undefined;
  reset: () => void;
}) {
  return (
    <div
      className={cn(
        "rounded-full p-2 text-sm transition-colors",
        run(() => {
          switch (status) {
            case "idle":
            case "connecting":
              return "bg-white text-gray-500 dark:bg-gray-900 dark:text-gray-400";
            case "error":
              return "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200";
            case "pending":
              return "bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-200";
          }
        }),
      )}
    >
      {run(() => {
        switch (status) {
          case "idle":
          case "connecting":
            // treat idle and connecting the same

            return (
              <div>
                Connecting...
                {errorMsg && " (There are connection problems)"} {errorMsg}
              </div>
            );
          case "error":
            // something went wrong
            return (
              <div>
                Error - <em>{errorMsg}</em>
                <button
                  type="button"
                  onClick={() => {
                    reset();
                  }}
                  className="hover:underline"
                >
                  Try Again
                </button>
              </div>
            );
          case "pending":
            // we are polling for new messages
            return <div>Connected - awaiting messages</div>;
        }
      })}
    </div>
  );
}