const { TouchBar } = require("electron");
const {
	TouchBarButton,
	TouchBarLabel,
	TouchBarSpacer,
	TouchBarSegmentedControl,
	TouchBarScrubber,
} = TouchBar;

const registerCallback = require("../../providers/song-info");
const getSongControls = require("../../providers/song-controls");

// Songtitle label
const songTitle = new TouchBarLabel({
	label: "",
});
// This will store the song controls once available
let controls = [];

// This will store the song image once available
const songImage = {};

// Pause/play button
const pausePlayButton = new TouchBarButton();

// The song control buttons (control functions are in the same order)
const buttons = new TouchBarSegmentedControl({
	mode: "buttons",
	segments: [
		new TouchBarButton({
			label: "⏮",
		}),
		pausePlayButton,
		new TouchBarButton({
			label: "⏭",
		}),
		new TouchBarButton({
			label: "👎",
		}),
		new TouchBarButton({
			label: "👍",
		}),
	],
	change: (i) => controls[i](),
});

// This is the touchbar object, this combines everything with proper layout
const touchBar = new TouchBar({
	items: [
		new TouchBarScrubber({
			items: [songImage, songTitle],
			continuous: false,
		}),
		new TouchBarSpacer({
			size: "flexible",
		}),
		buttons,
	],
});

module.exports = (win) => {
	const { playPause, next, previous, dislike, like } = getSongControls(win);

	// If the page is ready, register the callback
	win.once("ready-to-show", () => {
		controls = [previous, playPause, next, like, dislike];

		// Register the callback
		registerCallback((songInfo) => {
			// Song information changed, so lets update the touchBar

			// Set the song title
			songTitle.label = songInfo.title;

			// Changes the pause button if paused
			pausePlayButton.label = songInfo.isPaused ? "▶️" : "⏸";

			// Get image source
			songImage.icon = songInfo.image
				? songInfo.image.resize({ height: 23 })
				: null;

			win.setTouchBar(touchBar);
		});
	});
};