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">輸出Component</h2>
    <hr />
        <div>
            這邊用PhysicsPolygonCollider的Points來做示範<br>
            記得Component要掛，不然就會自動幫忙掛
        </div>
    <hr />
        <div>
            要輸出的Node 
            <ui-node class="flex-1" type="cc.Node" typename="Node" droppable="node" id="node"></ui-node>
        </div>
    <hr />
         <div>
              FilePath: <span id="label"></span>    
              <ui-input value="path" id="inputPath"}></ui-input>
         </div>
    <hr />
         <div>
              <span id="polygonLabel"></span>
              <ui-num-input style="width: 130px;" step=1 min=1 id="changePolygon"></ui-num-input>
         </div>
    <hr />
         <div style="text-align:right">
             <ui-button id="btn" class="green">生成表</ui-button>
             <ui-button id="deleteBtn" class="red">刪除表</ui-button>
             <ui-button id="updateBtn" class="blue">刷新資源</ui-button>
         </div>      
  `,

    $: {
        /** 保存按鈕 */
        btn: "#btn",
        /** 固定路徑前label */
        label: "#label",
        /** 檔案名稱前label */
        polygonLabel:"#polygonLabel",
        /** 固定路徑 */
        inputPath:"#inputPath",
        /** 更改檔案名稱 */
        changePolygon:"#changePolygon",
        /** 刪除按鈕 */
        deleteBtn:"#deleteBtn",
        /** 刷新按鈕 */
        updateBtn:"#updateBtn",
        /** Node */
        node:"#node"
    },

    ready () {
        Editor.Ipc.sendToMain("output-component:panel-load-finish");
        this.init();
        this.saveBtnClick();
        this.setPolygonConfigurationDefaultPath();
        this.changePolygonEvent();
        this.deleteBtnClick();
        this.updateBtnClick();
        this.resetBtnClick();

    },
    init() {
        this.$label.innerText = "(默認文件路徑)";
        this.$polygonLabel.innerText = "(檔案名稱): " + polygonNameHeader;
        this.$changePolygon.value = 1;
        polygonName = polygonNameHeader + this.$changePolygon.value;
    },
    /** 更改名稱事件 */
    changePolygonEvent() {
        this.$changePolygon.addEventListener("change",() => {
            polygonName = polygonNameHeader + this.$changePolygon.value;
        })
    },
    /** 重置場景按鈕點擊 */
    resetBtnClick() {
        this.$resetBtn.addEventListener("confirm",() => {
            Editor.Scene.callSceneScript("output-component", "reset-scene", function (err, res) {
            });
        })
    },
    /** 刷新按鈕點擊事件 */
    updateBtnClick() {
        this.$updateBtn.addEventListener("confirm",() => {
            Editor.assetdb.refresh("db://" + defaultPolygonPath, function (err, results) {
                if(err) {
                    Editor.log("刷新文件目錄失敗！！！")
                    return;
                }
                Editor.log("刷新文件目錄成功！！！")
            });
        })
    },
    /** 刪除按鈕點擊事件 */
    deleteBtnClick() {
        this.$deleteBtn.addEventListener("confirm",() => {
            Editor.Ipc.sendToMain("output-component:delete-click", defaultPolygonPath + polygonName);
        })
    },
    /** 保存按鈕點擊事件 */
    saveBtnClick() {
        this.$btn.addEventListener("confirm", () => {
            Editor.Ipc.sendToMain("output-component:save-click", defaultPolygonPath + polygonName, this.$node);
        });
    },
    /** 設置默認的配置路徑 */
    setPolygonConfigurationDefaultPath() {
        this.$inputPath.addEventListener("confirm",() => {
            defaultPolygonPath = this.$inputPath.value;
            if(defaultPolygonPath === "") {
                defaultPolygonPath = "assets/";
            }
            Editor.Ipc.sendToMain("output-component:set-path", defaultPolygonPath);
        })
    },
    messages : {
        "setDefaultPath":function (event,...agrs) {
            if(agrs[0] && agrs[0] != "") {
                defaultPolygonPath = agrs[0];
                this.$inputPath.value = agrs[0];
            }
            if (event.reply) {
                //if no error, the first argument should be null
                event.reply(null, "Fine, thank you!");
            }
        }
    }
});