let assetPath = "";
let defaultPolygonPath = "assets/";
let polygonNameHeader = "polygon_";
let polygonName = "";
Editor.Panel.extend({
    style:
    `:host { margin: 5px; }
    h2 { color: #f90; }
    .bottom { height: 30px; }`,

    template: `
    <h2 style="text-align:center">Auto Create Spine Prefab</h2>
    <hr />
        <div>
            1. 把要輸出的節點拉進來<br>
            2. 把要輸入的資料夾拉進來
        </div>
    <hr />
        <div>
            要輸出的Node 
            <ui-node class="flex-1" type="cc.Node" typename="Node" droppable="node" id="node"></ui-node>
        </div>
    <hr />
    <div>
        要輸入的資料夾 
        <ui-asset class="flex-1" type="folder" droppable="asset" id="asset">ui-asset>
    </div>
    <div>
        Spine大小(選填)
        <ui-input placeholder="Spine大小 ex: 0.25" id="scale"></ui-input>  
    </div>
    <hr />
        <div>
            要輸入的範例(選填)
            <ui-node class="flex-1" type="cc.Node" typename="Node" droppable="node" id="example"></ui-node>
        </div>
    <hr />
        <div>
            預設動畫名稱(選填)
            <ui-input placeholder="動畫名稱 ex: Move" id="anim"></ui-input>  
        </div>
         <div style="text-align:right">
             <ui-button id="create" class="green">生成</ui-button>
         </div>      
  `,

    $: {
        /** Node */
        node: "#node",
        /** 資料夾 */
        asset: "#asset",
        /** Spine大小 */
        scale: "#scale",
        /** 範例 */
        example: "#example",
        /** 預設動畫名稱 */
        anim: "#anim",
        /** 生成按鈕 */
        create: "#create",
    },

    ready() {
        // Editor.Ipc.sendToMain("spineset:panel-load-finish");
        this.createBtnClick();

    },
    /** 保存按鈕點擊事件 */
    createBtnClick() {
        this.$create.addEventListener("confirm", () => {
            if (!this.$node._value) {
                Editor.error("請拖曳 Node 到視窗");
                return;
            } else if (!this.$asset._value) {
                Editor.error("請拖曳 資料夾 到視窗");
                return;
            }
            Editor.Ipc.sendToMain("spineset:create-click", this.$node, this.$asset, this.$example, this.$scale, this.$anim);
            // Editor.Ipc.sendToMain("spineset:create-click", this.$asset);
        });
    },
    messages: {
        "setDefault": function (event, ...agrs) {
            let Data = JSON.parse(agrs[0]);
            let node_uuid = Data["node_uuid"];
            let example_uuid = Data["example_uuid"];
            // Editor.log(`agrs: ${agrs[0]}`);
            // Editor.log(`node_uuid: ${node_uuid}`);
            // Editor.log(`example_uuid: ${example_uuid}`);
            if (node_uuid && node_uuid !== "") {
                this.$node.value = node_uuid;
            }
            if (example_uuid && example_uuid !== "") {
                this.$example.value = example_uuid;
            }
            if (event.reply) {
                //if no error, the first argument should be null
                event.reply(null, "Fine, thank you!");
            }
        }
    }
});