const sliders = [
  [
    "spec-gen-idt",
    "spec-gen-idt-amt",
    ["gen-idt", (x) => x.value],
    (x) => x.value >= 1,
  ], // Gender identity
  [
    "spec-gen-exp",
    "spec-gen-exp-ovr",
    ["gen-exp", (x) => (x.checked ? 1 : 0)],
    (x) => x.checked,
  ], // Gender expression
  [
    "spec-sex-ori",
    "spec-sex-ori-amt",
    ["sex-ori", (x) => x.value],
    (x) => x.value >= 1,
  ], // Sexual orientation
  [
    "spec-rom-ori",
    "spec-rom-ori-amt",
    ["rom-ori", (x) => x.value],
    (x) => x.value >= 1,
  ], // Romantic orientation
  [
    "spec-rel-att",
    "spec-rel-att-amt",
    ["rel-att", (x) => x.value],
    (x) => x.value >= 1,
  ], // Relationship attitude
];

const descs = {
  "gen-idt": {
    descElement: document.getElementById("spec-gen-idt-dsc"),
    components: {
      amount: [
        (val) => `I do not feel any connection with identifying as any gender.`,
        (val) =>
          `I'm somewhat disconnected from the concept of gender, but I closely identify ${val}.`,
        (val) =>
          `I don't really care about gender, but I closely identify ${val}.`,
        (val) =>
          `I am somewhat connected to the concept of gender, and I identify ${val}.`,
        (val) =>
          `I am very connected to the concept of gender, and I identify ${val}.`,
      ],
      value: [
        `as male`,
        `as mostly male`,
        `as somewhat male`,
        `more androgynously than male`,
        `androgynously`,
        `more androgynously than female`,
        `as somewhat female`,
        `as mostly female`,
        `as female`,
      ],
    },
  },
  "gen-exp": {
    descElement: document.getElementById("spec-gen-exp-dsc"),
    components: {
      amount: [
        (val) => `I don't occupy myself too much with gender expression.`,
        (val) => `I express myself ${val}.`,
      ],
      value: [
        `super masculinely`,
        `very masculinely`,
        `masculinely`,
        `as somewhat masculine`,
        `more androgynously than masculine`,
        `androgynously`,
        `more androgynously than feminine`,
        `as somewhat feminine`,
        `femininely`,
        `very femininely`,
        `super femininely`,
      ],
    },
  },
  "sex-ori": {
    descElement: document.getElementById("spec-sex-ori-dsc"),
    components: {
      amount: [
        (val) => `I do not experience any sexual attraction.`,
        (val) => `I feel very little sexual attraction, ${val}.`,
        (val) => `I feel some sexual attraction, ${val}.`,
        (val) => `I feel an average amount of sexual attraction, ${val}.`,
        (val) => `I feel more sexual attraction than usual, ${val}.`,
        (val) => `I feel a lot of sexual attraction, ${val}.`,
        (val) => `I feel extreme sexual attraction, ${val}.`,
      ],
      value: [
        `to another gender`,
        `more to another gender than my own`,
        `to any gender`,
        `more towards my own gender than another`,
        `towards my own gender`,
      ],
    },
  },
  "rom-ori": {
    descElement: document.getElementById("spec-rom-ori-dsc"),
    components: {
      amount: [
        (val) => `I do not experience any romantic attraction.`,
        (val) => `I feel very little romantic attraction, ${val}.`,
        (val) => `I feel some romantic attraction, ${val}.`,
        (val) => `I feel an average amount of romantic attraction, ${val}.`,
        (val) => `I feel more romantic attraction than usual, ${val}.`,
        (val) => `I feel a lot of romantic attraction, ${val}.`,
        (val) => `I feel extreme romantic attraction, ${val}.`,
      ],
      value: [
        `to another gender`,
        `more to another gender than my own`,
        `to any gender`,
        `more towards my own gender than another`,
        `towards my own gender`,
      ],
    },
  },
  "rel-att": {
    descElement: document.getElementById("spec-rel-att-dsc"),
    components: {
      amount: [
        (val) => `I would be uncomfortable in any relationship.`,
        (val) =>
          `I ${val} - though I am somewhat uncomfortable with relationships.`,
        (val) => `I ${val}.`,
        (val) => `I ${val} - and I would be active in it.`,
        (val) => `I ${val} - and I would be dedicated to it.`,
      ],
      value: [
        `prefer monogamous relationships`,
        `prefer monogamous relationships, but polygamy is OK`,
        `would be open to any kind of relationship`,
        `prefer polygamous relationships, but monogamy is OK`,
        `prefer polygamous relationships`,
      ],
    },
  },
};

function triggerSliders(generate) {
  sliders.forEach(([slider, override, description, func]) => {
    var overrideElement = document.getElementById(override);
    var sliderElement = document.getElementById(slider);

    if (generate) {
      // Disable on override condition
      overrideElement.addEventListener("input", (e) => {
        sliderElement.disabled = !func(e.target);
        if (!func(overrideElement)) sliderElement.classList.add("off");
        else sliderElement.classList.remove("off");
      });

      // Update description on attribute change
      overrideElement.addEventListener("input", (e) => {
        updateDescription(
          description[0],
          sliderElement.value,
          description[1](overrideElement)
        );
        createShareableURL();
      });
      sliderElement.addEventListener("input", (e) => {
        updateDescription(
          description[0],
          sliderElement.value,
          description[1](overrideElement)
        );
        createShareableURL();
      });
    }

    sliderElement.disabled = !func(overrideElement);
    if (!func(overrideElement)) sliderElement.classList.add("off");
    else sliderElement.classList.remove("off");

    updateDescription(
      description[0],
      sliderElement.value,
      description[1](overrideElement)
    );
    createShareableURL();
  });
}

function updateDescription(id, val, amt) {
  var descObject = descs[id];
  descObject.descElement.innerHTML = descObject.components.amount[amt](
    descObject.components.value[val]
    // nameElement.value || "[Subject Name Here]"
  );
}

var enc_s_gia = document.getElementById("spec-gen-idt-amt");
var enc_s_gi = document.getElementById("spec-gen-idt");
var enc_s_geo = document.getElementById("spec-gen-exp-ovr");
var enc_s_ge = document.getElementById("spec-gen-exp");
var enc_s_soa = document.getElementById("spec-sex-ori-amt");
var enc_s_so = document.getElementById("spec-sex-ori");
var enc_s_roa = document.getElementById("spec-rom-ori-amt");
var enc_s_ro = document.getElementById("spec-rom-ori");
var enc_s_raa = document.getElementById("spec-rel-att-amt");
var enc_s_ra = document.getElementById("spec-rel-att");
function encode() {
  var number =
    (+enc_s_gia.value << (4 + 23)) +
    (+enc_s_gi.value << (1 + 22)) +
    (+enc_s_geo.checked << (4 + 18)) +
    (+enc_s_ge.value << (3 + 15)) +
    (+enc_s_soa.value << (3 + 12)) +
    (+enc_s_so.value << (3 + 9)) +
    (+enc_s_roa.value << (3 + 6)) +
    (+enc_s_ro.value << (3 + 3)) +
    (+enc_s_raa.value << 3) +
    +enc_s_ra.value;

  return number.toString(36);
}

function extract_ecfBIN(parsed_string) {
  enc_s_gia.value = parseInt(parsed_string.substring(0, 3), 2);
  enc_s_gi.value = parseInt(parsed_string.substring(3, 7), 2);
  enc_s_geo.checked = parseInt(parsed_string.substring(7, 8), 2);
  enc_s_ge.value = parseInt(parsed_string.substring(8, 12), 2);
  enc_s_so.value = parseInt(parsed_string.substring(15, 18), 2);
  enc_s_ro.value = parseInt(parsed_string.substring(21, 24), 2);
  enc_s_raa.value = parseInt(parsed_string.substring(24, 27), 2);
  enc_s_ra.value = parseInt(parsed_string.substring(27, 30), 2);

  const sex_att = parseInt(parsed_string.substring(12, 15), 2);
  const rom_att = parseInt(parsed_string.substring(18, 21), 2);

  switch (sex_att) {
    case 0:
      enc_s_soa.value = 0;
      break;
    case 1:
      enc_s_soa.value = 2;
      break;
    case 2:
      enc_s_soa.value = 3;
      break;
    case 3:
      enc_s_soa.value = 4;
      break;
    case 4:
      enc_s_soa.value = 6;
      break;
  }

  switch (rom_att) {
    case 0:
      enc_s_roa.value = 0;
      break;
    case 1:
      enc_s_roa.value = 2;
      break;
    case 2:
      enc_s_roa.value = 3;
      break;
    case 3:
      enc_s_roa.value = 4;
      break;
    case 4:
      enc_s_roa.value = 6;
      break;
  }
}

function extract_ecfBINv2(parsed_string) {
  enc_s_gia.value = parseInt(parsed_string.substring(0, 3), 2);
  enc_s_gi.value = parseInt(parsed_string.substring(3, 7), 2);
  enc_s_geo.checked = parseInt(parsed_string.substring(7, 8), 2);
  enc_s_ge.value = parseInt(parsed_string.substring(8, 12), 2);
  enc_s_soa.value = parseInt(parsed_string.substring(12, 15), 2);
  enc_s_so.value = parseInt(parsed_string.substring(15, 18), 2);
  enc_s_roa.value = parseInt(parsed_string.substring(18, 21), 2);
  enc_s_ro.value = parseInt(parsed_string.substring(21, 24), 2);
  enc_s_raa.value = parseInt(parsed_string.substring(24, 27), 2);
  enc_s_ra.value = parseInt(parsed_string.substring(27, 30), 2);
}

function decodev1(string) {
  var parsed_string = parseInt(string, 16).toString(2).padStart(30, "0");

  extract_ecfBIN(parsed_string);
}

function decodev2(string) {
  var parsed_string = parseInt(string, 36).toString(2).padStart(30, "0");

  extract_ecfBIN(parsed_string);
}

function decodev3(string) {
  var parsed_string = parseInt(string, 36).toString(2).padStart(30, "0");

  extract_ecfBINv2(parsed_string);
}

const s_share_link = document.getElementById("spec-share-link");

function createShareableURL() {
  const url = new URL(window.location.href);
  const code = encode();

  url.hash = "3-" + code;

  s_share_link.innerHTML = url.toString();
  s_share_link.href = url.toString();
}

function parseURL() {
  const urlParams = new URLSearchParams(window.location.search);
  const hash = window.location.hash.replace("#", "");
  if (hash != "") {
    if (hash.startsWith("2-")) {
      decodev2(hash.substring(2));
      return lockSliders();
    }
    if (hash.startsWith("3-")) {
      decodev3(hash.substring(2));
      return lockSliders();
    }
  } else if (urlParams.get("s") != null) {
    decodev1(urlParams.get("s"));
    return lockSliders();
  }
  document.addEventListener("DOMContentLoaded", () => triggerSliders(true));
}

function lockSliders() {
  triggerSliders(false);
  sliders.forEach(([slider, override]) => {
    document.body.classList.add("readOnly");
    document.getElementById(slider).classList.add("ro");
    document.getElementById(slider).disabled = true;
    document.getElementById(override).classList.add("ro");
    document.getElementById(override).disabled = true;
  });
}