
import ScillaComponent from "scilla-components/src/base/ScillaComponent";
import { createTexture, EngineConfig, Entity, Texture, dynamic } from "scilla/src";
import { alien } from "../navigator/StackNavigator";
import { INavigatorViewBase } from "../navigator/VirtualNavigator";
import { TextureRenderer } from "scilla-components/src";
import { setScale, setText } from "../transformUtils";

export default class SceneResult extends ScillaComponent implements INavigatorViewBase {
	onAwake() {
		super.onAwake();
		// console.log(this.rankInfo);
		this.onResponse(this.rankInfo);
	}

	rankInfo: dynamic;
	onResponse(data) {
		//设置我的信息
		setText(this.myname, data.nickName);
		if (data.rank > 500)
			setText(this.myrank, '未上榜');
		else
			setText(this.myrank, data.rank + '');
		setText(this.myscore, data.score);
		this.loadAvatar(this.myavatar, data.avatar, 78);

		//设置前三名的信息
		const [rankinfo1, rankinfo2, rankinfo3] = data.list;
		// console.log(rankinfo1, rankinfo2, rankinfo3, last);
		if (rankinfo1) {
			this.loadAvatar(this.avatar1, rankinfo1.avatar, 78);
			setText(this.name1, rankinfo1.nickName);
			setText(this.score1, rankinfo1.score);
		}
		if (rankinfo2) {
			this.loadAvatar(this.avatar2, rankinfo2.avatar, 64);
			setText(this.name2, rankinfo2.nickName);
			setText(this.score2, rankinfo2.score);
		}
		if (rankinfo3) {
			this.loadAvatar(this.avatar3, rankinfo3.avatar, 64);
			setText(this.name3, rankinfo3.nickName);
			setText(this.score3, rankinfo3.score);
		}
	}

	onTapCloseButton() {
		this.bubbling('fuck', 'start');
	}

	onDidEnter(last: string, action: alien.NavigatorAction, parameters: any): void {
		this.entity.enabled = true;
	}

	onDidLeave(next: string, action: alien.NavigatorAction, parameters: any): void {
		this.entity.enabled = false;
	}

	async onWillEnter(last: string, action: alien.NavigatorAction, parameters: any) {
	}

	async onWillLeave(next: string, action: alien.NavigatorAction, parameters: any) {
	}

	onWillMount(last: string, action: alien.NavigatorAction, parameters: any): Promise<any> {
		return undefined;
	}

	onWillUnMount(next: string, action: alien.NavigatorAction, parameters: any): Promise<any> {
		return undefined;
	}

	async loadAvatar(avatar: Entity, url: string, width: number) {
		const texRender = avatar.getComponent(TextureRenderer);
		const texture = await this.loadTexture(url);
		texRender.texture = texture;

		setScale(avatar, width / texture.bounds.width);
	}

	private loadImage = (url: string): Promise<HTMLImageElement> => {
		return new Promise<HTMLImageElement>((resolve, reject) => {
			let img = new Image();
			if (EngineConfig.imgCrossOrigin) {
				img.setAttribute('crossOrigin', 'anonymous');
			}
			img.onload = function (e) {
				resolve(img);
			};
			img.onerror = function (e) {
				reject(e);
			};
			img.src = url;
		});
	}

	private loadTexture = async (url: string): Promise<Texture> => {
		const img = await this.loadImage(url);
		const texture = createTexture(img);
		return texture;
	}

	avatar1: Entity;
	myavatar: Entity;
	avatar2: Entity;
	avatar3: Entity;
	name2: Entity;
	name1: Entity;
	name3: Entity;
	myname: Entity;
	myscore: Entity;
	score2: Entity;
	score1: Entity;
	score3: Entity;
	myrank: Entity;
}
