import { _decorator, AssetManager, Button, Component, instantiate, Node, sp, Vec2 } from 'cc';
import { getSelectAllKeys, selectedSkinList, Skin, SkinData } from '../../script/Manager/LocalDataMgr';
import { SkinItem } from './SkinItem';
import { LayerMgr } from '../../script/Manager/LayerMgr';
import { BundleName } from '../../script/Config/EnumCfg';
const { ccclass, property } = _decorator;

@ccclass('SelectSkinPanel')
export class SelectSkinPanel extends Component {
    @property(Node)
    itemRoot: Node = null;
    @property(Node)
    itemPrefab: Node = null;
    @property({type:Vec2,tooltip:"spine偏移量"})
    spineoffset:Vec2 = new Vec2(0,0);
    @property(Button)
    btnClose: Button = null;

    _skinData: SkinData = null
    _allSkinList:{ [key: number]: string };
    _items: Node[] = [];
    _itemPool: Node[] = [];
    _hasCreatedItems:boolean = false;

    protected start(): void {
        this.btnClose.node.on(Node.EventType.TOUCH_END,()=>this.node.active = false,this)
    }

    init() {
        LayerMgr.instance.loadBundle("editor", () => {
            this._allSkinList = selectedSkinList
            this._skinData = Skin.getSkinData();
            let allSkillKeys = getSelectAllKeys()
            let count = allSkillKeys.length;
            for(let i = 0; i < count; i++){
                this.createItem(allSkillKeys[i],this.spineoffset);
            }
        });
    }

    createItem(key: number,spineOffset:Vec2) {
        let itemNode = this._itemPool.length > 0 ? this._itemPool.pop() : instantiate(this.itemPrefab);
        itemNode.parent = this.itemRoot;
        this._items.push(itemNode);
        itemNode.active = true
        let skPath = selectedSkinList[key]
        this.loadSpine(skPath, (spineData: sp.SkeletonData) => {
            itemNode.getComponent(SkinItem).init(key,spineData,"loop2",spineOffset,this.judgeSelect(key))
        })
    }
    onSingleSkinClick() {

    }

    onMultiSkinClick() {

    }

    judgeSelect(key)
    {
        let selSkins = this._skinData.selectedSkinList
        let index = selSkins.indexOf(key)
        return index !== -1
    }



    spineDataMap: Map<string, sp.SkeletonData> = new Map();
    /**
     * 加载spine数据
     * @param path spine数据路径
     * @param callback 回调函数
     */
    loadSpineData(bundleName: BundleName | string, spinepath: string, callback: (spineData: sp.SkeletonData) => void) {
        let bundle: AssetManager.Bundle = LayerMgr.instance.getBundle(bundleName)
        if (bundle) {
            bundle.load(spinepath, sp.SkeletonData, (err, res) => {
                if (err) {
                    console.error(err)
                    return
                }
                let spineData: sp.SkeletonData = (res as sp.SkeletonData);
                callback(spineData)
            })
        }
    }

    loadSpine(path: string, callback: (spineData: sp.SkeletonData) => void) {
        if (this.spineDataMap.has(path)) {
            callback(this.spineDataMap.get(path));
            return;
        }
        this.loadSpineData("editor", path, (spineData: sp.SkeletonData) => {
            this.spineDataMap.set(path, spineData);
            callback(spineData);
        });
    }

    clearSelectAllSkins()
    {
        Skin.removeAllSelectSkin()
    }
}