import { createLucideIcon, type LucideIconName } from './icons.js';

export function injectPlayerStyles(playerBase: string): void {
	if (document.querySelector('link[data-vr-web-player-stylesheet]')) {
		return;
	}

	const link = document.createElement('link');
	link.rel = 'stylesheet';
	link.href = playerBase + 'vr180-player.css';
	link.dataset.vrWebPlayerStylesheet = 'true';

	if (document.head) {
		document.head.appendChild(link);
	} else {
		document.addEventListener('DOMContentLoaded', () => document.head.appendChild(link), { once: true });
	}
}

export function createPlayButton(): HTMLButtonElement {
	const playButton = document.createElement('button');
	playButton.type = 'button';
	playButton.className = 'vrwp-play-button';
	playButton.setAttribute('aria-label', 'Open media');
	playButton.appendChild(createLucideIcon('circle-play'));

	return playButton;
}

export function create2DControlPanel(): HTMLDivElement {
	const panel = document.createElement('div');
	panel.className = 'vrwp-panel';

	const status = document.createElement('div');
	status.className = 'vrwp-status';

	const videoTitle = document.createElement('p');
	videoTitle.className = 'vrwp-video-title';
	videoTitle.textContent = 'Title';

	const progress = document.createElement('div');
	progress.className = 'vrwp-progress';

	const currentTime = document.createElement('p');
	currentTime.className = 'vrwp-current-time';
	currentTime.textContent = '00:00:00';

	const bar = document.createElement('div');
	bar.className = 'vrwp-bar';

	const played = document.createElement('div');
	played.className = 'vrwp-played';
	bar.appendChild(played);

	const totalTime = document.createElement('p');
	totalTime.className = 'vrwp-total-time';
	totalTime.textContent = '00:00:00';

	progress.appendChild(currentTime);
	progress.appendChild(bar);
	progress.appendChild(totalTime);

	status.appendChild(videoTitle);
	status.appendChild(progress);

	const controls = document.createElement('div');
	controls.className = 'vrwp-controls';

	const fullscreenBtn = createControlButton('vrwp-fullscreen', 'Toggle fullscreen', 'maximize');

	const nav = document.createElement('div');
	nav.className = 'vrwp-nav';

	const backBtn = createControlButton('vrwp-back', 'Back 15 seconds', 'rotate-ccw', '15');

	const play2Btn = createControlButton('vrwp-play-toggle', 'Play or pause', 'play');

	const forwardBtn = createControlButton('vrwp-forward', 'Forward 15 seconds', 'rotate-cw', '15');

	nav.appendChild(backBtn);
	nav.appendChild(play2Btn);
	nav.appendChild(forwardBtn);

	const muteBtn = createControlButton('vrwp-mute', 'Toggle mute', 'volume-2');
	const loopBtn = createControlButton('vrwp-loop', 'Loop video', 'repeat');
	loopBtn.setAttribute('aria-pressed', 'false');

	controls.appendChild(fullscreenBtn);
	controls.appendChild(nav);
	controls.appendChild(loopBtn);
	controls.appendChild(muteBtn);

	panel.appendChild(status);
	panel.appendChild(controls);

	return panel;
}

function createControlButton(className: string, label: string, iconName: LucideIconName, skipLabel?: string): HTMLButtonElement {
	const button = document.createElement('button');
	button.type = 'button';
	button.className = className;
	button.setAttribute('aria-label', label);
	button.appendChild(createLucideIcon(iconName));

	if (skipLabel) {
		const labelEl = document.createElement('span');
		labelEl.className = 'vrwp-skip-label';
		labelEl.textContent = skipLabel;
		button.appendChild(labelEl);
	}

	return button;
}