import Component from '../rivets/Component.js'
import { PLAYER, COLORS } from './grid/grid.component.js'
import { wait } from '../rivets/helpers.js'

// The scoreboard for the Connect-4 games
export default class Scoreboard extends Component {
	static selector() { return 'app-scoreboard' }
	static template() { return `
		<div class="scoreboard-container">
			<div class="player" rv-background="player_one_bkg">
				<p class="score">{ player_one }</p>
				<p class="name">Player One</p>
			</div>
			<div class="player" rv-background="player_two_bkg">
				<p class="score">{ player_two }</p>
				<p class="name">Player Two</p>
			</div>
			<div class="buttons">
				<button rv-on-click="bind.on_board_reset_click">Reset Board</button>
				<button rv-on-click="bind.on_score_reset_click">Reset Score</button>
			</div>
		</div>
	` }

	// The players' scores
	player_one = 0
	player_two = 0

	// The players' background colors
	player_one_bkg = COLORS.dark
	player_two_bkg = COLORS.dark

	constructor(el, data) {
		super(el, data)

		this.app = data.parentApp
		this.app.register_scoreboard(this)
	}

	// Increment the specified player's score, animating the background for a few seconds
	async increment(player) {
		if ( player === PLAYER.one ) {
			this.player_one_bkg = COLORS.victory
			this.player_one += 1
			await wait(3000)
			this.player_one_bkg = COLORS.dark
		} else if ( player === PLAYER.two ) {
			this.player_two_bkg = COLORS.victory
			this.player_two += 1
			await wait(3000)
			this.player_two_bkg = COLORS.dark
		}
	}

	// Reset the score
	reset() {
		this.player_one = 0
		this.player_two = 0
	}

	// Called when the "Reset Board" button is clicked
	on_board_reset_click() {
		this.app.grid.reset()
	}

	// Called when the "Reset Score" button is clicked
	on_score_reset_click() {
		this.app.grid.reset()
		this.reset()
	}
}