class Accounts {
  constructor() {
    this._localStorage = window.localStorage
    this._userImage = document.querySelector("#user-image")
    this._userLabel = document.querySelector("#user-label")
    this._accountsList = document.querySelector("#users-list")
    this._accountsButton = document.querySelector("#users-button")
    this._defaultUser = null
    this._usersObject = null
    this._init()
  }

  getDefaultUserName() {
    return this._defaultUser.username
  }

  _setAccountDefault() {
    var img = this._userImage.querySelector("img")
    img.src = this._defaultUser.image
    img.onerror = function() {
      img.src = ""
    }
    this._userLabel.innerHTML = `<b>${this._defaultUser.display_name}</b>`
  }

  _updateOnStartup() {
    var username = this._localStorage.getItem('defaultUser') || this._usersObject[0].username
    var display_name = this._localStorage.getItem('defaultUserDisplayName') || this._usersObject[0].display_name
    var image = this._localStorage.getItem("defaultUserProfileImage") || this._usersObject[0].image
    this._defaultUser = {
      username,
      display_name,
      image,
    }
    this._setAccountDefault()
  }

  _setGuestAccount() {
    if (lightdm.has_guest_account) {
      this._guestAccount = `guest-account-${Math.floor(Math.random() * 1000)}`
      this._usersObject.push({
        username: this._guestAccount,
        display_name: "Guest",
        image: ""
      })
    }
  }

  _setAccountList() {
    var dropdown = this._accountsList.querySelector(".dropdown")
    dropdown.innerHTML = ""
    for (let i = 0; i < this._usersObject.length; i++) {
      var name = this._usersObject[i].display_name
      var li = document.createElement("li")
      var button = document.createElement("button")
      button.innerHTML = name
      button.addEventListener("click", () => {
        this._updateDefaults(this._usersObject[i])
        this._setAccountDefault()
        authenticate.startAuthentication()
      })

      li.appendChild(button)
      dropdown.appendChild(li)
    }
  }

	_setKeydown() {
		var dropdown = this._accountsList.querySelector(".dropdown")
		dropdown.addEventListener("keydown", (ev) => {
			if (ev.keyCode == 27) {
				dropdown.classList.add("hide")
				this._accountsButton.focus()
			}
		})
	}

  _setButton() {
		var dropdown = this._accountsList.querySelector(".dropdown")
		document.querySelector("#screen").addEventListener("click", (ev) => {
			if (ev.target == this._accountsButton || ev.target.parentElement == this._accountsButton) {
				dropdown.classList.toggle("hide")
			} else
			if (ev.target != this._accountsList && ev.target.closest(".dropdown") == null) {
				dropdown.classList.add("hide")
			}
		})
		document.querySelector("#screen").addEventListener("focusin", (ev) => {
			if (!dropdown.contains(document.activeElement) && document.activeElement != this._accountsButton) {
				dropdown.classList.add("hide")
			}
		})
  }

  _updateDefaults(userObject) {
    if (!userObject) return
    this._defaultUser = userObject

    this._localStorage.setItem("defaultUser", this._defaultUser.username)
    this._localStorage.setItem("defaultUserDisplayName", this._defaultUser.display_name)
    this._localStorage.setItem("defaultUserProfileImage", this._defaultUser.image)
  }

  _init() {
    this._usersObject = lightdm.users
    this._updateOnStartup()
    this._setAccountList()
    this._setButton()
		this._setKeydown()
  }

}