import { useLayoutEffect, useState } from "react";

const { WEB_PORT = 8080, PHPMYADMIN_PORT = 8081 } = import.meta.env;

export async function checkConnection(
  url: string,
  timeout?: number,
): Promise<boolean> {
  const controller = new AbortController();
  if (timeout) {
    setTimeout(() => controller.abort(), timeout);
  }

  console.log(`Checking connection to ${url} ...`);

  try {
    const response = await fetch(url, {
      signal: controller.signal,
    });

    return response.status !== 404;
  } catch (e) {
    const error = e as Error;

    // check cors error
    if (error.name === "TypeError") {
      // return true;
    }

    return false;
  }
}

export type ConnectionState = "established" | "failed" | "checking";
export type ConnectionContextValue = {
  url: string;
  state: ConnectionState;
};

export function useConnectionState(url: string): ConnectionContextValue {
  const [state, setState] = useState<ConnectionState>("checking");

  useLayoutEffect(() => {
    setState("checking");

    checkConnection(url)
      .then((isRunning) => {
        setState(isRunning ? "established" : "failed");
      })
      .catch(() => setState("failed"));
  }, [url]);

  return {
    url,
    state,
  };
}

export function useDockerWebConnectionState(): ConnectionContextValue {
  const host = window.location.hostname;
  return useConnectionState(`http://${host}:${WEB_PORT}`);
}

export function usePhpMyAdminConnectionState(): ConnectionContextValue {
  const host = window.location.hostname;
  return useConnectionState(`http://${host}:${PHPMYADMIN_PORT}`);
}