function getRegions() {
  return [ "euw", "na", "kr", "br" ];
}
function getChampions() {
  return [ {name: "Aatrox"}, {name: "Annie"}, {name: "Braum"}, {name: "Not"} ];
}
function getMatchProps() {
  return [
    {text: "Champion", name: "champ"},
    {text: "Lane", name: "lane"},
  ];
}
function getMatches() {
  return [
    {champ: "Xerath", lane: "Middle"},
    {champ: "Quinn", lane: "Bottom"},
  ];
}
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 slideStartUp() {
  $("#start").removeClass("slidedown");
  $("#start").addClass("slideup");
}
function slideStartDown() {
  $("#start").removeClass("slideup");
  $("#start").addClass("slidedown");
}
function changeView(view) {
  if (view != "start" && view != "history" && view != "stats") {
    setUrl();
    return;
  }
  let oldView = app.view;
  if (oldView == "start") {
    if (view == "history") {
      slideStartUp();
      $("#matchhistory").show("slide", { direction: "down" }, 300);
    } else if (view == "stats") {
      slideStartUp();
      $("#stats").show("slide", { direction: "down" }, 300);
    }
  } else if (oldView == "history") {
    if (view == "start") {
      $("#matchhistory").hide("slide", { 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("slide", { 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: "start",
    regions: getRegions(),
    champions: getChampions(),
    matchprops: getMatchProps(),
    matches: getMatches(),
  },
  methods: {
    submit: function() {
      getInfo();
      if (app.view == "start")
        changeView("history");
      setUrl();
    },
    historyToStats: function() {
      changeView("stats");
      setUrl();
    },
    statsToHistory: function() {
      changeView("history");
      setUrl();
    },
    refreshHistory: function() {
    },
  },
});

function parseUrl() {
  console.log("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");
    changeView(view);
  } else {
    changeView("start");
  }
}

window.addEventListener('popstate', parseUrl);
window.addEventListener('load', parseUrl);