var SelectedTrades = [];

let Parent = document.getElementsByClassName('card mcard p-5 text-center text-muted')[0].parentElement;
let Text = document.createElement('p');
Text.classList = 'mx-auto';
Text.style.textAlign = 'center';
Text.style.fontSize = '1.3rem';
Text.innerHTML = `
<span>0</span> trades selected!
<br>
<button id="viewSelectionBtn" class="btn btn-primary">View Selection</button>
<button id="clearSelectionBtn" class="btn btn-warning">Clear Selection</button>
<button id="cancelSelectionBtn" class="btn btn-danger">Cancel Selected Trades</button>
`;
Parent.insertBefore(Text, Parent.children[0]);
let Text_Span = Text.querySelector('span');
let Text_View = document.getElementById('viewSelectionBtn');
let Text_Clear = document.getElementById('clearSelectionBtn');
let Text_Cancel = document.getElementById('cancelSelectionBtn');

var ConfirmCancel = 0;
Text_View.addEventListener('click', function () {});
Text_Clear.addEventListener('click', function () {
	SelectedTrades = [];
	UpdateCheckboxes();
	Text_Span.innerText = SelectedTrades.length;
});
Text_Cancel.addEventListener('click', function () {
	ConfirmCancel = ConfirmCancel + 1;
	switch (ConfirmCancel) {
		case 0:
			Text_Cancel.innerText = 'Cancel Selected Trades';
			break;
		case 1:
			Text_Cancel.innerText = 'Are you sure?';
			break;
		case 2:
			let Success = true;
			for (let i = 0; i < SelectedTrades.length; i++) {
				setTimeout(function () {}, 110);
				console.log(SelectedTrades[i]);
				fetch('https://polytoria.com/api/trade/decline', {
					method: 'POST',
					headers: {
						'Content-Type': 'application/json',
						'X-CSRF-Token': document.querySelector('input[name="_csrf"]').value
					},
					body: JSON.stringify({id: SelectedTrades[i]})
				}).catch((error) => {
					// Handle any errors
					console.error('Error:', error);
					Success = false;
				});
			}
			SelectedTrades = [];
			UpdateCheckboxes();
			Text_Cancel.innerText = 'Cancel Selected Trades';
			ConfirmCancel = 0;
			break;
	}
});

LoadCheckBoxes();

function LoadCheckBoxes() {
	Array.from(document.getElementsByClassName('card-inbox')).forEach((element) => {
		let ViewBtn = element.querySelector('a.btn.btn-primary');
		let TradeID = parseInt(ViewBtn.getAttribute('href').split('/')[3]);
		var NewCheckBox = document.createElement('button');
		NewCheckBox.classList = 'polyplus-multicanceltr-checkbox';
		NewCheckBox.setAttribute('style', 'padding: 20px; background-color: #191919; border: 1px solid #393939; border-radius: 1rem; margin-left: 10px;');
		var Index = SelectedTrades.indexOf(TradeID);
		if (Index !== -1) {
			NewCheckBox.style.borderColor = 'lime';
		}
		ViewBtn.parentElement.appendChild(NewCheckBox);
		NewCheckBox.addEventListener('click', function () {
			var Index = SelectedTrades.indexOf(TradeID);
			if (Index === -1) {
				SelectedTrades.push(TradeID);
				NewCheckBox.style.borderColor = 'lime';
			} else {
				SelectedTrades.splice(Index, 1);
				NewCheckBox.style.borderColor = '#393939';
			}
			Text_Span.innerText = SelectedTrades.length;
			UpdateCheckboxes();
		});
	});
}

function UpdateCheckboxes() {
	document.querySelectorAll('.polyplus-multicanceltr-checkbox').forEach((element) => {
		let Parent = element.parentElement;
		let ViewBtn = Parent.querySelector('a.btn.btn-primary');
		if (element.getAttribute('disabled')) {
			element.removeAttribute('disabled');
		}
		if (SelectedTrades.IndexOf(ViewBtn.getAttribute('data-user-id')) === -1) {
			element.style.borderColor = '#393939';
		} else {
			element.style.borderColor = 'lime';
			if (SelectedTrades.length >= 10) {
				element.setAttribute('disabled', true);
			}
		}
	});
}