function getRegions() {
  $.ajax("/lol/regions")
    .done((data) => {
      app.regions = JSON.parse(data);
    });
}
function getChampions() {
  $.ajax("/lol/champions")
    .done((data) => {
      app.champions = JSON.parse(data);
    });
}
function getMatchProps() {
  return [
    {text: "Champion", name: "champ"},
    {text: "Lane", name: "lane"},
  ];
}
function getMatches() {
  $.ajax("/lol/matches?region=" + app.region + "&summoner=" + app.summoner)
    .done((data) => {
      app.matches = JSON.parse(data);
    });
}
function getInfo() {
  app.summoner = $("#nameinput").val();
  app.region = $("#regionselect").val();
} 
function setUrl() {
  window.history.pushState("object or string", "Title",
    "/lol?summoner=" +
    app.summoner +
    "&region=" +
    app.region +
    "&view=" +
    app.view);
}
function toggleStartUp() {
  $("#start").removeClass("down");
  $("#start").addClass("up");
}
function toggleStartDown() {
  $("#start").removeClass("up");
  $("#start").addClass("down");
}
function slideStartUp() {
  $("#start").removeClass("slidedown");
  $("#start").addClass("slideup");
}
function slideStartDown() {
  $("#start").removeClass("slideup");
  $("#start").addClass("slidedown");
}
function setView(view) {
  console.log("Setting view to " + view);
  if (view == "history") {
    toggleStartUp();
    $("#matchhistory").show();
  } else if (view == "stats") {
    toggleStartUp();
    $("#stats").show();
  }
  app.view = view;
}
function changeView(view) {
  let oldView = app.view;
  console.log("changing view from " + oldView + " to " + view);
  if (oldView == "start") {
    if (view == "history") {
      slideStartUp();
      $("#matchhistory").show("blind", { direction: "down" }, 300);
    } else if (view == "stats") {
      slideStartUp();
      $("#stats").show("blind", { direction: "down" }, 300);
    }
  } else if (oldView == "history") {
    if (view == "start") {
      $("#matchhistory").hide("blind", { direction: "down" }, 300);
      slideStartDown();
    } else if (view == "stats") {
      $("#stats").show("blind", { direction: "right" });
      $("#matchhistory").hide("blind", { direction: "left" });
    }
  } else if (oldView == "stats") {
    if (view == "start") {
      $("#stats").hide("blind", { direction: "down" }, 300);
      slideStartDown();
    } else if (view == "history") {
      $("#matchhistory").show("blind", { direction: "left" });
      $("#stats").hide("blind", { direction: "right" });
    }
  }
  app.view = view;
}
let app = new Vue({
  el: '#app',
  data: {
    summoner: "",
    region: "",
    view: "",
    regions: [],
    champions: [],
    matchprops: [],
    matches: [],
  },
  methods: {
    submit: function() {
      getInfo();
      if (app.view == "start")
        changeView("history");
      setUrl();
    },
    historyToStats: function() {
      changeView("stats");
      setUrl();
    },
    statsToHistory: function() {
      changeView("history");
      setUrl();
    },
    refreshHistory: function() {
      getMatches();
    },
  },
});

function parseUrl() {
  let url = new URL(window.location.href);
  if (url.searchParams.has("summoner")) {
    app.summoner = url.searchParams.get("summoner");
    $("#nameinput").val(app.summoner);
  }
  if (url.searchParams.has("region")) {
    app.region = url.searchParams.get("region");
    $("#regionselect").val(app.region);
  }
  if (url.searchParams.has("view")) {
    let view = url.searchParams.get("view");
    if (view != "start" && view != "history" && view != "stats") {
      view = "start";
    }
    return view;
  } else {
    return "start";
  }
}

window.addEventListener('popstate', () => {
  let view = parseUrl();
  changeView(view);
});
window.addEventListener('load', () => {
  let view = parseUrl();
  setView(view);
  getRegions();
  getChampions();
});