"use strict"

const ui = {
	map: document.getElementById("map"),

	hand: document.getElementById("hand"),
	tableaus: {
		a: document.getElementById("tableau_a"),
		c: document.getElementById("tableau_c"),
		m: document.getElementById("tableau_m"),
	},

	// spaces
	tracks_x: [],
	tracks: [],
	fronts: [],
	con_fronts: [],
	str_fronts: [],

	// tokens
	standees: [],
	bonuses: [],
	medallions: [],
	blank_markers: [],

	// cards
	cards: [],
}

const boxes = {
	"Northern": [149,146,149,149],
	"Aragon": [563,275,149,149],
	"Southern": [341,641,149,149],
	"Madrid": [195,398,161,161],
	"Liberty": [955,65,662,59],
	"Collectivization": [954,231,663,60],
	"SovietSupport": [954,564,663,59],
	"ForeignAid": [954,730,663,59],
	"Government": [1015,398,602,58],
	"Medallion1": [608,834,69,70],
	"Medallion2": [690,834,70,70],
	"Medallion3": [772,834,70,70],
	"Medallion4": [855,834,70,70],
	"Medallion5": [937,834,70,70],
	"CurrentYearDeck": [38,976,187,261],
	"CurrentEvent1": [301,976,187,261],
	"CurrentEvent2": [526,976,187,261],
	"CurrentEvent3": [751,976,187,261],
	"CurrentEvent4": [976,976,187,261],
	"Glory1": [1320,966,59,59],
	"Glory2": [1418,966,119,59],
	"Glory3": [1399,1075,58,58],
	"Glory4": [1278,1153,300,59],
	"Bonus1": [728,726,74,73],
	"Bonus2": [818,726,74,73],
}

let action_register = []

function register_action(e, action, id) {
	e.my_action = action
	e.my_id = id
	e.onmousedown = on_click_action
	action_register.push(e)
}

function on_click_action(evt) {
	if (evt.button === 0)
		if (send_action(evt.target.my_action, evt.target.my_id))
			evt.stopPropagation()
}

function is_action(action, arg) {
	if (arg === undefined)
		return !!(view.actions && view.actions[action] === 1)
	return !!(view.actions && view.actions[action] && view.actions[action].includes(arg))
}

let on_init_once = false

function build_track(t, action_name, track_name, a, b) {
	let [x, y, w, h] = boxes[track_name]
	let e

	ui.tracks[t] = []
	ui.tracks_x[t] = []
	for (let s = a; s <= b; ++s) {
		const bm = t * 11 + s

		e = (ui.blank_markers[bm] = document.createElement("div"))
		e.className = "red token blank hide"
		e.style.top = Math.round(y+4) + "px"
		e.style.left = Math.round(x+3) + "px"
		register_action(e, "blank_marker", bm)
		ui.map.appendChild(e)

		ui.tracks_x[t][s] = Math.round(x) + 4 + "px"
		e = ui.tracks[t][s] = document.createElement("div")
		e.className = "track"
		e.style.top = y + "px"
		e.style.left = Math.round(x) + "px"
		register_action(e, action_name, s);
		ui.map.appendChild(e)

		x += 60.5
	}

	e = (ui.standees[t] = document.createElement("div"))
	e.className = "white token standee standee_" + t
	e.style.top = y - 10 + "px"
	e.style.left = boxes[track_name][0] + 4 + "px"
	register_action(e, "standee", t)
	ui.map.appendChild(ui.standees[t])
}

function build_bonus(b, box_name, cname) {
	let e = ui.bonuses[b] = document.createElement("div")
	let [x, y, w, h] = boxes[box_name]
	e.className = "red token round " + cname
	e.style.top = Math.round(y + w/2 - 32) + "px"
	e.style.left = Math.round(x + w/2 - 32) + "px"
	register_action(e, "bonus", b)
	ui.map.appendChild(e)
}

function build_front(i, action_id, box_name) {
	let e = ui.fronts[i] = document.createElement("div")
	let [x, y, w, h] = boxes[box_name]
	e.className = "front"
	e.style.top = Math.round(y-3) + "px"
	e.style.left = Math.round(x-3) + "px"
	e.style.width = Math.round(w - 6) + "px"
	e.style.height = Math.round(h - 6) + "px"
	register_action(e, "front", action_id)
	ui.map.appendChild(e)

	e = ui.con_fronts[i] = document.createElement("div")
	e.className = "front_container"
	e.style.top = y + 5 + "px"
	e.style.left = x + "px"
	e.style.width = w - 25 + "px"
	e.style.height = 55 + "px"
	ui.map.appendChild(e)

	e = ui.str_fronts[i] = document.createElement("div")
	e.className = "front_container"
	e.style.top = y + h - 55 - 5+ "px"
	e.style.left = x + "px"
	e.style.width = w - 25 + "px"
	e.style.height = 55 + "px"
	ui.map.appendChild(e)

}

function on_init() {
	var i, e

	if (on_init_once)
		return
	on_init_once = true

	build_track(LIBERTY, "tr_liberty", "Liberty", 0, 10)
	build_track(COLLECTIVIZATION, "tr_collectivization", "Collectivization", 0, 10)
	build_track(GOVERNMENT, "tr_government", "Government", 1, 10)
	build_track(SOVIET_SUPPORT, "tr_soviet_support", "SovietSupport", 0, 10)
	build_track(FOREIGN_AID, "tr_foreign_aid", "ForeignAid", 0, 10)

	build_bonus(0, "Bonus1", "bonus_morale")
	build_bonus(1, "Bonus2", "bonus_teamwork")

	build_front(0, "a", "Aragon")
	build_front(1, "m", "Madrid")
	build_front(2, "n", "Northern")
	build_front(3, "s", "Southern")

	ui.medallion_container = []
	for (i = 0; i < 5; ++i) {
		ui.medallion_container[i] = document.createElement("div")
		ui.medallion_container[i].classList = "medallion_container"
		ui.medallion_container[i].style.top = boxes["Medallion"+(i+1)][1] + "px"
		ui.medallion_container[i].style.left = boxes["Medallion"+(i+1)][0] + "px"
		ui.map.appendChild(ui.medallion_container[i])
	}

	ui.glory_container = []
	for (i = 0; i < 4; ++i) {
		e = (ui.glory_container[i] = document.createElement("div"))
		e.className = "glory_container"
		e.style.left = boxes["Glory" + (i+1)][0] + "px"
		e.style.top = boxes["Glory" + (i+1)][1] + "px"
		ui.map.appendChild(e)
	}

	// TODO: current year deck

	ui.current_events = []
	for (i = 0; i < 4; ++i) {
		e = (ui.current_events[i] = document.createElement("div"))
		e.className = "current_events"
		e.style.left = boxes["CurrentEvent" + (i+1)][0] - 10 + "px"
		e.style.top = boxes["CurrentEvent" + (i+1)][1] - 10 + "px"
		ui.map.appendChild(e)
	}

	for (i = 0; i < 9; ++i) {
		e = (ui.medallions[i] = document.createElement("div"))
		e.className = "pink token medallion medallion_" + i
		register_action(e, "medallion", i)
	}

	for (i = 1; i <= 120; ++i) {
		e = (ui.cards[i] = document.createElement("div"))
		e.className = "card card_" + i
		register_action(e, "card", i)
	}

	e = ui.initiative_token = document.createElement("div")
	e.className = "initiative_token"
}

function place_cards(e, cards) {
	e.replaceChildren()
	for (let c of cards) {
		ui.cards[c].classList.remove("selected")
		e.appendChild(ui.cards[c])
		if (view.selected_cards.includes(c)) {
			ui.cards[c].classList.add("selected")
		}
	}
}

const faction_class = {
	"a": "anarchist",
	"c": "communist",
	"m": "moderate",
}

function update_front(str_container, con_container, front) {
	var i, n, e, cn

	str_container.replaceChildren()
	if (front.value < 0) {
		n = -front.value
		cn = "brown token front_minus"
	} else {
		n = front.value
		cn = "pink token front_plus"
	}
	for (i = 0; i < n; ++i) {
		let e = document.createElement("div")
		e.className = cn
		str_container.appendChild(e)
	}

	con_container.replaceChildren()
	for (i of ["a", "c", "m"]) {
		if (front.contributions.includes(i)) {
			let e = document.createElement("div")
			e.className = "red token player " + faction_class[i]
			con_container.appendChild(e)
		}
	}
}

function on_update() {
	var i, e

	console.log("on_update", JSON.stringify(view,))
	on_init()

	place_cards(ui.hand, view.hand)
	place_cards(ui.tableaus.a, [ 115, ...view.tableaus.a])
	place_cards(ui.tableaus.c, [ 116, ...view.tableaus.c])
	place_cards(ui.tableaus.m, [ 117, ...view.tableaus.m])

	// TODO: current year deck
	for (i = 0; i <= 1; ++i) {
		ui.bonuses[i].classList.toggle("red", !!view.bonuses[i])
		ui.bonuses[i].classList.toggle("gray", !view.bonuses[i])
		ui.bonuses[i].classList.toggle("off", !view.bonuses[i])
	}

	for (i = 0; i < 4; ++i) {
		if (i < view.current_events.length)
			place_cards(ui.current_events[i], [view.current_events[i]])
		else
			place_cards(ui.current_events[i], [])
	}

	for (i = 0; i < 5; ++i)
		ui.standees[i].style.left = ui.tracks_x[i][view.tracks[i]]

	for (i = 0; i < 55; ++i) {
		if (ui.blank_markers[i])
			ui.blank_markers[i].classList.toggle("hide", !view.triggered_track_effects.includes(i))
	}

	for (i = 0; i < 5; ++i) {
		ui.medallion_container[i].replaceChildren()
		if (i < view.medallions.pool.length)
			ui.medallion_container[i].appendChild(ui.medallions[i])
	}

	update_front(ui.str_fronts[0], ui.con_fronts[0], view.fronts.a)
	update_front(ui.str_fronts[1], ui.con_fronts[1], view.fronts.m)
	update_front(ui.str_fronts[2], ui.con_fronts[2], view.fronts.n)
	update_front(ui.str_fronts[3], ui.con_fronts[3], view.fronts.s)

	action_button("add_to_front", "+1 to a Front")
	action_button("d_liberty", "Decrease Liberty")
	action_button("soviet_support", "Soviet Support")
	action_button("collectivization", "Collectivization")
	action_button("d_collectivization", "Decrease Collectivization")
	action_button("d_foreign_aid", "Decrease Foreign Aid")
	action_button("d_government", "Decrease Government")
	action_button("d_soviet_support", "Decrease Soviet Support")
	action_button("foreign_aid", "Foreign Aid")
	action_button("government", "Government")
	action_button("liberty", "Liberty")
	action_button("government_to_center", "Government towards center")
	action_button("teamwork_on", "Teamwork Bonus On")
	action_button("Anarchist", "Anarchist")
	action_button("Communist", "Communist")
	action_button("Moderate", "Moderate")
	action_button("gain_hp", "Gain Hero Points")
	action_button("lose_hp", "Lose Hero Points")
	action_button("draw_card", "Draw a card")
	action_button("draw_cards", "Draw cards")
	action_button("play_to_tableau", "Play card to Tableau")
	action_button("play_for_event", "Play card for Event")
	action_button("use_ap", "Use Action Points")
	action_button("use_morale_bonus", "Use Morale Bonus")
	action_button("move_track", "Move a Track")
	action_button("turn_on_bonus", "Turn on a Bonus")
	action_button("add_glory", "Add to Bag of Glory")
	action_button("draw_glory", "Draw from Bag of Glory")
	action_button("up", "Up")
	action_button("down", "Down")
	action_button("next", "Next")
	action_button("remove_blank_marker", "Remove Blank marker")
	action_button("confirm", "Confirm")
	action_button("yes", "Yes")
	action_button("no", "No")
	action_button("skip", "Skip")
	action_button("spend_hp", "Spend Hero Points")
	action_button("use_momentum", "Play second card (Momentum)")
	action_button("done", "Done")
	action_button("end_turn", "End turn")
	action_button("undo", "Undo")

	for (let e of action_register)
		e.classList.toggle("action", is_action(e.my_action, e.my_id))
}

function on_update_OLD() {
	for (let key of Object.keys(view.hero_points)) {
		ui.roles[key].hero_points.replaceChildren(`Hero Points: ${view.hero_points[key]}`)
	}
	ui.bag_of_glory.replaceChildren(`Bag of Glory: ${view.bag_of_glory_count}`)
	ui.current_events.replaceChildren()
	for (let i = 0; i < view.current_events.length; i++) {
		const cardId = view.current_events[i]
		ui.current_events.appendChild(ui.cards[cardId])
		ui.cards[cardId].classList.add("event")
		ui.cards[cardId].style.left = LAYOUT_CURRENT_EVENTS[i][0] + "px"
		ui.cards[cardId].style.top = LAYOUT_CURRENT_EVENTS[i][1] + "px"
	}
	ui.markers.replaceChildren()
	for (let bm of view.triggered_track_effects) {
		const s = bm % 11
		const t = Math.floor(bm / 11)
		ui.markers.appendChild(ui.blank_markers[bm])
		ui.blank_markers[bm].style.left = LAYOUT_TRACKS[t][s][0] + "px"
		ui.blank_markers[bm].style.top = LAYOUT_TRACKS[t][s][1] + "px"
	}
	for (let bonus_id of Object.keys(view.bonuses)) {
		ui.bonuses[bonus_id].setAttribute("data-bonus-on", view.bonuses[bonus_id] + 0)
	}
	place_cards(ui.hand, view.hand)
	ui.player_area_tabs.hand_tab.replaceChildren(`Hand (${view.hand.length})`)
	place_cards(ui.player_area_cards.deck, view.deck)
	ui.player_area_tabs.deck_tab.replaceChildren(`Deck (${view.deck.length})`)
	place_cards(ui.player_area_cards.discard, view.discard)
	ui.player_area_tabs.discard_tab.replaceChildren(`Discard (${view.discard.length})`)
	place_cards(ui.player_area_cards.trash, view.trash)
	ui.player_area_tabs.trash_tab.replaceChildren(`Trash (${view.trash.length})`)
	place_cards(ui.selectable_cards, view.selectable_cards)
	for (let faction_id of FACTIONS) {
		place_cards(ui.tableaus[faction_id], view.tableaus[faction_id])
	}
	for (let i = 0; i < view.tracks.length; ++i) {
		ui.standees[i].style.left = LAYOUT_TRACKS[i][view.tracks[i]][0] + "px"
		ui.standees[i].style.top = LAYOUT_TRACKS[i][view.tracks[i]][1] + "px"
	}
	for (let front_id of Object.keys(view.fronts)) {
		const front_data = view.fronts[front_id]
		ui.fronts[front_id].value.replaceChildren(front_data.status !== null ? front_data.status : front_data.value)
		ui.fronts[front_id].contributions.replaceChildren()
		for (let faction_id of front_data.contributions) {
			ui.fronts[front_id].contributions.appendChild(ui.tokens_on_front[front_id][faction_id])
		}
	}
	ui.medallions_container.replaceChildren()
	for (let i = 0; i < view.medallions.pool.length; ++i) {
		if (view.medallions.pool[i] !== null) {
			const id = view.medallions.pool[i]
			ui.medallions[id].style.left = LAYOUT_MEDALLIONS[i][0] + "px"
			ui.medallions[id].style.top = LAYOUT_MEDALLIONS[i][1] + "px"
			ui.medallions_container.appendChild(ui.medallions[id])
		}
	}
	for (let f of FACTIONS) {
		ui.roles[f].medallions.replaceChildren()
		for (let m of view.medallions[f]) {
			ui.roles[f].medallions.appendChild(ui.medallions[m])
		}
	}
	ui.roles[view.initiative].medallions.appendChild(ui.initiative_token)
	ui.initiative_token.setAttribute("data-year", view.year)
	if (view.played_card === null) {
		ui.turn_info.style.display = "none"
	} else {
		ui.turn_info.style.display = ""
		ui.turn_info_card.setAttribute("data-card-id", view.played_card + "")
	}
	Object.values(ui.glory).forEach((elt) => elt.removeAttribute("data-faction-id"))
	for (let g = 0; g < view.glory.length; ++g) {
		ui.glory[g].setAttribute("data-faction-id", view.glory[g])
	}
	for (let e of action_register)
		e.classList.toggle("action", is_action(e.my_action, e.my_id))
	ui.year.replaceChildren(`Year ${view.year}`)


}