class Phone{
	constructor(){
		this.position = 0;
		this.messages = [];
		this.name = document.getElementById("TitlePage");

		this.content = document.getElementById("content");
		this.contentmsg = document.getElementById("chatMessages");
		this.inputDiv = document.getElementById("chatInputDiv");
		this.webview = document.getElementById("webview");

		this.webviewName = "Erreur"

		this.chargeMainPage();
		this.changeWindow(1)
	}

	chargeMainPage() {
		document.getElementById("appli-concord").addEventListener("click", (e) => {
            this.changeWindow(2)
        });
		document.getElementById("appli-gta6").addEventListener("click", (e) => {
            this.webviewName = "GTA 6"
            this.changeWindow("game.html")
        });
		document.getElementById("appli-vbuks").addEventListener("click", (e) => {
            this.webviewName = "Free Vbucks"
            this.changeWindow("assets/phone/webview/vbucks.html")
        });
		document.getElementById("appli-fb").addEventListener("click", (e) => {
            this.webviewName = "FakeBook"
            this.changeWindow("assets/phone/webview/fb.html")
        });
	}

	changeWindow(window) {
		//1 main view phone.changeWindow(
		//2 concorde
		//other webview
		this.content.style.display="none";
		this.contentmsg.style.display="none";
		this.inputDiv.style.display="none";
		this.webview.style.display = "none";
		this.webview.src="";

		switch (window) {
			case 1:
				this.name.innerText = "Pear phone"
				this.content.style.display="block";
				break;
			case 2:
				this.name.innerText = "Concord"
				this.contentmsg.style.display="block";
				this.inputDiv.style.display="block";
				break;
			default:
				this.name.innerText = this.webviewName
				this.webview.style.display = "block";
				this.webview.style.width="100%";
				this.webview.style.height="90%";
				this.webview.style.border="0";
				this.webview.src=window;
				break;
		}
	}

	addMessage(message){
		this.messages.push(message);

		let msg = document.createElement("div");
		msg.className = "message";

		let h2 = document.createElement("h2");
		h2.className = "messageTitle";
		h2.innerText = message.title;

		let p;
		let match = message.content.match(/:(\w+):/);
		if(match){
			p = document.createElement("img");
			p.className = "messageImage";
			p.src = "assets/concord_images/" + match[1] + '.jpg';
		}else{
			p = document.createElement("p");
			p.className = "messageContent";
			p.innerText = message.content;
		}

		msg.appendChild(h2);
		msg.appendChild(p);

		this.contentmsg.appendChild(msg);
		this.contentmsg.scrollTop = this.contentmsg.scrollHeight;
	}

	sendMessage(title, content){
		let message = {
			title: player.name,
			content: content
		}
		this.addMessage(message);
		net.sendMessage(title, content);
	}

	keyPress(input){
		if(event.key=='Enter'){
			if(input.value!=''){
				this.sendMessage(player.name, input.value);
				input.value = '';
				input.blur()
			}		
		}
	}

	changePosition(){
		if(!document.getElementById("phoneContainer").contains(document.activeElement)){
			if(this.position == 0){
				document.getElementById("phoneContainer").className = "visible";
				this.position = 1;
			}else{
				document.getElementById("phoneContainer").className = "hidden";
				this.position = 0;
			}
		}
		
	}
}