import { AuthenticationProviderStatusOk } from "@gnu-taler/anastasis-core";
import { h, VNode } from "preact";
import { useEffect, useRef, useState } from "preact/hooks";
import { TextInput } from "../../components/fields/TextInput";
import { useAnastasisContext } from "../../context/anastasis";
import { authMethods, KnownAuthMethods } from "./authMethod";
import { AnastasisClientFrame } from "./index";

interface Props {
  providerType?: KnownAuthMethods;
  onCancel: () => void;
}

async function testProvider(
  url: string,
  expectedMethodType?: string,
): Promise<void> {
  try {
    const response = await fetch(new URL("config", url).href);
    const json = await response.json().catch((d) => ({}));
    if (!("methods" in json) || !Array.isArray(json.methods)) {
      throw Error(
        "This provider doesn't have authentication method. Check the provider URL",
      );
    }
    console.log("expected", expectedMethodType);
    if (!expectedMethodType) {
      return;
    }
    let found = false;
    for (let i = 0; i < json.methods.length && !found; i++) {
      found = json.methods[i].type === expectedMethodType;
    }
    if (!found) {
      throw Error(
        `This provider does not support authentication method ${expectedMethodType}`,
      );
    }
    return;
  } catch (e) {
    console.log("error", e);
    const error =
      e instanceof Error
        ? Error(
            `There was an error testing this provider, try another one. ${e.message}`,
          )
        : Error(`There was an error testing this provider, try another one.`);
    throw error;
  }
}

export function AddingProviderScreen({ providerType, onCancel }: Props): VNode {
  const reducer = useAnastasisContext();

  const [providerURL, setProviderURL] = useState("");
  const [error, setError] = useState<string | undefined>();
  const [testing, setTesting] = useState(false);
  const providerLabel = providerType
    ? authMethods[providerType].label
    : undefined;

  //FIXME: move this timeout logic into a hook
  const timeout = useRef<number | undefined>(undefined);
  useEffect(() => {
    if (timeout) window.clearTimeout(timeout.current);
    timeout.current = window.setTimeout(async () => {
      const url = providerURL.endsWith("/") ? providerURL : providerURL + "/";
      if (!providerURL || authProviders.includes(url)) return;
      try {
        setTesting(true);
        await testProvider(url, providerType);
        // this is use as tested but everything when ok
        // undefined will mean that the field is not dirty
        setError("");
      } catch (e) {
        console.log("tuvieja", e);
        if (e instanceof Error) setError(e.message);
      }
      setTesting(false);
    }, 200);
  }, [providerURL, reducer]);

  if (!reducer) {
    return <div>no reducer in context</div>;
  }

  if (
    !reducer.currentReducerState ||
    !("authentication_providers" in reducer.currentReducerState)
  ) {
    return <div>invalid state</div>;
  }

  async function addProvider(provider_url: string): Promise<void> {
    await reducer?.transition("add_provider", { provider_url });
    onCancel();
  }
  function deleteProvider(provider_url: string): void {
    reducer?.transition("delete_provider", { provider_url });
  }

  const allAuthProviders =
    reducer.currentReducerState.authentication_providers || {};
  const authProviders = Object.keys(allAuthProviders).filter((provUrl) => {
    const p = allAuthProviders[provUrl];
    if (!providerLabel) {
      return p && "currency" in p;
    } else {
      return (
        p &&
        "currency" in p &&
        p.methods.findIndex((m) => m.type === providerType) !== -1
      );
    }
  });

  let errors = !providerURL ? "Add provider URL" : undefined;
  let url: string | undefined;
  try {
    url = new URL("", providerURL).href;
  } catch {
    errors = "Check the URL";
  }
  if (!!error && !errors) {
    errors = error;
  }
  if (!errors && authProviders.includes(url!)) {
    errors = "That provider is already known";
  }

  return (
    <AnastasisClientFrame
      hideNav
      title="Backup: Manage providers"
      hideNext={errors}
    >
      <div>
        {!providerLabel ? (
          <p>Add a provider url</p>
        ) : (
          <p>Add a provider url for a {providerLabel} service</p>
        )}
        <div class="container">
          <TextInput
            label="Provider URL"
            placeholder="https://provider.com"
            grabFocus
            error={errors}
            bind={[providerURL, setProviderURL]}
          />
        </div>
        <p class="block">Example: https://kudos.demo.anastasis.lu</p>
        {testing && <p class="has-text-info">Testing</p>}

        <div
          class="block"
          style={{
            marginTop: "2em",
            display: "flex",
            justifyContent: "space-between",
          }}
        >
          <button class="button" onClick={onCancel}>
            Cancel
          </button>
          <span data-tooltip={errors}>
            <button
              class="button is-info"
              disabled={error !== "" || testing}
              onClick={() => addProvider(url!)}
            >
              Add
            </button>
          </span>
        </div>

        {authProviders.length > 0 ? (
          !providerLabel ? (
            <p class="subtitle">Current providers</p>
          ) : (
            <p class="subtitle">
              Current providers for {providerLabel} service
            </p>
          )
        ) : !providerLabel ? (
          <p class="subtitle">No known providers, add one.</p>
        ) : (
          <p class="subtitle">No known providers for {providerLabel} service</p>
        )}

        {authProviders.map((k) => {
          const p = allAuthProviders[k] as AuthenticationProviderStatusOk;
          return <TableRow url={k} info={p} onDelete={deleteProvider} />;
        })}
      </div>
    </AnastasisClientFrame>
  );
}
function TableRow({
  url,
  info,
  onDelete,
}: {
  onDelete: (s: string) => void;
  url: string;
  info: AuthenticationProviderStatusOk;
}) {
  const [status, setStatus] = useState("checking");
  useEffect(function () {
    testProvider(url.endsWith("/") ? url.substring(0, url.length - 1) : url)
      .then(function () {
        setStatus("responding");
      })
      .catch(function () {
        setStatus("failed to contact");
      });
  });
  return (
    <div
      class="box"
      style={{ display: "flex", justifyContent: "space-between" }}
    >
      <div>
        <div class="subtitle">{url}</div>
        <dl>
          <dt>
            <b>Business Name</b>
          </dt>
          <dd>{info.business_name}</dd>
          <dt>
            <b>Supported methods</b>
          </dt>
          <dd>{info.methods.map((m) => m.type).join(",")}</dd>
          <dt>
            <b>Maximum storage</b>
          </dt>
          <dd>{info.storage_limit_in_megabytes} Mb</dd>
          <dt>
            <b>Status</b>
          </dt>
          <dd>{status}</dd>
        </dl>
      </div>
      <div
        class="block"
        style={{
          marginTop: "auto",
          marginBottom: "auto",
          display: "flex",
          justifyContent: "space-between",
          flexDirection: "column",
        }}
      >
        <button class="button is-danger" onClick={() => onDelete(url)}>
          Remove
        </button>
      </div>
    </div>
  );
}