const inputs = document.querySelectorAll(".price-slider");
const buttons = document.querySelectorAll("a.card-submit-button");
const prices = document.querySelectorAll(".price-to-pay");
const creditsStatements = document.querySelectorAll(".credit-amount");
const select = document.querySelector("select#select-billing-plan");
const annualCards = document.querySelectorAll("div.annually");
const monthlyCards = document.querySelectorAll("div.monthly");

const url = "https://app.copyshark.ai/signup-moon-auth-";

const tiers = ["starter", "pro", "enterprise"];

//on load
window.onload = () => {
  if (select.value === "monthly") {
    for (let i = 0; i < monthlyCards.length; i++) {
      monthlyCards[i].style.setProperty("display", "flex", "important");
      annualCards[i].style.setProperty("display", "none", "important");
    }
  } else {
    for (let i = 0; i < monthlyCards.length; i++) {
      monthlyCards[i].style.setProperty("display", "none", "important");
      annualCards[i].style.setProperty("display", "flex", "important");
    }
  }

  for (let i = 0; i < inputs.length; i++) {
    inputs[i].parentNode.style.setProperty("--value", inputs[i].value);
    inputs[i].parentNode.style.setProperty(
      "--text-value",
      JSON.stringify(inputs[i].value)
    );
    let selectOption;
    i < 3 ? (selectOption = "monthly") : (selectOption = "annually");

    creditsStatements[i].textContent = `${inputs[i].value * 1000} words generated`;
    prices[i].textContent = `$${inputs[i].value}`;
    buttons[i].href = `${url}${inputs[i].value}-${
      tiers[i % 3]
    }-${selectOption}`;
  }
};

// on slider value change

for (let i = 0; i < inputs.length; i++) {
  let selectOption;
  i < 3 ? (selectOption = "monthly") : (selectOption = "annually");
  inputs[i].addEventListener("change", () => {
    creditsStatements[i].textContent = `${inputs[i].value * 1000} words generated`;
    prices[i].textContent = `$${inputs[i].value}`;
    buttons[i].href = `${url}${inputs[i].value}-${
      tiers[i % 3]
    }-${selectOption}`;
  });
}

// on select change

select.addEventListener("change", (event) => {
  console.log(event.target.value);
  if (event.target.value === "monthly") {
    for (let i = 0; i < monthlyCards.length; i++) {
      monthlyCards[i].style.setProperty("display", "flex", "important");
      annualCards[i].style.setProperty("display", "none", "important");
    }
  } else {
    for (let i = 0; i < monthlyCards.length; i++) {
      monthlyCards[i].style.setProperty("display", "none", "important");
      annualCards[i].style.setProperty("display", "flex", "important");
    }
  }
});