// Start Screen
// ------------
function getRegions() {
  return [ "euw", "na", "kr", "br" ];
}

function getInfo() {
  app.summoner = $("#nameinput").val();
  app.region = $("#regionselect").val();
} 
function setUrl() {
  window.history.pushState("object or string", "Title",
    "/?summoner=" +
    app.summoner +
    "&region=" +
    app.region +
    "&view=" +
    app.view);
}

function toggleStart(up) {
  $("#start").removeClass(up ? "down" : "up");
  $("#start").addClass(up ? "up" : "down");
}
function slideStart() {
  $("#start").addClass("slideup");
}
var app = new Vue({
  el: '#app',
  data: {
    summoner: "",
    region: "",
    view: "start",
    regions: getRegions(),
  },
  methods: {
    submit: function() {
      getInfo();
      if (app.view == "start") {
        app.view = "history";
        setUrl();
        slideStart();
        $("#matchhistory").show("slide", { direction: "down" }, 300);
      } else {
        setUrl();
      }
    },
    historyToStats: function() {
      app.view = "stats";
      setUrl();
      $("#stats").show("blind", { direction: "right" });
      $("#matchhistory").hide("blind", { direction: "left" });
    },
    statsToHistory: function() {
      app.view = "history";
      setUrl();
      $("#matchhistory").show("blind", { direction: "left" });
      $("#stats").hide("blind", { direction: "right" });
    },
  },
});

// Check for URL parameters
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 == "history") {
    toggleStart(true);
    $("#matchhistory").show();
  }
  else if (view == "stats") {
    toggleStart(true);
    $("#stats").show();
  }
}
// ------------