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

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

  function askForConfirmation() {
    displayPrompt = true;
  }
  function onCancel() {
    displayPrompt = false;
  }
  function onConfirm() {
    updateConnectionStatus(!connection?.deactivated);
  }
  function updateConnectionStatus(status: boolean) {
    async function toggle() {
      const body = {
        directoryId: connection?.id,
        deactivated: status,
      };
      const response = await sendHTTPRequest<{
        data: Directory;
      }>(urls.patch, {
        method: "PATCH",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(body),
      });
      displayPrompt = false;
      if (response && typeof response === "object") {
        if ("error" in response && response.error) {
          typeof errorCallback === "function" &&
            errorCallback(response.error.message);
        } else {
          typeof successCallback === "function" &&
            successCallback({
              operation: "UPDATE",
            });
        }
      }
    }
    toggle();
  }
  $: 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()}
        disabled={displayPrompt}
        checked={!connection?.deactivated}
        handleChange={askForConfirmation}
      />
    {/if}
  </div>
{/if}