// Learn cc.Class:
//  - https://docs.cocos.com/creator/manual/en/scripting/class.html
// Learn Attribute:
//  - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html

import {loadImage, setSprNodeMaxLen} from "../script/util";

cc.Class({
	extends: cc.Component,

	properties: {},

	// LIFE-CYCLE CALLBACKS:

	_canTouch: null,
	_isTop: null,
	_arrowUp: null,
	_arrowDown: null,
	_pageIndex: null,
	_maxPage: null,
	_lineMaxCount: null,
	_disW: null,
	onLoad() {
		this._canTouch = true;
		this._isTop = false;

		this._arrowUp = this.node.getChildByName('arrowUp');
		this._arrowDown = this.node.getChildByName('arrowDown');

		this.node.zIndex = 10;
		this._itemLen = 75;
		this._pageIndex = 0;
		this._maxPage = 0;

		this._disW = 5;
		const maxW = 1280 - 90;
		this._lineMaxCount = Math.floor(maxW / (this._disW + this._itemLen));

	},

	start() {

		this._initListener();
		this._initItemLayer();
	},

	_itemLayer: null,
	_initItemLayer() {
		this._itemLayer = new cc.Node();
		this.node.addChild(this._itemLayer);
	},

	_initListener() {

		this._initTopBtnListener();
		this._initPageBtnListener();
	},

	_initTopBtnListener() {
		const btn = this.node.getChildByName('btn');
		btn.on('click', () => {
			if (!this._canTouch) {
				return;
			}

			this._canTouch = false;

			const moveLen = 80 * this.node.scaleY;
			const time = 0.5;

			let targetY = moveLen;
			if (this._isTop) {
				targetY = -moveLen;
			}
			cc.tween(this.node)
				.by(time, {y: targetY})
				.call(() => {
					this._canTouch = true;
				})
				.start()

			this._setTopBtnState(time);
			this._isTop = !this._isTop;

		});
	},

	_pageUpBtn: null,
	_pageDownBtn: null,
	_initPageBtnListener() {
		const pageUp = this.node.getChildByName('pageUp');
		pageUp.on('click', () => {
			if (!this._canTouch) {
				return;
			}

			if (this._pageIndex <= 0) {
				return;
			}
			this._pageIndex--;
			this._refreshPage();
			this._showBtnAnima(pageUp);
		});
		this._pageUpBtn = pageUp;


		const pageDown = this.node.getChildByName('pageDown');
		pageDown.on('click', () => {
			if (!this._canTouch) {
				return;
			}

			if (this._pageIndex >= this._maxPage) {
				return;
			}
			this._pageIndex++;
			this._refreshPage();
			this._showBtnAnima(pageDown);
		});
		this._pageDownBtn = pageDown;

	},

	_showBtnAnima(btn) {
		cc.tween(btn)
			.to(0.08, {scale: 1.3}, {easing: 'sineOut'})
			.to(0.08, {scale: 1}, {easing: 'sineOut'})
			.start();
	},

	_setPageBtnState() {
		if (this._maxPage == 0) {
			this._pageUpBtn.active = this._pageDownBtn.active = false;
			return;
		}

		if (this._pageIndex == 0) {
			this._pageUpBtn.opacity = 100;
		} else {
			this._pageUpBtn.opacity = 255;
		}

		if (this._pageIndex == this._maxPage) {
			this._pageDownBtn.opacity = 100;
		} else {
			this._pageDownBtn.opacity = 255;
		}
	},

	_setTopBtnState(time) {

		let arrow1, arrow2;
		if (this._isTop) {
			arrow1 = this._arrowDown;
			arrow2 = this._arrowUp;
		} else {
			arrow1 = this._arrowUp;
			arrow2 = this._arrowDown;
		}

		arrow1.scale = 1;
		arrow2.scale = 0;

		cc.tween(arrow1)
			.to(time / 2, { scale: 0 }, {easing: 'cubicOut'})
			.start()

		cc.tween(arrow2)
			.delay(time / 2)
			.to(time / 2, {scale: 1}, {easing: 'cubicOut'})
			.start();


	},


	_dataArr: null,
	setItemData(dataArr) {

		console.log(' in setItemData', dataArr);

		if (!dataArr || dataArr.length == 0) {
			return;
		}
		this._dataArr = dataArr;
		this._maxPage = Math.ceil(dataArr.length / this._lineMaxCount) - 1;

		this._pageIndex = 0;
		this._refreshPage();
	},


	_itemLen: null,
	_addOneItem(data) {

		const item = new cc.Node();
		item.width = this._itemLen;
		item.height = this._itemLen;
		// const rect = item.addComponent(cc.Graphics);
		// rect.fillColor = cc.Color.BLACK.setA(100);
		// rect.fillRect(-this._itemLen / 2, -this._itemLen / 2, this._itemLen, this._itemLen);
		// rect.fill();

		this._addItemPic(item, data.pic_url);
		this._addItemLabel(item, data.text);
		this._addItemAudio(item, data.audio_url);

		return item;
	},

	_addItemPic(item, url) {
		if (!url) {
			return;
		}

		const imgLen = this._itemLen * 0.8;
		cc.assetManager.loadRemote(url, (err, texture) => {

			const sprNode = new cc.Node();
			item.addChild(sprNode);
			sprNode.width = texture.width;
			sprNode.height = texture.height;
			sprNode.y = (this._itemLen - imgLen) / 2;
			setSprNodeMaxLen(sprNode, imgLen, imgLen);

			const sf = new cc.SpriteFrame(texture);
			sprNode.addComponent(cc.Sprite).spriteFrame = sf;
		});
	},

	_labelFont: null,
	_addItemLabel(item, text) {
		if (!text) {
			return;
		}

		const labelNode = new cc.Node();
		labelNode.color = cc.Color.BLACK;

		const label = labelNode.addComponent(cc.Label);
		label.string = text;
		// label.string ='ltg + ';
		item.addChild(labelNode);
		labelNode.y = -this._itemLen * 0.4;
		label.fontSize = 16;
		label.verticalAlign = cc.Label.VerticalAlign.CENTER;

		if (!this._labelFont) {

			const fontLabel = this.node.getChildByName('font').getComponent(cc.Label);
			this._labelFont = fontLabel.font;
		}

		label.font = this._labelFont;

	},

	_addItemAudio(item, url) {
		if (!url) {
			return;
		}

		cc.assetManager.loadRemote(url, (err, audioClip) => {
			item.audioClip = audioClip;
			this._addItemListener(item);
		});
	},

	_addItemListener(item) {
		item.addComponent(cc.Button);
		item.on('click', () => {
			if (item.audioClip) {
				cc.audioEngine.stopAll();
				cc.audioEngine.play(item.audioClip, false, 0.5);
			}
		});
	},

	_refreshPage() {

		this._itemLayer.removeAllChildren();

		const dataArr = this._dataArr;
		const disW = this._disW;
		const startIndex = this._pageIndex * this._lineMaxCount;

		const showArr = dataArr.slice(startIndex, startIndex + this._lineMaxCount);

		const baseX = -(disW + this._itemLen) * (showArr.length - 1) / 2;
		const baseY = -25;

		showArr.forEach((data, i) => {
			const item = this._addOneItem(data);
			this._itemLayer.addChild(item);
			item.x = baseX + (disW + this._itemLen) * i;
			item.y = baseY;
		});

		this._setPageBtnState();

	},
	// update (dt) {},
});
