<script lang="ts">
  import type { ToggleConnectionStatusProps } from "../types";
  import defaultClasses from "./index.module.css";
  import cssClassAssembler from "../../utils/cssClassAssembler";
  import ToggleSwitch from "../../../shared/ToggleSwitch/index.svelte";
  import ConfirmationPrompt from "../../../shared/ConfirmationPrompt/index.svelte";
  import { sendHTTPRequest } from "../../../shared/http";

  export let connection: ToggleConnectionStatusProps["connection"];
  export let classNames: ToggleConnectionStatusProps["classNames"] = undefined;
  export let urls: ToggleConnectionStatusProps["urls"];
  export let errorCallback: ToggleConnectionStatusProps["errorCallback"] =
    undefined;
  export let successCallback: ToggleConnectionStatusProps["successCallback"] =
    undefined;

  function askForConfirmation() {
    displayPrompt = true;
  }
  function onCancel() {
    displayPrompt = false;
  }
  function onConfirm() {
    updateConnectionStatus(!connection.deactivated);
  }
  function updateConnectionStatus(status: boolean) {
    async function updateConnection() {
      type payload = {
        [key: string]: string | boolean;
      };
      const body: payload = {
        clientID: connection.clientID,
        clientSecret: connection.clientSecret,
        tenant: connection.tenant,
        product: connection.product,
        deactivated: status,
      };
      const connectionIsSAML = "idpMetadata" in connection ? true : false;
      const connectionIsOIDC = "oidcProvider" in connection ? true : false;
      if (connectionIsSAML) {
        body["isSAML"] = true;
      } else if (connectionIsOIDC) {
        body["isOIDC"] = true;
      }
      const data = await sendHTTPRequest<undefined>(urls.patch, {
        method: "PATCH",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(body),
      });
      displayPrompt = false;
      if (data?.error) {
        typeof errorCallback === "function" &&
          errorCallback(data.error.message);
      } else {
        typeof successCallback === "function" &&
          successCallback({
            operation: "UPDATE",
            connectionIsSAML,
            connectionIsOIDC,
          });
      }
    }
    updateConnection();
  }
  $: connectionStatus = () => {
    return connection.deactivated ? "Inactive" : "Active";
  };
  $: connectionAction = () => {
    return connection.deactivated ? "activate" : "deactivate";
  };
  $: classes = () => {
    return {
      container: cssClassAssembler(
        classNames?.container,
        defaultClasses.container
      ),
    };
  };

  let displayPrompt = false;
</script>

{#if connection !== undefined || connection !== null}
  <div class={classes().container}>
    {#if displayPrompt}
      <ConfirmationPrompt
        ctoaVariant={connection.deactivated ? "primary" : "destructive"}
        classNames={classNames?.confirmationPrompt}
        cancelCallback={onCancel}
        confirmationCallback={onConfirm}
        promptMessage={`Do you want to ${connectionAction()} the connection?`}
      />
    {/if}
    {#if !displayPrompt}
      <ToggleSwitch
        label={connectionStatus()}
        handleChange={askForConfirmation}
        checked={!connection.deactivated}
        disabled={displayPrompt}
      />
    {/if}
  </div>
{/if}