export const toggleOptionPane = (event, element) => {
  event.preventDefault();
  // show options
  if (
    !document.querySelector("#options").style.display ||
    document.querySelector("#options").style.display === "none"
  ) {
    // using this to do any potential init logic for the fields too
    loadPlayerControlsShown(document.querySelector("#playerControlsShown"))
    loadPlingVolume(document.querySelector("#plingVolume"))

    element.innerText = "❌";
    document.querySelector("#options").style.display = "block";
    return (document.querySelector("#viewing").style.display = "none");
  }
  // hide options
  element.innerText = "⚙️";
  document.querySelector("#options").style.display = "none";
  document.querySelector("#viewing").style.display = "block";
};

const getPlayerControlsShown = () =>  localStorage.getItem("watch-party-default-allow-controls") || false
// delete from storage on false to prevent weird js boolean parsing (Boolean('false') === True)
const setPlayerControlShown = (boolean) => !boolean 
? localStorage.removeItem("watch-party-default-allow-controls")
: localStorage.setItem("watch-party-default-allow-controls", boolean)
export const togglePlayerControlsShown = (element) => {
  const isShown = element.checked
  setPlayerControlShown(!isShown)
}
const loadPlayerControlsShown = (element) => {
  const isShown = getPlayerControlsShown()
  element.checked = !isShown
}

const getPlingVolume = () =>  localStorage.getItem("watch-party-pling-volume") || 100
const setPlingVolume = (value) => localStorage.setItem("watch-party-pling-volume", value)
export const handlePlingVolume = (element) => {
  setPlingVolume(element.value)
}
const loadPlingVolume = (element) => {
  element.value = getPlingVolume()
}