const seed = 'none'
const scenario = 'standard'
const options = 'none'
//const rules = require("./rules")

const last_card = 110

const stability=0
const US_tiananmen=0
const USSR_tiananmen=0
const toolbar = document.getElementById('toolbar')
const vpMarker = document.getElementById('vp')
const mapContainer = document.querySelector('.map')
let handActive=0
let doInfl=0
let doSupportCheck=0
let demTSTPos=0
let comTSTPos=0
let demTSTPrev=0
let comTSTPrev=0
let turn=1
let actionRound=1
let supportCheckTargetName=''
let supportCheckTargetCountry=0
let vp = 0
let germanyRevolution=0
let polandRevolution=0
let czechRevolution=0
let hungaryRevolution=0
let romaniaRevolution=0
let buglariaRevolution=0
let germanyHeld=0
let polandHeld=0
let czechHeld=0
let hungaryHeld=0
let romaniaHeld=0
let bulgariaHeld=0


const countryNames= [
	null,
	"East Germany",
	"Poland",
	"Czechoslovakia",
	"Hungary",
	"Romania",
	"Bulgaria"
]


const overlay = document.getElementById('overlay');
const spaceNameElement = document.getElementById('space-name');
const spaceCharacteristicsElement = document.getElementById('space-characteristics');


// Event listener to track mouse movement over the map
        document.querySelector('.map').addEventListener('mousemove', function(event) {
            const x = event.offsetX; // X-coordinate of mouse relative to container
            const y = event.offsetY; // Y-coordinate of mouse relative to container
	spaceCharacteristicsElement.innerText = `X: ${x}, Y: ${y}`;
	})


 // Create map areas dynamically based on coordinates

 function create_ui() {

// CREATE MAP

	spaces.forEach((space) => {
		if (space && space.box) {
                const { x, y, h, w } = space.box;
                const spaceArea = document.createElement('div');
                spaceArea.classList.add('space-area', space.country)
				spaceArea.id=space.name_unique;
                spaceArea.style.left = x + 'px';
                spaceArea.style.top = y + 'px';
                spaceArea.style.width = w + 'px';
                spaceArea.style.height = h + 'px';
				spaceArea.style.zIndex = 2;
				spaceArea.my_space = space.name_unique;  
        		spaceArea.addEventListener('mousedown', on_click_space);
				//spaceArea.addEventListener('click', finishSupportCheck)

			/*if (space.demInfl > 0 && space.demInfl - space.comInfl >= space.stability) {
				const img = document.createElement('img')
				img.classList.add('demInfl', space.country)
				img.id=space.name
				img.src = `images/US_${space.demInfl}.gif`
				spaceArea.appendChild(img)
			} else if (space.demInfl > 0) {*/
				const dem_img = document.createElement('div')
				dem_img.classList.add('demInfl', space.country)
				dem_img.style.display = 'none'
				dem_img.id=`${space.name_unique}_demInfl`
				dem_img.style.zIndex = 1
				spaceArea.appendChild(dem_img)

				const demInflValue = document.createElement('p')
				demInflValue.className='demInflValue'
				demInflValue.style.display = 'none'
				demInflValue.id=`${space.name_unique}_demInflValue`
				demInflValue.innerText=space.demInfl
				demInflValue.style.zIndex = 1
				spaceArea.appendChild(demInflValue)
			//}

			/*} else if (space.comInfl > 0 && space.comInfl - space.demInfl >= space.stability) {
				const img = document.createElement('img')
				img.className='comInfl'
				img.id=space.name
				img.src = `images/SV_${space.comInfl}.gif`
				spaceArea.appendChild(img)		
			} else if (space.comInfl > 0) {*/
				const com_img = document.createElement('div')
				com_img.className='comInfl'
				com_img.style.display='none'
				com_img.id=`${space.name_unique}_comInfl`
				com_img.style.zIndex = 1
				spaceArea.appendChild(com_img)

				const comInflValue = document.createElement('p')
				comInflValue.className='comInflValue'
				comInflValue.style.display='none'
				comInflValue.id=`${space.name_unique}_comInflValue`
				comInflValue.innerText=space.comInfl
				comInflValue.style.zIndex = 1
				spaceArea.appendChild(comInflValue)
			//} 
		
		mapContainer.appendChild(spaceArea);
		}
	});

// CREATE CARDS

	for (let c = 1; c <= last_card; ++c) {

		const hand_card = document.createElement('img');
                hand_card.classList.add('hand_card')
				hand_card.id=`card_${c}`;
				hand_card.src = `cards/e${c}.gif`
				hand_card.my_card = c;  
        		hand_card.addEventListener('mousedown', on_click_card);
				ui.cards.push(hand_card);
	}

}


function on_click_space(evt) {
    if (evt.button === 0) {
        const space = evt.target.my_space;
        console.log('on_click_space_called with space:', space);
        if (send_action('infl', space)) {
            evt.stopPropagation();
        } else {
            console.log('send_action failed for space:', space);
        }
    }
    //hide_popup_menu();
}

function on_click_card(evt) {
	if (evt.button === 0) {
        const card = evt.target.my_card;
        console.log('on_click_card_called with card:', card);
        if (send_action('card', card)) {
            evt.stopPropagation();
        } else {
            console.log('send_action failed for card:', card);
        }
    }
}

function is_action(action) {
	console.log('is_action called with: ', action)
	if (view.actions && view.actions[action])
		return true
	return false
}


function on_log(text) { // eslint-disable-line no-unused-vars
	let p = document.createElement("div")

	if (text.match(/^>/)) {
		text = text.substring(1)
		p.className = 'i'
	}

	if (text.match(/^\.h1/)) {
		text = text.substring(4)
		p.className = 'h1'
	}
	else if (text.match(/^\.h2d/)) {
		text = text.substring(5)
		p.className = 'h2 dem'
	}
	else if (text.match(/^\.h2c/)) {
		text = text.substring(5)
		p.className = 'h2 com'
	}
	else if (text.match(/^\.h2/)) {
		text = text.substring(4)
		p.className = 'h2'
	}
	else if (text.match(/^\.h3/)) {
		text = text.substring(4)
		p.className = 'h3'
	}

	p.innerHTML = text
	return p
}

let ui = {
	favicon: document.getElementById('favicon'),
	player: [
		document.getElementById("role_Democrat"),
		document.getElementById("role_Communist"),
	],
	cards: [ null ],
	played_card: 0,
	events_panel: document.getElementById("events_panel"),
	hand_panel: document.getElementById("hand_panel"),
	turn: document.getElementById("turn-tracker"),
	round: document.getElementById("action-round-tracker"),
	stability: document.getElementById("stability-track"),
	dem_TST: document.getElementById("dem-TST"),
	com_TST: document.getElementById("com-TST"),
	vp: document.getElementById("vp"),
	spaces: document.getElementsByClassName("space-area")

}

function on_update() {
	console.log('on_update called')
	console.log('view.valid_spaces: ', view.valid_spaces)
	console.log('ui.spaces: ', ui.spaces)
//	console.log('view.actions: ', view.actions)

	//Check influence values
	const pieces = view.pieces
	pieces.forEach(piece => {
		const dem_marker = document.getElementById(`${piece.name_unique}_demInfl`);
		const dem_number = document.getElementById(`${piece.name_unique}_demInflValue`);
		const com_marker = document.getElementById(`${piece.name_unique}_comInfl`);
		const com_number = document.getElementById(`${piece.name_unique}_comInflValue`);
		
		dem_number.innerText=piece.demInfl
		if (piece.demInfl > 0) {
			dem_marker.style.display = 'block';
			dem_number.style.display = 'block';

			if(piece.demInfl - piece.comInfl >= piece.stability){
				dem_marker.classList.add('controlled')
				dem_marker.classList.remove('uncontrolled')
			} else {
				dem_marker.classList.add('uncontrolled')
				dem_marker.classList.remove('controlled')
			}
		} else {
			dem_marker.style.display = 'none';
			dem_number.style.display = 'none';
		}
		com_number.innerText=piece.comInfl
		if (piece.comInfl > 0) {
			com_marker.style.display = 'block';
			com_number.style.display = 'block';

			if(piece.comInfl - piece.demInfl >= piece.stability){
				com_marker.classList.add('controlled')
				com_marker.classList.remove('uncontrolled')
			} else {
				com_marker.classList.add('uncontrolled')
				com_marker.classList.remove('controlled')
			}
		} else {
			com_marker.style.display = 'none';
			com_number.style.display = 'none';
		}
		
	});


// UPDATE HAND

	document.getElementById("hand").replaceChildren()
	document.getElementById("events").replaceChildren()
	
	if (view.hand.length) {
		document.getElementById("hand_panel").classList.remove("hide")
		for (let c of view.hand) {
			//const cardElement = ui.cards[c];
		//if (cardElement) {
			document.getElementById("hand").appendChild(ui.cards[c]);
		/*} else {
			console.error(`Card with key ${c} not found in ui.cards`);
		}*/
	}	
	} else {
		document.getElementById("hand_panel").classList.add("hide")
	}

// EVENT PANEL
	if (view.played_card > 0) {
		document.getElementById("events_panel").classList.remove("hide")
		document.getElementById("events").appendChild(ui.cards[view.played_card]);
	} else {
		document.getElementById("events_panel").classList.add("hide")
	}

// UPDATE BOARD MARKERS

	ui.turn.className = `t${view.turn}`
	ui.round.className = `dem-action-round-tracker r${view.round}`
	ui.stability.className = `s${view.stability}`
	ui.dem_TST.className = `tst${view.dem_TST}`
	ui.com_TST.className = `tst${view.com_TST}`
	ui.vp.className = `vp${view.vp}`





	action_button("done", "Done")
	action_button("undo", "Undo")
	action_button("event", "Event")
	action_button("influence", "Influence")
	action_button("tst", "Tiananmen Square Track")
	action_button("support_check", "Support Check")

}


create_ui()