import { addNavbar } from '/functions/addNavbar.js';
import { loadName } from '/functions/loadName.js';

window.addEventListener('load', async () => {
	addNavbar();
	await loadName();
	await loadOptions();

	document.body.style.display = 'block';
});

async function loadOptions() {
	const params = new URLSearchParams(window.location.search);
	const eventId = params.get('event-id');
	const res = await fetch(`/events/poll/datetime/${eventId}`);
	const result = await res.json();
	if (result.status) {
		let pollTitle = '';
		let pollFrameHTML = '';
		let buttonContainerHTML = '';

		// Poll title HTML
		if (result.pollTerminated) {
			pollTitle = 'Poll Terminated';
		} else if (result.eventDeleted) {
			pollTitle = 'Deleted Event';
		} else if (!result.creator) {
			if (result.choice) {
				pollTitle = `Your choice was: <br>
                start: ${new Date(result.choice.start)
					.toLocaleString('en-US', { hour12: false })
					.replace(',', '')
					.slice(0, -3)}<br>
                end: ${new Date(result.choice.end)
					.toLocaleString('en-US', { hour12: false })
					.replace(',', '')
					.slice(0, -3)}
                `;
			} else {
				pollTitle = 'Please click on the venue option to vote:';
			}
		} else {
			pollTitle = 'You may click button below to terminate poll.';
		}

		// Poll Options HTML
		const optionsList = result.pollOptions;
		optionsList.forEach((each, index) => {
			const voteCount = result.voteCounts[each.id].count;
			pollFrameHTML += `
                <div class="option-container" id="option_${each.id}">
                    <div class="title">
                        Datetime ${index + 1}
                    </div>
                    <div class="start">
                        Start: ${new Date(each.start_datetime)
							.toLocaleString('en-US', { hour12: false })
							.replace(',', '')
							.slice(0, -3)}
                    </div>
                    <div class="end">
                        End: ${new Date(each.end_datetime)
							.toLocaleString('en-US', { hour12: false })
							.replace(',', '')
							.slice(0, -3)}
                    </div>
                    <div class="vote">
                        ${voteCount === '1' ? `${voteCount} Vote` : `${voteCount} Votes`}
                    </div>
                </div>
            `;
		});

		// Button HTML
		if (!result.pollTerminated && !result.eventDeleted) {
			if (result.creator) {
				buttonContainerHTML = `<button id="poll-terminate-button">Terminate Poll</button>`;
			} else {
				if (!result.choice) {
					buttonContainerHTML = `<button id="poll-submit-button">Submit Choice</button>`;
				}
			}
		}

		// Add HTML to the page
		document.querySelector('.poll-title').innerHTML = pollTitle;
		document.querySelector('.poll-frame').innerHTML = pollFrameHTML;
		document.querySelector('.button-container').innerHTML = buttonContainerHTML;

		// Check if participant that has not yet voted
		if (!result.pollTerminated && !result.eventDeleted) {
			if (!result.creator && !result.choice) {
				// Listen option choice
				let optionId;

				const optionsDiv = document.querySelectorAll('.option-container');
				optionsDiv.forEach((each) => {
					each.addEventListener('click', (e) => {
						if (e.target.classList.contains('option-container')) {
							e.target.classList.add('selected');
							optionId = e.target.id;
							const otherDiv = document.querySelectorAll(`.option-container:not([id*="${optionId}"])`);
							otherDiv.forEach((each) => {
								each.classList.remove('selected');
							});
						}
					});
				});

				// Listen submit button for voting
				document.querySelector('#poll-submit-button').addEventListener('click', async () => {
					const optionId = document.querySelector('.selected').id.replace('option_', '');
					const res = await fetch(`/events/poll/datetime/vote/${eventId}/${optionId}`, {
						method: 'POST'
					});
					const result = await res.json();
					if (result.status) {
						alert('Successfully voted!');
						await loadOptions();
					} else {
						alert('Unable to submit vote!');
					}
				});
			} else if (result.creator) {
				// Listen to terminate button
				document.querySelector('#poll-terminate-button').addEventListener('click', () => {
					const dateTimeTerminatePoll = new bootstrap.Modal(document.getElementById('delete-poll-modal'));
					dateTimeTerminatePoll.show();
					document.querySelector('#poll-terminate-confirm-button').addEventListener('click', async () => {
						const params = new URLSearchParams(window.location.search);
						const eventId = params.get('event-id');
						const res = await fetch(`/events/poll/datetime/${eventId}`, {
							method: 'DELETE'
						});
						const result = await res.json();
						if (result.status) {
							alert('Successfully terminated poll!');
							dateTimeTerminatePoll.hide();
							loadOptions();
						} else {
							alert('Unable to terminate poll!');
						}
					});
				});
			}
		}

		// Add backward button
		document.querySelector('#back-page').href = `/eventSummary/event.html?${params}`;
	} else {
		alert('Unable to load datetime poll page!');
		window.location.href = '/index.html';
	}
}