<template>
  <QuickNav />
  <TopMessage />

  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
    <!-- Back -->
    <div
      v-if="!hideBackButton"
      class="text-lg text-center font-light relative px-7"
    >
      <h1
        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
        @click="cancelBack()"
      >
        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
      </h1>
    </div>

    <!-- Heading -->
    <h1 class="text-4xl text-center font-light px-4 mb-4">What Was Given</h1>

    <h1 class="text-xl font-bold text-center mb-4">
      <span>
        From
        {{
          providedByProject
            ? providerProjectName
            : providedByGiver
              ? giverName
              : "someone not named"
        }}
      </span>
      <br />
      <span>
        to
        {{
          givenToProject
            ? fulfillsProjectName
            : givenToRecipient
              ? recipientName
              : "someone not named"
        }}</span
      >
    </h1>
    <textarea
      v-model="description"
      class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
      placeholder="What was received"
    />
    <div class="flex flex-row justify-center">
      <span
        class="rounded-l border border-r-0 border-slate-400 bg-slate-200 text-center text-blue-500 px-2 py-2 w-20"
        @click="changeUnitCode()"
      >
        {{ libsUtil.UNIT_SHORT[unitCode] || unitCode }}
      </span>
      <div
        class="border border-r-0 border-slate-400 bg-slate-200 px-4 py-2"
        @click="amountInput === '0' ? null : decrement()"
      >
        <font-awesome icon="chevron-left" />
      </div>
      <input
        v-model="amountInput"
        type="number"
        class="border border-r-0 border-slate-400 px-2 py-2 text-center w-20"
      />
      <div
        class="rounded-r border border-slate-400 bg-slate-200 px-4 py-2"
        @click="increment()"
      >
        <font-awesome icon="chevron-right" />
      </div>
    </div>

    <div class="flex justify-center mt-4" data-testId="imagery">
      <span v-if="imageUrl" class="flex justify-between">
        <a :href="imageUrl" target="_blank">
          <img :src="imageUrl" class="h-24 rounded-xl" />
        </a>
        <font-awesome
          icon="trash-can"
          class="text-red-500 fa-fw ml-8 mt-10"
          @click="confirmDeleteImage"
        />
      </span>
      <span v-else>
        <font-awesome
          icon="camera"
          class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-2 rounded-md"
          @click="openImageDialog"
        />
      </span>
    </div>
    <ImageMethodDialog ref="imageDialog" default-camera-mode="environment" />

    <div class="mt-4 flex justify-between gap-2">
      <!-- First Column for Giver -->
      <div class="flex-grow border border-slate-400 p-2 rounded-md">
        <div class="flex">
          <input
            v-if="giverDid && !providedByProject"
            v-model="providedByGiver"
            type="checkbox"
            class="h-6 w-6 mr-2"
          />
          <font-awesome
            v-else
            icon="square"
            class="mr-2 bg-white text-white h-5 w-5 px-0.5 py-0.5 rounded-sm"
          />
          <label class="text-sm mt-1">
            {{
              giverDid
                ? "This was provided by " + giverName + "."
                : "No named individual gave."
            }}
          </label>
          <font-awesome
            v-if="!giverDid || providedByProject"
            icon="info-circle"
            class="-mt-1 bg-white text-slate-500 h-5 w-5 px-0.5 py-0.5 rounded-sm"
            @click="notifyUserOfGiver()"
          />
        </div>

        <div class="flex">
          <input
            v-if="providerProjectId && !providedByGiver"
            v-model="providedByProject"
            type="checkbox"
            class="h-6 w-6 mr-2"
          />
          <font-awesome
            v-else
            icon="square"
            class="mr-2 bg-white text-white h-5 w-5 px-0.5 py-0.5 rounded-sm"
          />
          <label class="text-sm mt-1">
            {{
              providerProjectId
                ? "This was provided by " + providerProjectName + "."
                : "This was not provided by a project."
            }}
          </label>
          <font-awesome
            v-if="!providerProjectId || providedByGiver"
            icon="info-circle"
            class="-mt-1 bg-white text-slate-500 h-5 w-5 px-0.5 py-0.5 rounded-sm"
            @click="notifyUserOfProvidingProject()"
          />
        </div>
      </div>

      <div class="flex-shrink flex justify-center items-center">
        <font-awesome icon="arrow-right" class="fa-fw h-7" />
      </div>

      <!-- Third Column for Recipient -->
      <div class="flex-grow border border-slate-400 p-2 rounded-md">
        <div class="flex">
          <input
            v-if="recipientDid && !givenToProject"
            v-model="givenToRecipient"
            type="checkbox"
            class="h-6 w-6 mr-2"
          />
          <font-awesome
            v-else
            icon="square"
            class="mr-2 bg-white text-white h-5 w-5 px-0.5 py-0.5 rounded-sm"
          />
          <label class="text-sm mt-1">
            {{
              recipientDid
                ? "This was given to " + recipientName + "."
                : "No individual benefitted."
            }}
          </label>
          <font-awesome
            v-if="!recipientDid || givenToProject"
            icon="info-circle"
            class="-mt-1 bg-white text-slate-500 h-5 w-5 px-0.5 py-0.5 rounded-sm"
            @click="notifyUserOfRecipient()"
          />
        </div>

        <div class="flex">
          <input
            v-if="fulfillsProjectId && !givenToRecipient"
            v-model="givenToProject"
            type="checkbox"
            class="h-6 w-6 mr-2"
          />
          <font-awesome
            v-else
            icon="square"
            class="mr-2 bg-white text-white h-5 w-5 px-0.5 py-0.5 rounded-sm"
          />
          <label class="text-sm mt-1">
            {{
              fulfillsProjectId
                ? "This was given to " + fulfillsProjectName + ". "
                : "No project benefitted."
            }}
          </label>
          <font-awesome
            v-if="!fulfillsProjectId || givenToRecipient"
            icon="info-circle"
            class="-mt-1 bg-white text-slate-500 h-5 w-5 px-0.5 py-0.5 rounded-sm"
            @click="notifyUserFulfillsProject()"
          />
        </div>
      </div>
    </div>

    <div v-if="showGeneralAdvanced" class="mt-4 flex">
      <router-link
        :to="{
          name: 'claim-add-raw',
          query: {
            claim: constructGiveParam(),
          },
        }"
        class="text-blue-500"
      >
        Edit Raw Data
      </router-link>
    </div>

    <p class="text-center mb-2 mt-6 italic">
      Sign & Send to publish to the world
      <font-awesome
        icon="circle-info"
        class="pl-2 text-blue-500 cursor-pointer"
        @click="explainData()"
      />
    </p>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
      <button
        class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md"
        @click="confirm"
      >
        Sign &amp; Send
      </button>
      <button
        class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
        @click="cancel"
      >
        Cancel
      </button>
    </div>
  </section>
</template>

<script lang="ts">
import { Component, Vue } from "vue-facing-decorator";
import { RouteLocationNormalizedLoaded, Router } from "vue-router";

import ImageMethodDialog from "../components/ImageMethodDialog.vue";
import QuickNav from "../components/QuickNav.vue";
import TopMessage from "../components/TopMessage.vue";
import {
  DEFAULT_IMAGE_API_SERVER,
  NotificationIface,
  USE_DEXIE_DB,
} from "../constants/app";
import { db, retrieveSettingsForActiveAccount } from "../db/index";
import * as databaseUtil from "../db/databaseUtil";
import { GenericCredWrapper, GiveActionClaim } from "../interfaces";
import {
  createAndSubmitGive,
  didInfo,
  editAndSubmitGive,
  getHeaders,
  getPlanFromCache,
  hydrateGive,
} from "../libs/endorserServer";
import * as libsUtil from "../libs/util";
import { retrieveAccountDids } from "../libs/util";
import { logger } from "../utils/logger";
import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
import { Contact } from "@/db/tables/contacts";

@Component({
  components: {
    ImageMethodDialog,
    QuickNav,
    TopMessage,
  },
})
export default class GiftedDetails extends Vue {
  $notify!: (notification: NotificationIface, timeout?: number) => void;
  $route!: RouteLocationNormalizedLoaded;
  $router!: Router;

  activeDid = "";
  apiServer = "";

  amountInput = "0";
  description = "";
  destinationPathAfter = "";
  fulfillsProjectId = "";
  fulfillsProjectName = "a project";
  givenToProject = false; // basically static, based on input; if we allow changing then let's fix things (see below)
  givenToRecipient = false; // basically static, based on input; if we allow changing then let's fix things (see below)
  giverDid = "";
  giverName = "";
  hideBackButton = false;
  imageUrl = "";
  message = "";
  offerId = "";
  prevCredToEdit?: GenericCredWrapper<GiveActionClaim>;
  providerProjectId = "";
  providerProjectName = "a project";
  providedByProject = false; // basically static, based on input; if we allow changing then let's fix things (see below)
  providedByGiver = false; // basically static, based on input; if we allow changing then let's fix things (see below)
  recipientDid = "";
  recipientName = "";
  showGeneralAdvanced = false;
  unitCode = "HUR";

  libsUtil = libsUtil;

  async mounted() {
    try {
      this.prevCredToEdit = (this.$route.query["prevCredToEdit"] as string)
        ? (JSON.parse(
            this.$route.query["prevCredToEdit"] as string,
          ) as GenericCredWrapper<GiveActionClaim>)
        : undefined;
    } catch (error) {
      this.$notify(
        {
          group: "alert",
          type: "danger",
          title: "Retrieval Error",
          text: "The previous record isn't available for editing. If you submit, you'll create a new record.",
        },
        6000,
      );
    }

    const prevAmount = this.prevCredToEdit?.claim?.object?.amountOfThisGood;
    this.amountInput =
      (this.$route.query["amountInput"] as string) ||
      (prevAmount ? String(prevAmount) : "") ||
      this.amountInput;
    this.description =
      (this.$route.query["description"] as string) ||
      this.prevCredToEdit?.claim?.description ||
      this.description;
    this.destinationPathAfter =
      (this.$route.query["destinationPathAfter"] as string) || "";
    this.giverDid = ((this.$route.query["giverDid"] as string) ||
      (this.prevCredToEdit?.claim?.agent as unknown as { identifier: string })
        ?.identifier ||
      this.giverDid) as string;
    this.giverName = (this.$route.query["giverName"] as string) || "";
    this.hideBackButton =
      (this.$route.query["hideBackButton"] as string) === "true";
    this.message = (this.$route.query["message"] as string) || "";

    // find any offer ID
    const fulfills = this.prevCredToEdit?.claim?.fulfills;
    const fulfillsArray = Array.isArray(fulfills)
      ? fulfills
      : fulfills
        ? [fulfills]
        : [];
    const offer = fulfillsArray.find((rec) => rec["@type"] === "Offer");
    this.offerId = ((this.$route.query["offerId"] as string) ||
      offer?.identifier ||
      this.offerId) as string;

    // find any fulfills project ID
    const fulfillsProject = fulfillsArray.find(
      (rec) => rec["@type"] === "PlanAction",
    );
    // eslint-disable-next-line prettier/prettier
    this.fulfillsProjectId =
      ((this.$route.query["fulfillsProjectId"] as string) ||
      fulfillsProject?.identifier ||
      this.fulfillsProjectId) as string;

    // find any provider project ID
    const provider = this.prevCredToEdit?.claim?.provider;
    const providerArray = Array.isArray(provider)
      ? provider
      : provider
        ? [provider]
        : [];
    const providerProject = providerArray.find(
      (rec) => rec["@type"] === "PlanAction",
    );
    this.providerProjectId = ((this.$route.query[
      "providerProjectId"
    ] as string) ||
      providerProject?.identifier ||
      this.providerProjectId) as string;

    this.recipientDid = ((this.$route.query["recipientDid"] as string) ||
      this.prevCredToEdit?.claim?.recipient?.identifier) as string;
    this.recipientName = (this.$route.query["recipientName"] as string) || "";
    this.unitCode = ((this.$route.query["unitCode"] as string) ||
      this.prevCredToEdit?.claim?.object?.unitCode ||
      this.unitCode) as string;

    this.imageUrl = ((this.$route.query["imageUrl"] as string) ||
      this.prevCredToEdit?.claim?.image ||
      localStorage.getItem("imageUrl") ||
      this.imageUrl) as string;

    // this is an endpoint for sharing project info to highlight something given
    // https://developer.mozilla.org/en-US/docs/Web/Manifest/share_target
    if (this.$route.query["shareTitle"] as string) {
      this.description =
        ((this.$route.query["shareTitle"] as string) || "") +
        (this.description ? "\n" + this.description : "");
    }
    if (this.$route.query["shareText"] as string) {
      this.description =
        (this.description ? this.description + "\n" : "") +
        ((this.$route.query["shareText"] as string) || "");
    }
    if (this.$route.query["shareUrl"] as string) {
      this.imageUrl = this.$route.query["shareUrl"] as string;
    }

    let settings = await databaseUtil.retrieveSettingsForActiveAccount();
    if (USE_DEXIE_DB) {
      settings = await retrieveSettingsForActiveAccount();
    }
    this.apiServer = settings.apiServer || "";
    this.activeDid = settings.activeDid || "";

    if (
      (this.giverDid && !this.giverName) ||
      (this.recipientDid && !this.recipientName)
    ) {
      const platformService = PlatformServiceFactory.getInstance();
      const dbContacts = await platformService.dbQuery(
        "SELECT * FROM contacts",
      );
      let allContacts = databaseUtil.mapQueryResultToValues(
        dbContacts,
      ) as unknown as Contact[];
      if (USE_DEXIE_DB) {
        allContacts = await db.contacts.toArray();
      }
      const allMyDids = await retrieveAccountDids();
      if (this.giverDid && !this.giverName) {
        this.giverName = didInfo(
          this.giverDid,
          this.activeDid,
          allMyDids,
          allContacts,
        );
      }
      if (this.recipientDid && !this.recipientName) {
        this.recipientName = didInfo(
          this.recipientDid,
          this.activeDid,
          allMyDids,
          allContacts,
        );
      }
    }
    // these should be functions but something's wrong with the syntax in the <> conditional
    this.givenToProject = !!this.fulfillsProjectId;
    this.givenToRecipient = !this.givenToProject && !!this.recipientDid;

    // these should be functions but something's wrong with the syntax in the <> conditional
    this.providedByProject = !!this.providerProjectId;
    this.providedByGiver = !this.providedByProject && !!this.giverDid;

    this.showGeneralAdvanced = !!settings.showGeneralAdvanced;

    if (this.fulfillsProjectId) {
      // console.log("Getting project name from cache", this.fulfillsProjectId);
      const fulfillsProject = await getPlanFromCache(
        this.fulfillsProjectId,
        this.axios,
        this.apiServer,
        this.activeDid,
      );
      this.fulfillsProjectName = fulfillsProject?.name
        ? `the project "${fulfillsProject.name}"`
        : "a project";
    }
    if (this.providerProjectId) {
      // console.log("Getting project name from cache", this.providerProjectId);
      const providerProject = await getPlanFromCache(
        this.providerProjectId,
        this.axios,
        this.apiServer,
        this.activeDid,
      );
      this.providerProjectName = providerProject?.name
        ? `the project "${providerProject.name}"`
        : "a project";
    }
  }

  changeUnitCode() {
    const units = Object.keys(this.libsUtil.UNIT_SHORT);
    const index = units.indexOf(this.unitCode);
    this.unitCode = units[(index + 1) % units.length];
  }

  increment() {
    this.amountInput = `${(parseFloat(this.amountInput) || 0) + 1}`;
  }

  decrement() {
    this.amountInput = `${Math.max(
      0,
      (parseFloat(this.amountInput) || 1) - 1,
    )}`;
  }

  cancel() {
    this.deleteImage(); // not awaiting, so they'll go back immediately
    if (this.destinationPathAfter) {
      (this.$router as Router).push({ path: this.destinationPathAfter });
    } else {
      (this.$router as Router).back();
    }
  }

  cancelBack() {
    this.deleteImage(); // not awaiting, so they'll go back immediately
    (this.$router as Router).back();
  }

  openImageDialog() {
    (this.$refs.imageDialog as ImageMethodDialog).open((imgUrl) => {
      this.imageUrl = imgUrl;
    }, "GiveAction");
  }

  confirmDeleteImage() {
    this.$notify(
      {
        group: "modal",
        type: "confirm",
        title: "Are you sure you want to delete the image?",
        text: "",
        onYes: this.deleteImage,
      },
      -1,
    );
  }

  async deleteImage() {
    if (!this.imageUrl) {
      return;
    }
    try {
      const headers = await getHeaders(this.activeDid);
      if (
        window.location.hostname === "localhost" &&
        !DEFAULT_IMAGE_API_SERVER.includes("localhost")
      ) {
        logger.log(
          "Using shared image API server, so only users on that server can play with images.",
        );
      }
      const response = await this.axios.delete(
        DEFAULT_IMAGE_API_SERVER +
          "/image/" +
          encodeURIComponent(this.imageUrl),
        { headers },
      );
      if (response.status === 204) {
        // don't bother with a notification
        // (either they'll simply continue or they're canceling and going back)
      } else {
        logger.error("Problem deleting image:", response);
        this.$notify(
          {
            group: "alert",
            type: "danger",
            title: "Error",
            text: "There was a problem deleting the image.",
          },
          5000,
        );
        // keep the imageUrl in localStorage so the user can try again if they want
        return;
      }

      localStorage.removeItem("imageUrl");
      this.imageUrl = "";
    } catch (error) {
      logger.error("Error deleting image:", error);
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      if ((error as any).response.status === 404) {
        logger.log("Weird: the image was already deleted.", error);

        localStorage.removeItem("imageUrl");
        this.imageUrl = "";

        // it already doesn't exist so we won't say anything to the user
      } else {
        this.$notify(
          {
            group: "alert",
            type: "danger",
            title: "Error",
            text: "There was an error deleting the image.",
          },
          5000,
        );
      }
    }
  }

  async confirm() {
    if (!this.activeDid) {
      this.$notify(
        {
          group: "alert",
          type: "danger",
          title: "Error",
          text: "You must select an identifier before you can record a give.",
        },
        2000,
      );
      return;
    }
    if (parseFloat(this.amountInput) < 0) {
      this.$notify(
        {
          group: "alert",
          type: "danger",
          text: "You may not send a negative number.",
          title: "",
        },
        2000,
      );
      return;
    }
    if (!this.description && !parseFloat(this.amountInput)) {
      this.$notify(
        {
          group: "alert",
          type: "danger",
          title: "Error",
          text: `You must enter a description or some number of ${
            this.libsUtil.UNIT_LONG[this.unitCode]
          }.`,
        },
        2000,
      );
      return;
    }

    this.$notify(
      {
        group: "alert",
        type: "toast",
        text: "Recording the give...",
        title: "",
      },
      1000,
    );

    // this is asynchronous, but we don't need to wait for it to complete
    await this.recordGive();
  }

  notifyUserOfGiver() {
    if (!this.giverDid) {
      this.$notify(
        {
          group: "alert",
          type: "warning",
          title: "Go To The Contacts Page",
          text: "To assign a giver, you must open this page from a contact.",
        },
        3000,
      );
    } else {
      this.$notify(
        {
          group: "alert",
          type: "warning",
          title: "Unavailable",
          text: "You cannot assign both a giver and a project.",
        },
        3000,
      );
    }
  }

  notifyUserOfRecipient() {
    if (!this.recipientDid) {
      this.$notify(
        {
          group: "alert",
          type: "warning",
          title: "Go To The Contacts Page",
          text: "To assign to a recipient, you must open this page from a contact.",
        },
        3000,
      );
    } else {
      // must be because givenToProject is true
      this.$notify(
        {
          group: "alert",
          type: "warning",
          title: "Unavailable",
          text: "You cannot assign both to a recipient and to a project.",
        },
        3000,
      );
    }
  }

  notifyUserOfProvidingProject() {
    // we're here because they clicked and either there is no provider project or there is a giver chosen
    if (!this.providerProjectId) {
      this.$notify(
        {
          group: "alert",
          type: "warning",
          title: "Go To The Project Page",
          text: "To select a project as a provider, you must open this page through a project.",
        },
        3000,
      );
    } else {
      // no providing project was chosen
      this.$notify(
        {
          group: "alert",
          type: "warning",
          title: "Unavailable",
          text: "You cannot select both a giving project and person.",
        },
        3000,
      );
    }
  }

  notifyUserFulfillsProject() {
    // we're here because they clicked and either there is no fulfills project or there is a recipient chosen
    if (!this.fulfillsProjectId) {
      this.$notify(
        {
          group: "alert",
          type: "warning",
          title: "Go To The Project Page",
          text: "To assign to a project, you must open this page through a project.",
        },
        3000,
      );
    } else {
      // no fulfills project was chosen
      this.$notify(
        {
          group: "alert",
          type: "warning",
          title: "Unavailable",
          text: "You cannot assign both to a project and to a recipient.",
        },
        3000,
      );
    }
  }

  /**
   *
   * @param giverDid may be null
   * @param description may be an empty string
   * @param amountInput may be 0
   * @param unitCode may be omitted, defaults to "HUR"
   */
  public async recordGive() {
    try {
      const giverDid = this.providedByGiver ? this.giverDid : undefined;
      const recipientDid = this.givenToRecipient
        ? this.recipientDid
        : undefined;
      const fulfillsProjectId = this.givenToProject
        ? this.fulfillsProjectId
        : undefined;
      let result;
      if (this.prevCredToEdit) {
        // don't create from a blank one in case some properties were set from a different interface
        result = await editAndSubmitGive(
          this.axios,
          this.apiServer,
          this.prevCredToEdit,
          this.activeDid,
          giverDid,
          recipientDid,
          this.description,
          parseFloat(this.amountInput),
          this.unitCode,
          fulfillsProjectId,
          this.offerId,
          false,
          this.imageUrl,
          this.providerProjectId,
        );
      } else {
        result = await createAndSubmitGive(
          this.axios,
          this.apiServer,
          this.activeDid,
          giverDid,
          recipientDid,
          this.description,
          parseFloat(this.amountInput),
          this.unitCode,
          fulfillsProjectId,
          this.offerId,
          false,
          this.imageUrl,
          this.providerProjectId,
        );
      }

      if (!result.success) {
        const errorMessage = result.error;
        logger.error("Error with give creation result:", result);
        this.$notify(
          {
            group: "alert",
            type: "danger",
            title: "Error",
            text: errorMessage || "There was an error creating the give.",
          },
          5000,
        );
      } else {
        this.$notify(
          {
            group: "alert",
            type: "success",
            title: "Success",
            text: `That gift was recorded.`,
          },
          3000,
        );
        localStorage.removeItem("imageUrl");
        if (this.destinationPathAfter) {
          (this.$router as Router).push({ path: this.destinationPathAfter });
        } else {
          (this.$router as Router).back();
        }
      }
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
    } catch (error: any) {
      logger.error("Error with give recordation caught:", error);
      const errorMessage =
        error.userMessage ||
        error.response?.data?.error?.message ||
        "There was an error recording the give.";
      this.$notify(
        {
          group: "alert",
          type: "danger",
          title: "Error",
          text: errorMessage,
        },
        5000,
      );
    }
  }

  constructGiveParam() {
    const giverDid = this.providedByGiver ? this.giverDid : undefined;
    const recipientDid = this.givenToRecipient ? this.recipientDid : undefined;
    const fulfillsProjectId = this.givenToProject
      ? this.fulfillsProjectId
      : undefined;
    const giveClaim = hydrateGive(
      this.prevCredToEdit?.claim as GiveActionClaim,
      giverDid,
      recipientDid,
      this.description,
      parseFloat(this.amountInput),
      this.unitCode,
      fulfillsProjectId,
      this.offerId,
      false,
      this.imageUrl,
      this.providerProjectId,
      this.prevCredToEdit?.id as string,
    );
    const claimStr = JSON.stringify(giveClaim);
    return claimStr;
  }

  // Helper functions for readability

  explainData() {
    this.$notify(
      {
        group: "alert",
        type: "success",
        title: "Data Sharing",
        text: libsUtil.PRIVACY_MESSAGE,
      },
      7000,
    );
  }
}
</script>
