import { onHomeworkFinish, showFireworks,FireworkSettings,playAudio } from "../script/util";
import { defaultData } from "../script/defaultData";

cc.Class({

	extends: cc.Component,

	properties: {
	},

	// 生命周期 onLoad
	onLoad() {
		this.initSceneData();
		this.initSize();
	},

	_imageResList: null,
	_audioResList: null,
	_animaResList: null,
	initSceneData() {
		this._imageResList = [];
		this._audioResList = [];
		this._animaResList = [];
	},

	_designSize: null,  // 设计分辨率
	_frameSize: null,  // 屏幕分辨率
	_mapScaleMin: null,  // 场景中常用缩放（取大值）
	_mapScaleMax: null,  // 场景中常用缩放（取小值）
	_cocosScale: null,  // cocos 自缩放 （较少用到）
	initSize() {
		// 注意cc.winSize只有在适配后(修改fitHeight/fitWidth后)才能获取到正确的值,因此使用cc.getFrameSize()来获取初始的屏幕大小
		let screen_size = cc.view.getFrameSize().width / cc.view.getFrameSize().height
		let design_size = cc.Canvas.instance.designResolution.width / cc.Canvas.instance.designResolution.height
		let f = screen_size >= design_size
		cc.Canvas.instance.fitHeight = f
		cc.Canvas.instance.fitWidth = !f

		const frameSize = cc.view.getFrameSize();
		this._frameSize = frameSize;

		this._designSize = cc.view.getDesignResolutionSize();

		let sx = cc.winSize.width / frameSize.width;
		let sy = cc.winSize.height / frameSize.height;
		this._cocosScale = Math.min(sx, sy);

		sx = frameSize.width / this._designSize.width;
		sy = frameSize.height / this._designSize.height;
		this._mapScaleMin = Math.min(sx, sy) * this._cocosScale;
		this._mapScaleMax = Math.max(sx, sy) * this._cocosScale;
	},


	// 生命周期 start
	start() {
		let getData = this.getData.bind(this);
		if (window && window.courseware) {
			getData = window.courseware.getData;
		}

		getData((data) => {
			console.log('data:', data);
			this.data = data || this.getDefaultData();
			//this.data = this.getDefaultData();
			//this.data = JSON.parse(JSON.stringify(this.data));
			this.preData();
			this.preloadItem()
		})
	},

	preData(){
		let res = JSON.parse(JSON.stringify(this.data));
		let data = [];
		for(let i = 0; i < res.stars.length; i++){
			data[i] = [];
			let pages = this.getArrayByID(res.pages, res.stars[i].id, 'star_id');
			for(let j = 0; j < pages.length; j++){
				data[i][j] = [];
				let kinds = this.getArrayByID(res.kinds, pages[j].id, 'page_id');
				for(let k = 0; k < kinds.length; k++){
					let _kind = {};
					data[i][j][k] = _kind;
					let k_item = kinds[k];
					_kind.text = "";
					_kind.pic = "";
					_kind.audio = "";
					if (k_item.is_disturb != true){
						if (k_item.kind_type == "0"){
							_kind.text = k_item.word||"";
						}
						else if (k_item.kind_type == "1"){
							_kind.pic = k_item.pic_url||"";
						}
						
						_kind.audio = k_item.audio_url||"";
					}

					_kind.options = [];
					let options = k_item.options;
					for(let m = 0; m < options.length; m++){
						let _option = {};
						_kind.options[m] = _option;
						_option.text = options[m].is_text == false?"":options[m].word||"";
						_option.pic = options[m].is_text == false?options[m].pic_url||"":"";
						_option.audio = options[m].audio_url||"";
					}
				}
			}
		}

		this.data = {};
		this.data.stars = data;
		console.log(data);
		
	},

	getArrayByID(ar, id, t){
		let ret = [];
		for(let i = 0; i < ar.length; i++){
			if (ar[i][t] == id)
				ret.push(ar[i]);
		}
		return ret;
	},

	getIndexInArray(ar, id){
		for(let i = 0; i < ar.length; i++){
		if (ar[i].id == id){
			return i;
		}
		}
		return -1;
	},
	getData(func) {
		if (window && window.courseware) {
			window.courseware.getData(func, 'scene');
			return;
		}

		const middleLayer = cc.find('middleLayer');
		if (middleLayer) {
			const middleLayerComponent = middleLayer.getComponent('middleLayer');
			middleLayerComponent.getData(func);
			return;
		}

		func(this.getDefaultData());
	},

	getDefaultData() {
		return defaultData;
	},

	preloadItem() {
		this.addPreloadImage();
		this.addPreloadAudio();
		this.addPreloadAnima();
		this.preload();
	},


	addPreloadImage() {

		// this._imageResList.push({ url: this.data.pic_url });
		// this._imageResList.push({ url: this.data.pic_url_2 });
	},

	addPreloadAudio() {

		// this._audioResList.push({ url: this.data.audio_url });
	},

	addPreloadAnima() {

	},

	preload() {

		const preloadArr = this._imageResList.concat(this._audioResList).concat(this._animaResList);
		cc.assetManager.loadAny(preloadArr, null, null, (err, data) => {

			this.loadEnd();
			if (window && window["air"]) {
				window["air"].hideAirClassLoading();
			}

			cc.debug.setDisplayStats(false);
		});
	},


	loadEnd() {
		this.initView();
		this.initButton();
		this.resetData();
	},

	initView() {

		let stars = this.data.stars;
		for(let i = 0; i < stars.length; i++){
			this.addStar();
		}

		this._speed = Math.max(2,2/1280*this._frameSize.width);

		
		this._test = cc.find('Canvas/test');
		this._move_area = cc.find('Canvas/move_area');
		this._kind_group = cc.find('Canvas/fg/kind').getComponent(cc.js.getClassByName('KindGroup'));

		this._move_area.height = this._frameSize.height - 260;

		let offy = 216/2;
		this._ys = [-offy, offy];

		// let option_node = cc.find('res/option');
		// let option = option_node.getComponent(cc.js.getClassByName('WordOption'));

		this._fg_height = 180;

		this._test.on('click', ()=>{

		});

		cc.find('Canvas/add').on('click', ()=>{
			if (this._btn_start.active == true || this._btn_restart.active == true)
				return;
			this.pageFinish();
		});

		cc.find('Canvas/show').on('click', ()=>{
			let item = cc.instantiate(this._kind_group.template_node);
			this._kind_group.node.addChild(item);
			item.y = 80;
			this._kind_group.updateView();
		});



		let selected_node = cc.find('selected');
		let selected = selected_node.getComponent(cc.js.getClassByName('WordOption'));

		this.node.on(cc.Node.EventType.TOUCH_START, (event)=>{
			//console.log(event);
			if (this._touched == true)
				return;
				

			let area = this._move_area;
			for(let i = 0; i < area.childrenCount; i++){
				let option_node = area.children[i];
				let option = option_node.getComponent(cc.js.getClassByName('WordOption'));
				if (this._touched != true && option_node.active == true && cc.rect(option_node.getBoundingBoxToWorld()).contains(event.touch._point)){
					this.playAudioByName('tap');
					// cc.tween(this)
					// 	.delay(0.2)
					// 	.call(()=>{
							option.playAudio();
						// })
						// .start();
					//this._moved = false;
					this._touched = true;
					selected.copyValues(option);
					selected.selected(true);
					selected.selectedSize();
					selected.target = option_node;
					selected.cx = selected.node.x;
					selected.cy = selected.node.y;
					selected.node.position = option_node.parent.convertToWorldSpaceAR(option_node.position);
					selected.offx = selected.node.x - event.touch._point.x;
					selected.offy = selected.node.y - event.touch._point.y;
					option_node.active = false;
					return;
				}
			}

			
		}, this);

        this.node.on(cc.Node.EventType.TOUCH_MOVE, (event)=>{
			if (!this._touched)
				return;
			selected.node.x = event.touch._point.x + selected.offx;
			selected.node.y = event.touch._point.y + selected.offy;

		}, this);

		this.node.on(cc.Node.EventType.TOUCH_CANCEL, (event)=>{
			if (!this._touched)
				return;
			//this._moved = true;
			this._touched = false;
			selected.target.active = true;
			selected.node.x = selected.cx;
			selected.node.y = selected.cy;
		}, this);


        this.node.on(cc.Node.EventType.TOUCH_END, (event)=>{
			if (!this._touched)
				return;

			let item, area, len = this._kind_group.node.childrenCount;
			let i = 0;
			for(i = 0; i < len; i++){
				item = this._kind_group.node.children[i];
				area = item.getChildByName('layout_area');
				let rect = area.getBoundingBoxToWorld();
				rect.width -= 20;
				rect.x += 10;
				
				if (cc.rect(rect).intersects(cc.rect(selected.node.getBoundingBoxToWorld()))){
					// console.log(i);
					// console.log(item.getBoundingBoxToWorld());
					let kind = item.getComponent(cc.js.getClassByName('WordKind'));
					if (kind.kind_id != selected.kind_id){
						//this.playAudioByName('incorrect');
						//break;
						continue;
					}
					this.playAudioByName('correct');
					let node = cc.instantiate(cc.find('res/option_item'));
					let ot = node.getComponent(cc.js.getClassByName('WordOption'));
					ot.copyValues(selected);
					ot.selected(true);
					kind.showCorrect(node, ()=>{
						if (this.tryFinish())
							this.pageFinish();
					});
					// cc.tween(this)
					// .delay(0.2)
					// .call(()=>{
						ot.playAudio();
					// })
					// .start();

					//this._xs[i%2] += selected.target._w;
					selected.target.active = false;
					//selected.target.removeFromParent();

					selected.target = null;

					break;
				}
			}
			if (i == len){
				this.playAudioByName('incorrect');
			}
			this._moved = true;
			this._touched = false;
			if (selected.target){
				selected.target.active = true;
				selected.target = null;
			}
			selected.node.x = selected.cx;
			selected.node.y = selected.cy;
		}, this);

	},

	initButton(){
		this._btn_start = cc.find('Canvas/btn_start');
		this._btn_start.on('click', ()=>{
			this.playAudioByName('button');
			this._btn_start.active = false;
			this.updateData();
			this.upForeground(()=>{
				this._moved = true;
			});
		});
		this._btn_start.active = true;

		this._btn_restart = cc.find('Canvas/btn_restart');
		this._btn_restart.on('click', ()=>{
			this.playAudioByName('button');
			this._btn_restart.active = false;
			// this.downForeground(()=>{
			// 	this._btn_start.active = true;
			// 	this.resetData();
			// });
			this.resetData();
			this._btn_start.active = false;
			this.updateData();
			this.upForeground(()=>{
				this._moved = true;
			});
		});
	},

	upForeground(cb){
		let fg = cc.find('Canvas/fg');
		let fg_top = cc.find('Canvas/fg_top').y;
		//fg_top -= 100;
		// let fg_bottom = fg_top - fgh;
		// console.log('bottom = ' + fg_bottom);
		
		//fg.y = fg_bottom;
		this.playAudioByName('up');
		cc.tween(fg)
			.to(0.3, {y :fg.y + this._fg_height})
			.call(()=>{
				this._moved = true;
				cb && cb();
			})
			.start();
	},

	downForeground(cb){
		let fg = cc.find('Canvas/fg');
		//let fg_top = cc.find('Canvas/fg_top').y;
		//fg_top -= 100;
		//let fg_bottom = fg_top - fgh;
		//fg.y = fg_top;
		cc.tween(fg)
			.to(0.3, {y :fg.y-this._fg_height})
			.call(()=>{
				cb && cb();
			})
			.start();
	},

	completeAnimation(){
		let base = cc.find('Canvas/firework');
		let items = cc.find('RibbonNodeBase').children;
		
		showFireworks(new FireworkSettings(
			base,
			items,
			cc.v2(0, -400), cc.v2(0, 1000), 200, 200
		));
		showFireworks(new FireworkSettings(
			base,
			items,
			cc.v2(-600, -400), cc.v2(200, 1000), 200, 200
		));
		showFireworks(new FireworkSettings(
			base,
			items,
			cc.v2(600, -400), cc.v2(-200, 1000), 200, 200
		));
	},

    length,
    addStar() {
        if (!this.length) {
            this.length = 0;
        }
        this.length++;
        let length = this.length;

        const starLayout = cc.find('Canvas/layout');
        starLayout.removeAllChildren();
        const paddingY = starLayout.getComponent(cc.Layout).spacingY;

        for (let i = 0; i < length; i++) {
            const starBase = cc.instantiate(cc.find('StarBase'));
            starBase.name = `starBase_${i}`;
            starBase.scale = this.Between(0.5, (starLayout.height / length - paddingY) / starBase.height, 1);
            starBase.parent = starLayout;
        }
        this.currentStarIdx = 0;
	},
	
    currentStarIdx: null,
    showStar(cb) {
        if (!this.currentStarIdx) {
            this.currentStarIdx = 0;
        }

        const starBase = cc.find(`Canvas/layout/starBase_${this.currentStarIdx}`);
        if (!starBase) {
            return;
        }
        const star = starBase.getChildByName('Star');
        const starBig = star.getChildByName('StarBig');
        starBig.scale = 1;
        star.active = true;
        star.scaleX = 0.7 / starBase.scale;
        star.scaleY = 1 / starBase.scale;
        star.angle = 90;
        const canvas = cc.find('Canvas');
        const startPos = this.exchangeNodePos(star.parent, canvas, cc.v2(0, -canvas.height / 2));
        const middlePos = this.exchangeNodePos(star.parent, canvas, cc.v2(0, -canvas.height / 4));
        star.x = startPos.x;
        star.y = startPos.y - starBig.height;

        console.log('middlePos = ' + JSON.stringify(middlePos));
        const time = 1;
        cc.tween(star)
            .to(0.3, { y: middlePos.y + 80 }, { easing: 'quadOut' })
            .to(0.1, { y: middlePos.y + 40, scaleX: 1.2 / starBase.scale, scaleY: 0.8 / starBase.scale }, { easing: 'quadOut' })
            .to(0.1, { y: middlePos.y, scaleX: 1 / starBase.scale, scaleY: 1 / starBase.scale }, { easing: 'quadOut' })
            .delay(0.1)
            .to(0.8, { angle: -720, scale: 1 })
            .start();

        cc.tween(star)
            .delay(0.6)
            .to(0.8, { x: 0 }, { easing: 'quadIn' })
            .start();
        cc.tween(star)
            .delay(0.6)
            .to(0.8, { y: 0 }, { easing: 'quadOut' })
            .start();

        cc.tween(starBig)
            .delay(0.6)
            .to(0.8, { scale: 0 }, { easing: 'quadOut' })
            .call(() => {
                cb && cb();
            })
            .start();

        this.currentStarIdx++;
    },

    Between(a, b, c) {
        return [a, b, c].sort()[1];
    },

    exchangeNodePos(targetNode, baseNode, basePos) {
        return targetNode.convertToNodeSpaceAR(baseNode.convertToWorldSpaceAR(cc.v2(basePos.x, basePos.y)));
    },






















	// ------------------------------------------------

	playAudioByUrl(audio_url, cb = null) {
		if (audio_url) {
			cc.assetManager.loadRemote(audio_url, (err, audioClip) => {
				const audioId = cc.audioEngine.play(audioClip, false, 0.8);
				if (cb) {
					cc.audioEngine.setFinishCallback(audioId, () => {
						cb();
					});
				}
			});
		}
	},

	playAudioByName(audioName) {
		return new Promise((resolve, reject) => {
			try {
				const audioNode = cc.find('res/audio/'+audioName);
				const audioClip = audioNode.getComponent(cc.AudioSource).clip;
				playAudio(audioClip, resolve);
			} catch (e) {
				reject(e);
			}
		});
	},
	// ------------------------------------------

	resetData(){
		let stars = this.data.stars;
		this._star_idx = 0;
		
		let pages = stars[this._star_idx];
		this._page_max = pages.length;
		
		this._page_idx = 0;

		this.currentStarIdx = 0;
		
		let i=0, starBase, star;
		do {
			starBase = cc.find(`Canvas/layout/starBase_${i}`);
        	if (!starBase)
				break;
			star = starBase.getChildByName('Star');
			star.active = false;
			i++;
		} while (1);

		this._btn_start.active = true;
		this._kind_group.node.removeAllChildren();
		this._move_area.removeAllChildren();
	},

	updateData(){
		let pages = this.data.stars[this._star_idx];
		let groups = pages[this._page_idx];

		let kinds = [];
		let options = [];

		let ki, oi;
		for(let i = 0; i < groups.length; i++){
			ki = groups[i];
			let kidx = -1;
			if (ki.text != "" || ki.pic != "" || ki.audio != "" ){
				kidx = i;
				kinds.push({text:ki.text, pic:ki.pic, audio:ki.audio, kind:kidx});
			}
			for(let j = 0; j < ki.options.length; j++){
				oi = ki.options[j];
				options.push({text:oi.text, pic:oi.pic, audio:oi.audio, kind:kidx});
			}
		}

		this._kinds = kinds;
		this._options = options;
		this.updateView();
	},

	updateView(){
		let knode = cc.find('Canvas/fg/kind');
		knode.getComponent(cc.js.getClassByName('KindGroup')).init(this._kinds);
		
		let os = this._options;
		let onode = this._move_area;
		onode.removeAllChildren();

		let ot = cc.find('res/option_item');
		let item, op;
		this._xs = [0, 0];
		for(let i = 0; i < os.length; i++){
			item = cc.instantiate(ot);
			onode.addChild(item);
			op = item.getComponent(cc.js.getClassByName('WordOption'));
			op.init(os[i]);
			this._xs[i%2] -= (i < 2 ? item._w/2 : item._w);
			item.x = this._xs[i%2];
			item.y  = this._ys[i%2];
			op.adjustPicSize();
		}
		
	},

	pageFinish(){
		this._moved = false;
		this._page_idx ++;
		this.downForeground(()=>{
			if (this._page_idx >= this._page_max){
				this.playAudioByName('star');
				this.playAudioByName('complete');
				this.showStar(()=>{
					this._star_idx ++;
					if (this._star_idx >= this.data.stars.length){
						this.completeTest();
						return;
					}
					this._page_max = this.data.stars[this._star_idx].length;
					this._page_idx = 0;
					this.upForeground(()=>{
						this.updateData();
					});
				});
			}
			else{
				this.upForeground(()=>{
					this.updateData();
				});
			}
		});
	},

	completeTest(){
		this.completeAnimation();
		this.playAudioByName('sahua');
		this.playAudioByName('button');
		this.playAudioByName('up');
		this._btn_restart.active = true;
		this._moved = false;
		//this.resetData();
	},

	tryFinish(){
		let item, op, len = this._move_area.childrenCount;
		for(let i = 0; i < len; i++){
			item = this._move_area.children[i];
			if (item.active == false)
				continue;
			op = item.getComponent(cc.js.getClassByName('WordOption'));
			if (op.kind_id >= 0){
				return false;
			}
		}
		return true;
	},

	update (dt) {
		if (!this._moved)
			return;

		let speed = this._speed;
		let area = this._move_area;
		// this._xs[0] += speed;
		// this._xs[1] += speed;
		let item, len = area.childrenCount;
		for(let i = 0; i < len; i++){
			item = area.children[i];
			item.x += speed;
			if (item.x - item._w/2 + item._xoff> area.width){
				//this._xs[i%2] -= item._w;
				//item.x = Math.min(-item._w/2, this._xs[i%2]);
				//item.x = -item._w/2;
				item.x = Math.min(-item._w/2, this.getLastX(i));
			}
		}
	},

	getLastX(idx){
		let row = idx%2;
		let area = this._move_area;
		let obj = area.children[idx];
		let mx = obj.x, mi = -1;
		let item, len = area.childrenCount;
		for(let i = row; i < len; i+=(row+1)){
			item = area.children[i];
			if (mx > item.x){
				mx = item.x;
				mi = i;
			}
		}

		let ret = 0;
		if (mi >= 0){
			ret =  mx - obj._w/2 - area.children[mi]._w/2;
		}
		
		console.log(ret);
		
		
		return ret;

	}

});
