import {
	all_ItemConfig,
	playerConfig,
	skillConfig,
} from '../../game/gameConfig';
import NetManage, { getItemList } from '../../manages/NetManage';

import { UIUpdateHero } from '../Academy/UIUpdateHero';
import { UIBase } from '../UIBase';
import { uimanger, UIManger } from '../UIManger';

const { ccclass, property } = cc._decorator;

@ccclass
export class UIHeroinfo extends UIBase {
	@property(cc.Node) basicPage: cc.Node = null;
	@property(cc.Node) SkillsPage: cc.Node = null;
	@property(cc.Node) FilesPage: cc.Node = null;

	@property(cc.Node) heroTypeImg: cc.Node = null;
	@property(cc.Label) labName: cc.Label = null;
	@property(sp.Skeleton) heroSpine: sp.Skeleton = null;

	// basic
	@property(cc.Node) arrow_up: cc.Node = null;
	@property(cc.Node) arrow_down: cc.Node = null;
	@property(cc.ScrollView) infoScrollview: cc.ScrollView = null;
	// files
	@property(cc.Node) arrow_up_files: cc.Node = null;
	@property(cc.Node) arrow_down_files: cc.Node = null;
	@property(cc.ScrollView) infoScrollview_files: cc.ScrollView = null;

	// lab
	@property(cc.Label) lab_hp: cc.Label = null;
	@property(cc.Label) lab_returnBlood: cc.Label = null;
	@property(cc.Label) lab_attack: cc.Label = null;
	@property(cc.Label) lab_defence: cc.Label = null;
	@property(cc.Label) lab_speed: cc.Label = null;
	@property(cc.Label) lab_range: cc.Label = null;
	@property(cc.Label) lab_rateoffire: cc.Label = null;
	@property(cc.Label) lab_clip: cc.Label = null;
	@property(cc.Label) lab_vision: cc.Label = null;
	@property(cc.Label) lab_reload: cc.Label = null;

	@property(cc.Label) lab_lucky: cc.Label = null;
	@property(cc.Label) lab_successrate: cc.Label = null;

	// left btns
	@property(cc.Node) baseBtn: cc.Node = null;
	@property(cc.Node) skillBtn: cc.Node = null;
	@property(cc.Node) infoBtn: cc.Node = null;

	// skilss
	@property(cc.Node) icons: cc.Node = null;
	@property(cc.Label) skillDesc: cc.Label = null;

	// files info
	@property(cc.Label) infoName: cc.Label = null;
	@property(cc.Label) infoGender: cc.Label = null;
	@property(cc.Label) infoHeight: cc.Label = null;
	@property(cc.Label) infoBirth: cc.Label = null;
	@property(cc.Label) infoHobby: cc.Label = null;
	@property(cc.Label) infojob: cc.Label = null;
	@property(cc.Label) infoAnim: cc.Label = null;
	@property(cc.Label) infoSay: cc.Label = null;
	@property(cc.Label) infoStory: cc.Label = null;

	// buy
	@property(cc.Node) buyNode: cc.Node = null;
	@property(cc.Node) skinHead: cc.Node = null;
	@property(cc.Label) diamondNum: cc.Label = null;
	@property(cc.Label) goldNum: cc.Label = null;
	@property(cc.Node) buyBtn: cc.Node = null;

	@property(cc.Prefab) buyHero: cc.Prefab = null;

	@property(cc.ProgressBar) limitBar: cc.ProgressBar = null;

	@property(cc.Label) cegget: cc.Label = null;

	@property(cc.Node) wantedNode: cc.Node = null;

	@property(cc.ProgressBar) pveBar: cc.ProgressBar = null;
	@property(cc.Label) pveget: cc.Label = null;

	private hero_id = 0;
	private allSkins = [];
	private curentBuyId = 0;

	showWanted() {
		this.wantedNode.active = true;
	}

	protected update(dt: number): void {
		if (this.infoScrollview.getScrollOffset().y <= 0) {
			this.arrow_down.active = true;
			this.arrow_up.active = false;
		} else {
			this.arrow_up.active = true;
			this.arrow_down.active = false;
		}
		//
		if (this.infoScrollview_files.getScrollOffset().y <= 0) {
			this.arrow_down_files.active = true;
			this.arrow_up_files.active = false;
		} else {
			this.arrow_up_files.active = true;
			this.arrow_down_files.active = false;
		}
	}

	init(data: any) {
		var lefttime = data.unlock_lefttime;
		if (data.lock_type == 3) {
			this.showWanted();
			this.wantedNode.getComponentInChildren(cc.Label).string =
				this.formatSeconds(lefttime);
			this.schedule(function () {
				this.wantedNode.getComponentInChildren(cc.Label).string =
					this.formatSeconds(lefttime);
				lefttime -= 1;
			}, 1);
		} else {
			this.wantedNode.active = false;
		}

		//
		var limit = data.ceg_uplimit;
		var get = data.today_get_gold;

		this.limitBar.progress = (limit - get) / limit;
		this.cegget.string = `${limit - data.today_get_gold}/${
			data.ceg_uplimit
		}`;

		//pve
		var pveuplimit = data.pve_ceg_uplimit;
		var pveget = data.today_pve_get_ceg;
		if (this.pveBar)
			this.pveBar.progress = (pveuplimit - pveget) / pveuplimit;
		if (this.pveget)
			this.pveget.string = `${pveuplimit - pveget}/${pveuplimit}`;
		//

		this.hero_id = data.hero_id;
		// init map
		const infoMap = new Map([
			['1', this.lab_hp],
			['2', this.lab_returnBlood],
			['3', this.lab_attack],
			['4', this.lab_defence],
			['5', this.lab_speed],
			['6', this.lab_range],
			['9', this.lab_rateoffire],
			['10', this.lab_clip],
			['13', this.lab_vision],
			['14', this.lab_reload],
			['34', this.lab_lucky],
			['35', this.lab_successrate],
		]);
		const cfg = playerConfig[data.hero_id];
		const hero_type = cfg.herotype;
		let url = 'textures/heroType/ht_s_' + hero_type;
		cc.loader.loadRes(url, cc.SpriteFrame, (err, res) => {
			if (!err) {
				this.heroTypeImg.getComponent(cc.Sprite).spriteFrame = res;
			}
		});
		this.labName.string = cfg.name;
		var skinres = cc.playerData.getheroSkinbyId(data.hero_id, 0);
		cc.loader.loadRes(
			'spine/heropic/pic_hero' + skinres,
			sp.SkeletonData,
			(err, sp) => {
				this.heroSpine.skeletonData = sp;
				this.heroSpine._updateSkeletonData();
				this.heroSpine.setAnimation(0, 'animation', true);
			}
		);
		// skills
		var skillarr = cc.playerData.getheroskill(data.hero_id);

		for (let i = 0; i < 3; i++) {
			var sklcfg = skillConfig[skillarr[i]];
			var icon = sklcfg.skill_icon;

			cc.loader.loadRes('icons/' + icon, cc.SpriteFrame, (err, res) => {
				if (!err) {
					this.icons.children[i].children[0].getComponent(
						cc.Sprite
					).spriteFrame = res;
				}
			});
			this.icons.children[i].children[1].getComponent(cc.Label).string =
				sklcfg.skill_name;
			if (i == 0) this.skillDesc.string = sklcfg.des;
		}

		// files
		this.infoSay.string = cfg.hero_say;
		this.infoName.string = cfg.name;
		this.infoStory.string = cfg.hero_story;
		this.infoGender.string = cfg.hero_sex;
		this.infoHeight.string = cfg.hero_tall;
		this.infoBirth.string = cfg.hero_brithday;
		this.infoHobby.string = cfg.hero_like;
		this.infojob.string = cfg.hero_job;
		this.infoAnim.string = cfg.hero_anmi;

		// basic info
		data.attr.forEach((element) => {
			if (element.type == 2) {
				infoMap.get(`${element.attr_id}`).string = `${element.val}%`;
			} else {
				infoMap.get(`${element.attr_id}`).string = `${element.val}`;
			}
		});

		infoMap.forEach((element) => {
			if (element.string === '000') {
				element.string = 'Locked';
				element.node.color = cc.Color.GRAY;
			}
		});

		// skin
		var skinsarr = cc.playerData.getskinarrbyId(data.hero_id);

		for (let i = 0; i < skinsarr.length; i += 1) {
			this.allSkins.push(all_ItemConfig[skinsarr[i]]);
			this.initOneSkin(skinsarr[i], i);
			if (i == 0) {
				this.curentBuyId = skinsarr[i];
				this.diamondNum.string = all_ItemConfig[skinsarr[i]].diamond;
				this.goldNum.string = all_ItemConfig[skinsarr[i]].gold;
				if (!this.checkHasSkin(skinsarr[i])) {
					this.buyNode.active = false;
				} else {
					this.buyNode.active = false;
				}
			}
		}
	}

	private initOneSkin(skin_id, id) {
		const node = cc.instantiate(this.skinHead);
		cc.loader.loadRes(
			`itemicon/${all_ItemConfig[skin_id].icon}`,
			cc.SpriteFrame,
			(err, res) => {
				if (!err) {
					node.children[1].getComponent(cc.Sprite).spriteFrame = res;
				}
			}
		);
		node.active = true;
		let event_handler = new cc.Component.EventHandler();
		event_handler.target = this.node;
		event_handler.component = 'UIHeroinfo';
		event_handler.handler = 'onClickChangeSkins';
		event_handler.customEventData = id;
		node.getComponent(cc.Toggle).clickEvents.push(event_handler);
		this.skinHead.parent.addChild(node);
	}

	onClickChangeSkins(data, event) {
		this.diamondNum.string = this.allSkins[event].diamond;
		this.goldNum.string = this.allSkins[event].gold;
		if (!this.checkHasSkin(this.allSkins[event].id)) {
			this.buyNode.active = false;
		} else {
			this.buyNode.active = false;
		}
	}

	checkHasSkin(skinId) {
		this.curentBuyId = skinId;
		let toReturn = false;
		getItemList((data) => {
			if (data.item_list.includes(skinId)) {
				toReturn = true;
			}
		});
		return toReturn;
	}

	onClickChangeSkills(data, event) {
		var skillarr = cc.playerData.getheroskill(this.hero_id);
		var sklcfg = skillConfig[skillarr[event - 1]];
		this.skillDesc.string = sklcfg.des;
	}

	onclose() {
		this.node.destroy();
	}

	resetBtns() {
		this.baseBtn.getChildByName('pick_status').opacity = 0;
		this.infoBtn.getChildByName('pick_status').opacity = 0;
		this.skillBtn.getChildByName('pick_status').opacity = 0;
	}

	onClickBasic() {
		this.resetBtns();
		this.baseBtn.getChildByName('pick_status').opacity = 255;
		this.basicPage.active = true;
		this.FilesPage.active = false;
		this.SkillsPage.active = false;
	}

	onClickSkills() {
		this.resetBtns();
		this.skillBtn.getChildByName('pick_status').opacity = 255;
		this.SkillsPage.active = true;
		this.FilesPage.active = false;
		this.basicPage.active = false;
	}

	onClickFiles() {
		this.resetBtns();
		this.infoBtn.getChildByName('pick_status').opacity = 255;
		this.FilesPage.active = true;
		this.SkillsPage.active = false;
		this.basicPage.active = false;
	}

	onClickBuy() {
		uimanger.showUI(this.buyHero, this.curentBuyId);
	}

	onClickAdvance() {
		const data = {};
		data['current'] = 'advance';
		uimanger.showUI(UIUpdateHero.prefabPath, data);
	}

	onClickUpgrade() {
		uimanger.showUI(UIUpdateHero.prefabPath, {});
	}

	formatSeconds(value) {
		let result = parseInt(value);
		let h =
			Math.floor(result / 3600) < 10
				? '0' + Math.floor(result / 3600)
				: Math.floor(result / 3600);
		let m =
			Math.floor((result / 60) % 60) < 10
				? '0' + Math.floor((result / 60) % 60)
				: Math.floor((result / 60) % 60);
		let s =
			Math.floor(result % 60) < 10
				? '0' + Math.floor(result % 60)
				: Math.floor(result % 60);

		let res = '';
		res += `${h}:`;
		res += `${m}:`;
		res += `${s}`;
		return res;
	}
}