import SkribblAvatar from "./SkribblPlayerIcon.js";


/**
 * Custom element `<skribbl-menu>` for the name selection menu that appears when first entering a game.
 */
export default class SkribblMenu extends HTMLElement {
	constructor(){
		super();
		this.attachShadow({mode:"open"});
		this.shadowRoot.innerHTML = `
			<style>
				:host {
					display: block;
					background: #ffffff;
					border-radius: 10px;
					padding: 15px;
				}
				.arrow-button {
					margin: auto;
					text-align: center;
					display:inline-block;
					border:none;
					height:34px;
					width:34px;
					background: url('/res/selectArrows.gif');
					background-size: 54px;
					background-repeat: no-repeat;
					cursor: pointer;
				}
				.arrow-left{
					background-position: 0px 0px;
				}

				.arrow-right{
					background-position: -24px 0px;
				}

				.middle-aligned{
					margin: auto;
					text-align: center;
					display:inline-block;
				}
				#ColorButtons{
					text-align: center;
				}
				.generic-button{
					padding: 8px 25px;
					font-size: 20px;
					background: orange;
					color: white;
					border: none;
					border-radius: 4px;
					cursor: pointer;
				}

				.name-input{
					padding: 8px 25px;
					font-size: 20px;
				}

			

				.container-left-arrows{
					display:flex;
					flex-direction: column;
				}
				.container-right-arrows{
					display:flex;
					flex-direction: column;
				}
				.container-customize-avatar{
					display:flex;
					justify-content: center;
					position: relative;
				}
				#avatar-container{
					flex: 0 0 auto;
					width:66px;
					height:96px; 
				}

			

			</style>
			<div class="container-customize-avatar">

			<div class="container" id="ColorButtons"> 
			<div class="container-left-arrows">
			<button  id="arrow-left-eyes" class="arrow-button arrow-left"></button>
			<button  id="arrow-left-mouth" class="arrow-button arrow-left"></button>
			</div>
			</div>

			<div id="avatar-container"></div>

			<div class="container" id="ColorButtons"> 
			<div class="container-right-arrows">
			<button id="arrow-right-eyes" class="arrow-button arrow-right"></button>
			<button id="arrow-right-mouth" class="arrow-button arrow-right"></button>
			</div>
			</div>

			


			</div>
			
			<div class="middle-aligned">
			<input type="text" class="name-input" placeholder="Your Name">
			<button id="play-button" class ="generic-button">Play</button>
			</div>


		`;
		this._avatarContainer = this.shadowRoot.getElementById("avatar-container");
		this._avatar = new SkribblAvatar();
		this._avatarContainer.append(this._avatar);

		this._selectEyesLeftButton = this.shadowRoot.querySelector("#arrow-left-eyes");
		this._selectEyesLeftButton.addEventListener("click",e=>{
			this._avatar.changeEye(false);

		});

		this._selectEyesRightButton = this.shadowRoot.querySelector("#arrow-right-eyes");
		this._selectEyesRightButton.addEventListener("click",e=>{
			this._avatar.changeEye(true);
		});

		this._selectMouthLeftButton = this.shadowRoot.querySelector("#arrow-left-mouth");
		this._selectMouthLeftButton.addEventListener("click",e=>{
			this._avatar.changeMouth(false);

		});

		this._selectMouthRightButton = this.shadowRoot.querySelector("#arrow-right-mouth");
		this._selectMouthRightButton.addEventListener("click",e=>{
			this._avatar.changeMouth(true);
		});

		this._nameInput = this.shadowRoot.querySelector("input");
		this._playButton = this.shadowRoot.querySelector("#play-button");
		/** @type {Promise<{name:string}>} */
		this._proceedPromise = new Promise(resolve=>{
			this._playButton.addEventListener("click",e=>{
				resolve({name:this._nameInput.value});
			});
		});
	}

	/**
	 * Waits until the user clicks play, then returns the name and settings he has chosen.
	 */
	async awaitProceed(){
		return await this._proceedPromise;
	}
}
customElements.define("skribbl-menu",SkribblMenu);