// app state
const state = {
	api: null,
	library: [],
	playlists: [],
	queue: [],
	queueIndex: -1,
	favorites: new Set(),
	loop: false,
	expanded: {
		artists: false,
		playlists: false,
		items: {
			artists: {},
			albums: {},
		},
	},
	settings: {
		scrobbling: true,
		dynamicFavicon: true,
		artArtist: 24,
		artAlbum: 32,
		artSong: 16,
		artNowPlaying: 128,
	},
};

// dom element references cached for quick access
const ui = {
	loginForm: document.getElementById(DOM_IDS.LOGIN_FORM),
	serverInput: document.getElementById(DOM_IDS.SERVER_INPUT),
	usernameInput: document.getElementById(DOM_IDS.USERNAME_INPUT),
	passwordInput: document.getElementById(DOM_IDS.PASSWORD_INPUT),
	authError: document.getElementById(DOM_IDS.AUTH_ERROR),
	artistsTree: document.getElementById(DOM_IDS.LIBRARY_TREE),
	playlistsTree: document.getElementById(DOM_IDS.PLAYLISTS_TREE),
	queueList: document.getElementById(DOM_IDS.QUEUE_LIST),
	queueCount: document.getElementById(DOM_IDS.QUEUE_COUNT),
	coverArt: document.getElementById(DOM_IDS.COVER_ART),
	trackTitle: document.getElementById(DOM_IDS.TRACK_TITLE),
	trackArtist: document.getElementById(DOM_IDS.TRACK_ARTIST),
	trackLyric: document.getElementById(DOM_IDS.TRACK_LYRIC),
	player: document.getElementById(DOM_IDS.PLAYER),
	playBtn: document.getElementById(DOM_IDS.PLAY_BTN),
	prevBtn: document.getElementById(DOM_IDS.PREV_BTN),
	nextBtn: document.getElementById(DOM_IDS.NEXT_BTN),
	progress: document.getElementById(DOM_IDS.PROGRESS),
	timeDisplay: document.getElementById(DOM_IDS.TIME_DISPLAY),
	settingsBtn: document.getElementById(DOM_IDS.SETTINGS_BTN),
	sectionToggles: document.querySelectorAll(`.${DOM_IDS.SECTION_TOGGLE}`),
	loopBtn: document.getElementById(DOM_IDS.LOOP_BTN),
	sortBtn: document.getElementById(DOM_IDS.SORT_BTN),
	clearBtn: document.getElementById(DOM_IDS.CLEAR_BTN),
};