import { ElementWithUtils } from "../utils/dom";
import * as TestLogic from "../test/test-logic";
import Config, { setConfig, setQuoteLengthAll } from "../config";
import * as ManualRestart from "../test/manual-restart-tracker";
import * as CustomWordAmountPopup from "./custom-word-amount";
import * as CustomTestDurationPopup from "./custom-test-duration";
import * as QuoteSearchModal from "./quote-search";
import * as CustomTextPopup from "./custom-text";
import AnimatedModal from "../utils/animated-modal";
import { QuoteLength, QuoteLengthConfig } from "@monkeytype/schemas/configs";
import { Mode } from "@monkeytype/schemas/shared";
import { areUnsortedArraysEqual } from "../utils/arrays";
import * as ShareTestSettingsPopup from "./share-test-settings";

function update(): void {
  const el = $("#mobileTestConfigModal");
  el.find("button").removeClass("active");

  el.find(`.modeGroup button[data-mode='${Config.mode}']`).addClass("active");
  el.find(".timeGroup").addClass("hidden");
  el.find(".wordsGroup").addClass("hidden");
  el.find(".quoteGroup").addClass("hidden");
  el.find(".customGroup").addClass("hidden");
  el.find(`.${Config.mode}Group`).removeClass("hidden");

  if (Config.punctuation) {
    el.find(".punctuation").addClass("active");
  } else {
    el.find(".punctuation").removeClass("active");
  }

  if (Config.numbers) {
    el.find(".numbers").addClass("active");
  } else {
    el.find(".numbers").removeClass("active");
  }

  if (Config.mode === "time") {
    el.find(`.timeGroup button[data-time='${Config.time}']`).addClass("active");
    el.find(".punctuation").removeClass("disabled");
    el.find(".numbers").removeClass("disabled");
  } else if (Config.mode === "words") {
    el.find(`.wordsGroup button[data-words='${Config.words}']`).addClass(
      "active",
    );
    el.find(".punctuation").removeClass("disabled");
    el.find(".numbers").removeClass("disabled");
  } else if (Config.mode === "quote") {
    if (areUnsortedArraysEqual(Config.quoteLength, [0, 1, 2, 3])) {
      el.find(`.quoteGroup button[data-quoteLength='all']`).addClass("active");
    } else {
      for (const ql of Config.quoteLength) {
        el.find(`.quoteGroup button[data-quoteLength='${ql}']`).addClass(
          "active",
        );
      }
    }
    el.find(".punctuation").addClass("disabled");
    el.find(".numbers").addClass("disabled");
  } else if (Config.mode === "zen") {
    el.find(".punctuation").addClass("disabled");
    el.find(".numbers").addClass("disabled");
  } else if (Config.mode === "custom") {
    el.find(".punctuation").removeClass("disabled");
    el.find(".numbers").removeClass("disabled");
  }
}

export function show(): void {
  void modal.show({
    beforeAnimation: async () => {
      update();
    },
  });
}

// function hide(): void {
//   void modal.hide();
// }

async function setup(modalEl: ElementWithUtils): Promise<void> {
  modalEl.qsa(".wordsGroup button").on("click", (e) => {
    const target = e.currentTarget as HTMLElement;
    const wrd = target.getAttribute("data-words") as string;

    if (wrd === "custom") {
      CustomWordAmountPopup.show({
        modalChain: modal,
      });
    } else if (wrd !== undefined) {
      const wrdNum = parseInt(wrd);
      setConfig("words", wrdNum);
      ManualRestart.set();
      TestLogic.restart();
    }
  });

  modalEl.qsa(".modeGroup button").on("click", (e) => {
    const target = e.currentTarget as HTMLElement;
    const mode = target.getAttribute("data-mode");
    if (mode === Config.mode) return;
    setConfig("mode", mode as Mode);
    ManualRestart.set();
    TestLogic.restart();
  });

  modalEl.qsa(".timeGroup button").on("click", (e) => {
    const target = e.currentTarget as HTMLElement;
    const time = target.getAttribute("data-time") as string;

    if (time === "custom") {
      CustomTestDurationPopup.show({
        modalChain: modal,
      });
    } else if (time !== undefined) {
      const timeNum = parseInt(time);
      setConfig("time", timeNum);
      ManualRestart.set();
      TestLogic.restart();
    }
  });

  modalEl.qsa(".quoteGroup button").on("click", (e) => {
    const target = e.currentTarget as HTMLElement;
    const lenAttr = target.getAttribute("data-quoteLength") ?? "0";

    if (lenAttr === "all") {
      if (setQuoteLengthAll()) {
        ManualRestart.set();
        TestLogic.restart();
      }
    } else if (lenAttr === "-2") {
      void QuoteSearchModal.show({
        modalChain: modal,
      });
    } else {
      const len = parseInt(lenAttr, 10) as QuoteLength;
      let arr: QuoteLengthConfig = [];

      if ((e as MouseEvent).shiftKey) {
        arr = [...Config.quoteLength, len];
      } else {
        arr = [len];
      }

      if (setConfig("quoteLength", arr)) {
        ManualRestart.set();
        TestLogic.restart();
      }
    }
  });

  modalEl.qs(".customChange")?.on("click", () => {
    CustomTextPopup.show({
      modalChain: modal,
    });
  });

  modalEl.qs(".punctuation")?.on("click", () => {
    setConfig("punctuation", !Config.punctuation);
    ManualRestart.set();
    TestLogic.restart();
  });

  modalEl.qs(".numbers")?.on("click", () => {
    setConfig("numbers", !Config.numbers);
    ManualRestart.set();
    TestLogic.restart();
  });

  modalEl.qs(".shareButton")?.on("click", () => {
    ShareTestSettingsPopup.show({
      modalChain: modal,
    });
  });

  modalEl.qsa("button").on("click", () => {
    update();
  });
}

const modal = new AnimatedModal({
  dialogId: "mobileTestConfigModal",
  setup,
});
