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

function toggleStart(up) {
  $("#start").removeClass(up ? "down" : "up");
  $("#start").addClass(up ? "up" : "down");
}
function slideStart() {
  $("#start").addClass("slideup");
}
function slideSlideUp() {
  $("#slide").addClass("slideup");
}
function slideSlideLeft() {
  $("#slide").removeClass("slideright");
  $("#slide").addClass("slideleft");
}
function slideSlideRight() {
  $("#slide").removeClass("slideleft");
  $("#slide").addClass("slideright");
}
function toggleSlideLeft() {
  $("#slide").addClass("left");
}

var app = new Vue({
  el: '#app',
  data: {
    regions: getRegions(),
    region: "euw",
    summoner: "",
  },
  methods: {
    startToHistory: function() {
      window.history.pushState("object or string", "Title",
        "/?summoner=" +
        $("#nameinput").val() +
        "&region=" +
        $("#regionselect").val() +
        "&view=history");

      slideStart();
      $("#matchhistory").show();
      slideSlideUp();
      app.startToHistory = ()=>{};
    },
    historyToStats: function() {
      window.history.pushState("object or string", "Title",
        "/?summoner=" +
        $("#nameinput").val() +
        "&region=" +
        $("#regionselect").val() +
        "&view=stats");

      $("#stats").show();
      slideSlideLeft();
      setTimeout(() => {
        $("#matchhistory").hide();
      }, 300);
    },
    statsToHistory: function() {
      window.history.pushState("object or string", "Title",
        "/?summoner=" +
        $("#nameinput").val() +
        "&region=" +
        $("#regionselect").val() +
        "&view=history");

      $("#matchhistory").show();
      slideSlideRight();
      setTimeout(() => {
        $("#stats").hide();
      }, 300);
    },
  },
});

// Check for URL parameters
let url = new URL(window.location.href);
if (url.searchParams.has("summoner"))
  app.summoner = url.searchParams.get("summoner");
if (url.searchParams.has("region"))
  app.region = url.searchParams.get("region");
if (url.searchParams.has("view")) {
  let view = url.searchParams.get("view");
  if (view == "history") {
    toggleStart(true);
    $("#matchhistory").show();
    app.startToHistory = ()=>{};
  }
  else if (view == "stats") {
    toggleStart(true);
    $("#stats").show();
    toggleSlideLeft();
    app.startToHistory = ()=>{};
  }
}
// ------------