let DarkModeHook = {

  mounted() {
    this.button = this.el.querySelector("button")
    this.button.addEventListener("click", this.show_selector.bind(this))
    this.selector = this.el.querySelector("ul")
    var lis = this.el.querySelectorAll("li")
    lis[0].addEventListener("click", this.switch_to_day_mode.bind(this))
    lis[1].addEventListener("click", this.switch_to_night_mode.bind(this))
    lis[2].addEventListener("click", this.switch_to_system_mode.bind(this))
  },
  show_selector(){
    this.selector.classList.remove("hidden")
  },
  switch_to_day_mode() {
    document.documentElement.classList.remove('dark')
    localStorage.theme = 'light'
    this.selector.classList.add("hidden")
  },
  switch_to_night_mode() {
    document.documentElement.classList.add('dark')
    localStorage.theme = 'dark'
    this.selector.classList.add("hidden")
  },
  switch_to_system_mode() {
    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
      document.documentElement.classList.add('dark')
    } else {
      document.documentElement.classList.remove('dark')
    }
    localStorage.removeItem('theme')
    this.selector.classList.add("hidden")
  },
}

export {DarkModeHook}