// Copyright © 2021 Aravinth Manivnanan <realaravinth@batsense.net>.
// SPDX-FileCopyrightText: 2023 Aravinth Manivannan <realaravinth@batsense.net>
//
// SPDX-License-Identifier: MIT OR Apache-2.0

import LazyElement from "../utils/lazyElement";

/** mcaptcha checkbox ID **/
export const btnId = "widget__verification-checkbox";

/** get sitekey */
export const sitekey = (): string => {
  let sitekey;
  return (() => {
    if (sitekey === null || sitekey === undefined) {
      sitekey = new URL(window.location.href).searchParams.get("sitekey");
      if (sitekey === null || sitekey === undefined) {
        throw new Error("Define sitekey in query parameter");
      }
    }
    return sitekey;
  })();
};

/** mCaptcha API routes */
export const ROUTES = (() => {
  const getConfig = "/api/v1/pow/config";
  const verififyPoW = "/api/v1/pow/verify";

  return {
    /** get URL to fetch PoW configuration */
    getConfig,
    /** get URL to verify PoW*/
    verififyPoW,
  };
})();

/** get mCaptcha verifify checkbox button */
export const btn = (): HTMLInputElement => {
  let btn;
  return (() => {
    if (btn === null || btn === undefined) {
      btn = <HTMLInputElement>document.getElementById(btnId);
      if (btn === null || btn === undefined) {
        throw new Error("mCaptcha button not found)");
      }
    }
    return btn;
  })();
};

type messageTextReturn = {
  before: () => void;
  after: () => void;
  during: () => void;
  error: () => void;
};

export const messageText = (): messageTextReturn => {
  const beforeID = "widget__verification-text--before";
  const duringID = "widget__verification-text--during";
  const errorID = "widget__verification-text--error";
  const afterID = "widget__verification-text--after";

  const before = new LazyElement(beforeID);
  const after = new LazyElement(afterID);
  const during = new LazyElement(duringID);
  const error = new LazyElement(errorID);

  /** runner fn to display HTMLElement **/
  const showMsg = (e: HTMLElement) => (e.style.display = "block");
  /** runner fn to hide HTMLElement **/
  const hideMsg = (e: HTMLElement) => (e.style.display = "none");

  return {
    /** display "before" message **/
    before: () => {
      showMsg(before.get());
      hideMsg(after.get());
      hideMsg(during.get());
      hideMsg(error.get());
    },

    /** display "after" message **/
    after: () => {
      hideMsg(before.get());
      showMsg(after.get());
      hideMsg(during.get());
      hideMsg(error.get());
    },

    /** display "during" message **/
    during: () => {
      hideMsg(before.get());
      hideMsg(after.get());
      showMsg(during.get());
      hideMsg(error.get());
    },

    /** display "error" message **/
    error: () => {
      hideMsg(before.get());
      hideMsg(after.get());
      hideMsg(during.get());
      showMsg(error.get());
    },
  };
};

export const inputId = "mcaptcha-response";