import { registerMessage, showTooltip } from "@wp/components";

/**
 * @param {HTMLElement} section
 */
export function importerPage(section) {
  const isLoggedIn = localStorage.getItem("logged_in") === "yes";
  /**
   * @type {HTMLFormElement}
   */
  const form = document.forms["import-list"];
  const currentService = form.querySelector("#service").value;

  /**
   * @type {Record<string, HTMLElement>}
   */
  const noteLookup = {
    fansly: form.querySelector(".fansly__notes"),
    onlyfans: form.querySelector(".onlyfans__notes"),
    fanbox: form.querySelector(".fanbox__notes"),
    candfans: form.querySelector(".candfans__notes"),
    other: form.querySelector(".other__notes"),
  };
  switchKeyNotesToggle(currentService, noteLookup);
  form.addEventListener(
    "change",
    processChangeForService((service) => switchKeyNotesToggle(service, noteLookup)),
  );

  /**
   * @type {Record<string, HTMLElement>}
   */
  const sectionLookup = {
    discord: form.querySelector("#discord-section"),
    onlyfans: form.querySelector("#onlyfans-section"),
  };
  displayOnlyActiveInputSectionsFieldsRequired(currentService, sectionLookup);
  form.addEventListener(
    "change",
    processChangeForService((service) => displayOnlyActiveInputSectionsFieldsRequired(service, sectionLookup)),
  );

  /**
   * @type {Record<string, boolean>}
   */
  const DMLookup = {
    patreon: true,
    fansly: true,
  };
  ActivateDMSection(currentService, DMLookup, form.querySelector("#dm-consent"));
  form.addEventListener(
    "change",
    processChangeForService((service) => ActivateDMSection(service, DMLookup, form.querySelector("#dm-consent"))),
  );
  ActivateFanboxTestConsentSection(currentService, form.querySelector("#fanbox-test-consent"));
  form.addEventListener(
    "change",
    processChangeForService((service) => ActivateFanboxTestConsentSection(service, form.querySelector("#fanbox-test-consent"))),
  );

  form.addEventListener("submit", handleSubmit(isLoggedIn));
  document.getElementById("user-agent").value = navigator.userAgent;
}

/**
 * @param {function} procesingFunction
 * @returns {(event: Event) => void}
 */
function processChangeForService(procesingFunction) {
  return (event) => {
    if (event.target.id === "service") {
      event.stopPropagation();
      /**
       * @type {String}
       */
      const selectValue = event.target.value;
      procesingFunction(selectValue);
    }
  };
}

/**
 * @param {String} selectService
 * @param {Record<string, HTMLElement>} sectionLookup
 * @returns {void}
 */
function displayOnlyActiveInputSectionsFieldsRequired(selectService, sectionLookup) {
  let activeSection = sectionLookup[selectService];
  Object.values(sectionLookup).forEach((section) => section.classList.add("form__section--hidden"));
  Object.values(sectionLookup).forEach((section) =>
    section.querySelectorAll("input").forEach((input) => (input.required = false)),
  );
  if (activeSection) {
    activeSection.classList.remove("form__section--hidden");
    activeSection.querySelectorAll("input").forEach((input) => (input.required = true));
  }
}

/**
 * @param {String} selectService
 * @param {Record<string, HTMLElement>} noteLookup
 * @returns {void}
 */
function switchKeyNotesToggle(selectService, noteLookup) {
  Object.values(noteLookup).forEach((notes) => (notes.hidden = true));
  if (noteLookup[selectService]) {
    noteLookup[selectService].hidden = false;
  } else {
    noteLookup["other"].hidden = false;
  }
}

/**
 * @param {String} selectService
 * @param {Record<string, boolean>} DMLookup
 * @param {HTMLElement} dmSection
 * @returns {void}
 */
function ActivateDMSection(selectService, DMLookup, dmSection) {
  let isActive = DMLookup[selectService];
  if (isActive) {
    dmSection.classList.remove("form__section--hidden");
    dmSection.querySelector("input").checked = true;
  } else {
    dmSection.classList.add("form__section--hidden");
    dmSection.querySelector("input").checked = false;
  }
}

/**
 * @param {String} selectService
 * @param {HTMLElement} fanboxTestConsentSection
 * @returns {void}
 */
function ActivateFanboxTestConsentSection(selectService, fanboxTestConsentSection) {
  let isActive = selectService === "fanbox";
  if (isActive) {
    fanboxTestConsentSection.classList.remove("form__section--hidden");
    fanboxTestConsentSection.querySelector("input").checked = false;
  } else {
    fanboxTestConsentSection.classList.add("form__section--hidden");
    fanboxTestConsentSection.querySelector("input").checked = false;
  }
}

/**
 * @param {boolean} isLoggedIn
 * @returns {(event: Event) => void}
 */
function handleSubmit(isLoggedIn) {
  return (event) => {
    /**
     * @type {HTMLFormElement}
     */
    const form = event.target;
    /**
     * @type {HTMLInputElement}
     */
    const dmConsent = form.elements["save-dms"];
    const fanboxTestConsent = form.elements["fanbox-test-consent"];
    const service = form.elements["service"];

    if (service.value === "patreon" && dmConsent.checked && !isLoggedIn) {
      event.preventDefault();
      showTooltip(dmConsent, registerMessage(null));
    }
    console.log(!fanboxTestConsent.checked);
    console.log(service.value);
    if (service.value === "fanbox" && !fanboxTestConsent.checked) {
      event.preventDefault();
      showTooltip(fanboxTestConsent, registerMessage("You need to agree."));
    }
  };
}
