const { invoke } = window.__TAURI__.tauri;
const { listen } = window.__TAURI__.event;
const { ask, message } = window.__TAURI__.dialog;
const { exit } = window.__TAURI__.process;
const downBar = document.querySelector(".progressFinished");
//import { listen } from '@tauri-apps/api';

const error = listen("Error", (error) => {
  message(error.payload, {title: "Error", type: "error"});
});

const download_progress = listen("download_progress", (progress) => {
  console.log("Downloading");
  //console.log("Downloaded "+progress.payload.downloaded/(1024*1024) +"MB / " + progress.payload.total/(1024*1024) + "MB");
  let downProgress = (progress.payload.downloaded/(1024*1024)).toFixed(2);
  let downTotal = (progress.payload.total/(1024*1024)).toFixed(2);
  document.getElementById("download_name").textContent = "Downloading "+progress.payload.download_name;
  document.getElementById("download_progress").textContent = downProgress + "MB / "+downTotal+"MB";
  document.getElementById("launchGame").disabled = true;
  downBar.style.width = `${(progress.payload.downloaded / progress.payload.total) * 100}%`;
  document.querySelector(".progress").style.visibility = "visible";
});

const download_finished = listen("download_finished", (event) => {
  document.getElementById("download_name").textContent = "";
  document.getElementById("download_progress").textContent = "";
  document.getElementById("launchGame").disabled = false;
  document.getElementById("launchGame").textContent ="Launch Minecraft";
  downBar.style.width = 0;
  document.querySelector(".progress").style.visibility = "hidden";
});

const update_dialog = listen("update_dialog", (event) => {
  ask("Do you want to update?", {title: "Update Available", type: "Message"}).then((value) => { if (value) { invoke("update").then(window.close()); } });
});

window.addEventListener("DOMContentLoaded", () => {
 
  document.getElementById("launchGame").addEventListener("click", gameLaunch);
  document.getElementById("prism").addEventListener("click", prism);
  document.getElementById("settings").addEventListener("click", login);
  document.getElementById("back").addEventListener("click", back);
  
});
function packSelect() {
  document.getElementById("myDropdown").classList.toggle("show");

}

function login(){
  window.location.href = "Login.html";
}

function back(){
  console.log("test");
  window.location.href = "index.html";
}

function load() {
  console.log("loading");
  var dropdown = document.getElementById("Modpacks");
  var opt = document.createElement("option"); 
  opt.text = 'something';
  opt.value = 'somethings value';
  dropdown.options.add(opt);
}

window.onload = async function() {
  invoke("install_prism");
  invoke("get_modpacks").then(addModpacks);
  console.log(downBar.style.width)
}

function addModpacks(modpacks) {
  
  var dropdown = document.getElementById("Modpacks");
  //modpacks.sort((a, b) => a.name.localeCompare(b.name));
  //modpacks.reverse();
  for (let i = 0; i < modpacks.length; i++){
    var opt = document.createElement("option"); 
    opt.text = modpacks[i].name;
    opt.value = modpacks[i].id;
    dropdown.options.add(opt);
  }
}

function gameLaunch() {
  var packId = document.getElementById("Modpacks");
  var selectedId = packId.value;
  document.getElementById("launchGame").disabled = true;
  document.getElementById("launchGame").textContent ="Launching...";
  //TODO Launch Game
  invoke("launch_modpack", { id: selectedId}).then(() => { exit(1); });

  
}

function prism(){
  invoke("launch_prism");
}
  

//window.onclick = function(event) {
  //if (!event.target.matches('.dropbtn')) {
    //var dropdowns = document.getElementsByClassName("dropdown-content");
    //var i;
    //for (i = 0; i < dropdowns.length; i++) {
      //var openDropdown = dropdowns[i];
      //if (openDropdown.classList.contains('show')) {
        //openDropdown.classList.remove('show');
      //}
    //}
  //}
//}