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

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

var selected_pack = "";
var update_menu = document.getElementById("update");
var create_menu = document.getElementById("create");

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);
  downBar.style.width = `${(progress.payload.downloaded / progress.payload.total) * 100}%`;
  document.querySelector(".progress").style.visibility = "visible";
});

const download_finished = listen("download_finished", (event) => {
  downBar.style.width = 0;
  document.querySelector(".progress").style.visibility = "hidden";
});

window.addEventListener("DOMContentLoaded", () => {
  document.getElementById("browse").addEventListener("click", browse);
  document.getElementById("update_pack").addEventListener("click", update_pack);
  document.getElementById("up").addEventListener("click", up);
  document.getElementById("down").addEventListener("click", down);
  document.getElementById("add").addEventListener("click", add);
  document.getElementById("remove").addEventListener("click", remove);
  document.getElementById("back").addEventListener("click", back);
  
});

window.onload = async function() {
  refresh();
}

function up(){
  invoke("shift_up", { id: selected_pack }).then(refresh);
}

function down(){
  invoke("shift_down", { id: selected_pack }).then(refresh);
}

function back(){
  invoke("drop_session");
  window.location.href = "index.html";
}

function refresh(){
  update_menu.style.display = "none";
  create_menu.style.display = "none";
  invoke("get_modpacks").then(addModpacks);
}

function addModpacks(modpacks) {
  var modpacks_list = document.getElementById("modpacks");
  while (modpacks_list.firstChild) {
    modpacks_list.removeChild(modpacks_list.lastChild);
  }
  for (let i = 0; i < modpacks.length; i++){
    var div = document.createElement("div"); 
    div.textContent = modpacks[i].name;
    div.className = "modpack";
    div.id = modpacks[i].id;
    if(modpacks[i].id == selected_pack){
      div.classList.add("modpack-selected");
      update_menu.style.display = "flex";
      invoke("get_latest_version", {id: selected_pack}).then(update_version);
    }
    div.addEventListener("click", function() { modpackClick(modpacks[i].id) });
    modpacks_list.appendChild(div);
  }

  var div = document.createElement("div"); 
  div.textContent = "<Create New Pack>";
  div.className = "modpack";
  div.id = "*new*";
  div.addEventListener("click", function() { modpackClick("*new*") });
  modpacks_list.appendChild(div);
}

function modpackClick(id){
  var old = selected_pack;
  document.getElementById(id).classList.add("modpack-selected");
  selected_pack = id;
  if (old == id){
    selected_pack = "";
    update_menu.style.display = "none";
    create_menu.style.display = "none";
  }else if (id == "*new*"){
    update_menu.style.display = "none";
    create_menu.style.display = "flex";
  }else{
    update_menu.style.display = "flex";
    create_menu.style.display = "none";
    invoke("get_latest_version", {id: selected_pack}).then(update_version);
  }
  document.getElementById(old).classList.remove("modpack-selected");
}

function add(){
  var id = document.getElementById("pack_id").value;
  var name = document.getElementById("pack_name").value;
  selected_pack = id;
  invoke("add_pack", {id: id, name: name}).then(refresh);
}

function remove(){
  ask("Are you sure you want to remove " + document.getElementById(selected_pack).textContent + "?", {title: "Are you sure?", type: "Message"}).then((value) => { if (value) { invoke("remove_pack", {id: selected_pack}).then(refresh); } });
}

async function browse(){
  const selected = await open ({
    multiple: false,
    filters: [{
      name: 'Modrinth Modpack',
      extensions: ['mrpack']
    }]
  });
  if (selected != null){
    document.getElementById("file_path").value = selected;
  }
}

function update_version(version){
  document.getElementById("pack_version").value = version;
}

function update_pack(){
  var version = document.getElementById("pack_version").value;
  var path = document.getElementById("file_path").value;
  invoke("update_pack", {id: selected_pack, path: path, version: version}).then(refresh);
}