const defaultTheme = [ "#000000cc", "#ffffffff", "#1f9b92ff", "#00000000", "#DC143Cff" ];

const saveData = {
  theme: defaultTheme,
  loginScreen: null,
  mainScreen: null
}

function $(id) {
  return document.getElementById(id);
}
function loadStorage() {
  savedTheme =  JSON.parse(localStorage.getItem("theme"));
  saveData.theme = savedTheme || defaultTheme;
}

function hexToBytes(hex) {
  let bytes = [];
  for (let c = 0; c < hex.length; c += 2) {
    bytes.push(parseInt(hex.substr(c, 2), 16));
  }
  return bytes;
}

function toByte(v) {
  return ('0' + 
    Math.min(Math.max(parseInt(v), 0), 255).toString(16)
  ).slice(-2);
}

function resetTheme(theme) {
  try{
    let bg_col = theme[0];
    let fg_col = theme[1];
    let main_col = theme[2];
    let sub_col = theme[3];
    let err_col = theme[4];
  
    let fg_opacity = hexToBytes(fg_col.substr(7));
    fg_col = fg_col.substr(0,7);
    let bg_opacity = hexToBytes(bg_col.substr(7));
    bg_col = bg_col.substr(0,7);
    let main_opacity = hexToBytes(main_col.substr(7));
    main_col = main_col.substr(0,7);
    let sub_opacity = hexToBytes(sub_col.substr(7));
    sub_col = sub_col.substr(0,7);
    let err_opacity = hexToBytes(err_col.substr(7));
    err_col = err_col.substr(0,7);
  
    $("bg_col_input").value = bg_col;
    $("bg_col_opacity").value = bg_opacity;
    $("fg_col_input").value = fg_col;
    $("fg_col_opacity").value = fg_opacity;
    $("main_col_input").value = main_col;
    $("main_col_opacity").value = main_opacity;
    $("sub_col_input").value = sub_col;
    $("sub_col_opacity").value = sub_opacity;
    $("err_col_input").value = err_col;
    $("err_col_opacity").value = err_opacity;
  } catch {}
}

function setTheme() {
  try {
    let bg_col = $("bg_col_input").value
    let bg_opacity = toByte($("bg_col_opacity").value);
    let fg_col = $("fg_col_input").value;
    let fg_opacity = (toByte($("fg_col_opacity").value));
    let main_col = $("main_col_input").value;
    let main_opacity = (toByte($("main_col_opacity").value));
    let sub_col = $("sub_col_input").value;
    let sub_opacity = (toByte($("sub_col_opacity").value));
    let err_col = $("err_col_input").value;
    let err_opacity = (toByte($("err_col_opacity").value));
  
    saveData.theme[0] = bg_col + bg_opacity;
    saveData.theme[1] = fg_col + fg_opacity;
    saveData.theme[2] = main_col + main_opacity;
    saveData.theme[3] = sub_col + sub_opacity;
    saveData.theme[4] = err_col + err_opacity;
  
    localStorage.setItem("theme", JSON.stringify(saveData.theme));
  } catch {} finally {
    document.body.style.setProperty("--bg_color", saveData.theme[0]);
    document.body.style.setProperty("--fg_color", saveData.theme[1]);
    document.body.style.setProperty("--main_color", saveData.theme[2]);
    document.body.style.setProperty("--sub_color", saveData.theme[3]);
    document.body.style.setProperty("--err_color", saveData.theme[4]);
  }
}

function setBG(screen) {
  // get the input element based on screen
  // create the reader
  // save dataURL into localstorage
  
  // resetBG(screen)
}

function resetBG(screen) {
  // set dataURL from localstorage to theme state
  // bind reader load -> body background set dataURL
}

loadStorage();
resetTheme(saveData.theme);
setTheme();
resetBG("login");
resetBG("main");