import {
	Game,
	TouchSprite,
	RandomInt,
	MyLabel,
	blinkItem,
	stopBlinkItem,
	asyncDelayTime,
	asyncTweenChange,
} from './Game';

import {
	Label,
	jelly,
	showPopParticle,
	tweenChange,
	rotateItem,
	scaleItem,
	delayCall,
	hideItem,
	showItem,
	moveItem,
	shake,
	ShapeRect,
} from './../Unit';

import TWEEN from '@tweenjs/tween.js';

import { defaultData } from './DefaultData';


export class MyGame extends Game {

	images = null;

	data = null;
	status = null;

	initData(data) {
		this.images = data.images;

		this.status = {};

		if (!data.data || Object.is(data.data, {}) || !data.data.tittle) {
			this.data = defaultData;
		} else {
			this.data = data.data;

			const imgUrlList = [];
			const audioUrlList = [];
			this.data.audios.forEach((cube) => {
				audioUrlList.push(cube);
			});
			audioUrlList.push(this.data.wholeAuido);
			audioUrlList.push(this.data.tittle.audio);

			this.preLoadData(imgUrlList, audioUrlList);
		}
	}

	preLoadData(imgUrlList, audioUrlList) {
		imgUrlList.forEach((imgUrl) => {
			this._parent.addUrlToImages(imgUrl);
		});
		audioUrlList.forEach((audioUrl) => {
			this._parent.addUrlToAudioObj(audioUrl);
		});
	}

	initView() {
		// 初始化背景
		this.initBg();

		// 初始化标题
		this.initTittle();

		// 初始化中间部分
		this.initMiddle();

		// 游戏开始
		this.gameStart();
	}

	bg = null;
	initBg() {
		this.removeChild(this.getChildByName('bg'));

		this.getFullScaleXY();

		const bgSized = new TouchSprite();
		bgSized.init(this.images.get('Img_bg'));
		bgSized.anchorX = 0.5;
		bgSized.anchorY = 1;
		bgSized.setPosition(this._parent.canvasWidth / 2, this._parent.canvasHeight);
		bgSized.setScaleXY(this.getFullScaleXY());
		this.addChild(bgSized);

		// 背景
		const bg = new TouchSprite();
		bg.init(this.images.get('Img_bg'))
		bg.setPosition(this._parent.canvasWidth / 2, this._parent.canvasHeight / 2);
		bg.setScaleXY(this._parent.mapScale);
		bg.alpha = 0.5;
		bg.setName('bg');
		this.addChild(bg);

		this.bg = bg;

		const bgRect = new ShapeRect();
		bgRect.setSize(57, 65);
		bgRect.fillColor = '#f8c224';
		const sx = this._parent.canvasWidth / this._parent.canvasBaseW;
		bgRect.setScaleXY(sx);
		bgRect.x = 65 * sx;
		bgRect.alpha = 0;
		this._parent.renderArr.push(bgRect);
		this.bgRect = bgRect;
	}

	bgRect = null;
	getTittleBlockPositionX() {
		return this.bgRect.x + 28.5 * this.bgRect.scaleX;
	}

	initTittle() {
		// 标题字母背景
		const tittleWordBg = new TouchSprite();
		tittleWordBg.init(this.images.get('Img_tittleBg'));
		tittleWordBg.setScaleXY(this._parent.mapScale);
		tittleWordBg.setPosition(this.getTittleBlockPositionX(), 31 * this._parent.mapScale);
		this.addChild(tittleWordBg);

		// 标题字母
		const tittleWord = new MyLabel();
		tittleWord.fontSize = 48;
		tittleWord.fontName = 'BerlinSansFBDemi-Bold';
		tittleWord.fontColor = '#ab5b22';
		tittleWord.text = this.data.tittle.word;
		tittleWord.anchorX = 0.5;
		tittleWord.anchorY = 0.5;
		tittleWord.setPosition(0, 0);

		tittleWordBg.addChild(tittleWord);
		tittleWord.refreshSize();

		// 标题文字
		const questionLabel = new MyLabel();
		questionLabel.fontSize = 36;
		questionLabel.fontName = 'FuturaBT-Bold';
		questionLabel.fontColor = '#000000';
		questionLabel.text = this.data.tittle.text;
		questionLabel.anchorX = 0;
		questionLabel.anchorY = 0.5;
		questionLabel.setPosition(50, 0);

		questionLabel.addTouchBeganListener(() => {
			this.onClickTittle();
		});

		tittleWordBg.addChild(questionLabel);
		questionLabel.refreshSize();
	}

	initMiddle() {
		// 创建背景
		this.createMiddlebg();
		// 创建单词
		this.createWords();
		// 创建右下角的喇叭
		this.createSpeaker();
		// 创建窗口
		this.createWindow();
	}

	createMiddlebg() {
		// 背景
		const bookBg = new TouchSprite();
		bookBg.init(this.images.get(this.typeDiff('Img_whole_bg_type_A', 'Img_whole_bg_type_B')));
		bookBg.setName('bookBg');
		this.bg.addChild(bookBg);
	}

	createWords() {
		const leftPosX = this.typeDiff(-500, -480);
		const rightPosX = this.typeDiff(100, 90);

		const topPosY = -170;
		const middlePosY = 0;
		const bottomPosY = this.typeDiff(165, 170);

		const positionList = [
			[leftPosX, topPosY],
			[leftPosX, middlePosY],
			[leftPosX, bottomPosY],
			[rightPosX, topPosY],
			[rightPosX, middlePosY],
			[rightPosX, bottomPosY],
		];
		this.data.words.forEach((word, idx) => {
			const questionLabel = new MyLabel();
			questionLabel.fontSize = this.typeDiff(48, 54);
			questionLabel.fontName = this.typeDiff('CenturyGothic', 'BerlinSansFBDemi-Bold');
			questionLabel.fontColor = '#000000';
			questionLabel.text = word;
			questionLabel.anchorX = 0;
			questionLabel.anchorY = 0.5;
			questionLabel.setPosition(...positionList[idx]);
			questionLabel.setName('label_' + idx);

			questionLabel.setMaxSize(this.typeDiff(400, 450));

			questionLabel.addTouchBeganListener(() => {
				this.onClickWords(idx);
			});

			this.bg.addChild(questionLabel);
			questionLabel.refreshSize();
		});
	}

	createSpeaker() {
		const bookBg = this.bg.getChildByName('bookBg');
		const speaker = new TouchSprite();
		speaker.init(this.images.get('Btn_play'));
		speaker.setPositionX(this.typeDiff(bookBg.width / 2, bookBg.width / 2 * 0.92));
		speaker.setPositionY(this.typeDiff(bookBg.height / 2, bookBg.height / 2 * 1.15));
		speaker.addTouchBeganListener(() => this.onClickSpeaker(speaker));
		speaker.setName('speaker');
		this.bg.addChild(speaker);
		const speakerPause = new TouchSprite();
		speakerPause.init(this.images.get('Btn_pause'));
		speakerPause.setPositionX(this.typeDiff(bookBg.width / 2, bookBg.width / 2 * 0.92));
		speakerPause.setPositionY(this.typeDiff(bookBg.height / 2, bookBg.height / 2 * 1.15));
		speakerPause.addTouchBeganListener(() => this.onClickSpeakerPause(speakerPause));
		speakerPause.alpha = 0;
		speakerPause.setName('speakerPause');
		this.bg.addChild(speakerPause);
	}

	createWindow() {
		const mask = new TouchSprite();
		mask.init(this.images.get('Img_mask'));
		mask.setName('mask');
		mask.setScaleXY(this.getFullScaleXY() / this._parent.mapScale);
		mask.alpha = 0;
		mask.addTouchBeganListener(() => { });
		this.bg.addChild(mask);

		const winBg = new TouchSprite();
		winBg.init(this.images.get(this.typeDiff('Img_winBg_type_A', 'Img_winBg_type_B')));
		winBg.setName('winBg');
		winBg.alpha = 0;
		this.bg.addChild(winBg);

		const btnClose = new TouchSprite();
		btnClose.init(this.images.get('Btn_close'));
		btnClose.setPositionX(winBg.width / 2 * 0.93);
		btnClose.setPositionY(-winBg.height / 2 * 0.9);
		btnClose.addTouchBeganListener(() => this.onClickCloseBtn(btnClose));
		btnClose.setName('btnClose');
		btnClose.alpha = 0;
		this.bg.addChild(btnClose);

		const wordLabel = new MyLabel();
		wordLabel.fontSize = this.typeDiff(96, 96);
		wordLabel.fontName = this.typeDiff('CenturyGothic-Bold', 'CenturyGothic-Bold');
		wordLabel.fontColor = this.typeDiff('#ab5b22', '#c7000b');
		wordLabel.anchorX = 0.5;
		wordLabel.anchorY = 0.5;
		wordLabel.text = 'testw  testw  testw';
		wordLabel.setPosition(0, 0);
		wordLabel.refreshSize();
		wordLabel.setName('wordLabel');
		wordLabel.addTouchBeganListener(() => this.onClickWinWords());
		wordLabel.alpha = 0;
		winBg.addChild(wordLabel);
	}

	typeDiff(a, b) {
		if (this.data.showType === 'A') {
			return a;
		} else {
			return b;
		}
	}

	onClickWords(idx) {
		const label = this.bg.getChildByName('label_' + idx);
		this.playAudio('audio_new_window', true);
		this.showWindow(this.data.words[idx], this.data.audios[idx], label);
	}

	hideWindow() {
		const mask = this.bg.getChildByName('mask');
		const winBg = this.bg.getChildByName('winBg');
		const btnClose = this.bg.getChildByName('btnClose');
		const wordLabel = winBg.getChildByName('wordLabel');

		tweenChange(mask, { alpha: 0 }, 0.5);
		tweenChange(winBg, { alpha: 0 }, 0.5);
		tweenChange(btnClose, { alpha: 0 }, 0.5);
		tweenChange(wordLabel, { alpha: 0 }, 0.5);
	}

	async showWindow(word, audio, pos = { x: 0, y: 0 }) {
		const mask = this.bg.getChildByName('mask');
		const winBg = this.bg.getChildByName('winBg');
		const btnClose = this.bg.getChildByName('btnClose');
		const wordLabel = winBg.getChildByName('wordLabel');

		wordLabel.setScaleXY(1);
		wordLabel.text = word;
		wordLabel.setMaxSize(1000);
		wordLabel.refreshSize();
		wordLabel.set('audio', audio);
		wordLabel.alpha = 1;

		winBg.alpha = 1;
		winBg.setPosition(pos.x, pos.y);
		winBg.scaleX = 0.0;
		winBg.scaleY = 0.0;


		await Promise.all([
			asyncTweenChange(mask, { alpha: 1 }, 0.3),
			asyncTweenChange(winBg, { x: 0, y: 0, scaleX: 1, scaleY: 1 }, 0.3)
		]);

		await asyncTweenChange(btnClose, { alpha: 1 }, 0.2);
	}

	onClickWinWords() {
		const wordLabel = this.bg.seekChildByName('wordLabel');
		this.playAudio(wordLabel.get('audio'));
	}

	onClickSpeaker(speaker) {
		const speakerPause = this.bg.seekChildByName('speakerPause');

		const audio = this.getAudioObj(this.data.wholeAuido);
		audio.onended = () => this.showSpeaker(speaker, speakerPause);
		audio.play();

		this.showPauser(speaker, speakerPause);

		jelly(speaker);
		jelly(speakerPause);
	}

	onClickSpeakerPause(speakerPause) {
		const speaker = this.bg.seekChildByName('speaker');

		const audio = this.getAudioObj(this.data.wholeAuido);
		audio.pause();

		this.showSpeaker(speaker, speakerPause);

		jelly(speaker);
		jelly(speakerPause);
	}

	showSpeaker(speaker, speakerPause) {
		tweenChange(speaker, { alpha: 1 }, 0.3);
		tweenChange(speakerPause, { alpha: 0 }, 0.3);
	}
	showPauser(speaker, speakerPause) {
		tweenChange(speaker, { alpha: 0 }, 0.3);
		tweenChange(speakerPause, { alpha: 1 }, 0.3);
	}

	onClickCloseBtn(btn) {
		jelly(btn);
		this.playAudio('audio_close_widow');
		this.hideWindow();
	}

	printCurrentStatus() {
		console.log(JSON.stringify(this.status));
	}

	onClickTittle() {
		this.playAudio(this.data.tittle.audio);
	}

	gameStart() {
		this.playIncomeAudio();
	}

	playIncomeAudio() {
		this.playAudio('audio_new_page');
	}
}
