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 Set Blend</h2>
    <hr />
    <div>
        1. 把要檢查的節點拉進來(會連全部子節點一起掃描)
        <br>
        2. 會自動把Dst Blend是DST_ALPHA的改為ONE
    </div>
    <hr />
    <div>
        要檢查的Node 
        <ui-node style="width: 100px;" class="flex-1" type="cc.Node" typename="Node" droppable="node" id="node"></ui-node>
    </div>
    <hr />
    <div>
        Blend:
        <ui-select id="Blend">
            <option value="srcBlendFactor">Src Blend Factor</option>
            <option value="dstBlendFactor">Dst Blend Factor</option>
        </ui-select>
    </div>
    <hr />
    <div>
    <span id="label_Blend_Factor">Src Blend Factor</span><br>
        Old:
        <ui-select id="Blend_Factor_Old">
            <option value="0">ZERO</option>
            <option value="1">ONE</option>
            <option value="768">SRC_COLOR</option>
            <option value="769">ONE_MINUS_SRC_COLOR</option>
            <option value="770">SRC_ALPHA</option>
            <option value="771">ONE_MINUS_SRC_ALPHA</option>
            <option value="772">DST_ALPHA</option>
            <option value="773">ONE_MINUS_DST_ALPHA</option>
            <option value="774">DST_COLOR</option>
            <option value="775">ONE_MINUS_DST_COLOR</option>
        </ui-select><br>
        
        New:
        <ui-select id="Blend_Factor_New">
            <option value="0">ZERO</option>
            <option value="1">ONE</option>
            <option value="768">SRC_COLOR</option>
            <option value="769">ONE_MINUS_SRC_COLOR</option>
            <option value="770">SRC_ALPHA</option>
            <option value="771">ONE_MINUS_SRC_ALPHA</option>
            <option value="772">DST_ALPHA</option>
            <option value="773">ONE_MINUS_DST_ALPHA</option>
            <option value="774">DST_COLOR</option>
            <option value="775">ONE_MINUS_DST_COLOR</option>
        </ui-select>
    </div>
    <hr />
    <div style="text-align:right">
        <ui-button id="set" class="green">修改</ui-button>
    </div>      
  `,

    $: {
        /** Node */
        node: "#node",
        /** 確定按鈕 */
        set: "#set",
        /**  */
        label_Blend_Factor: "#label_Blend_Factor",
        /**  */
        Blend: "#Blend",
        /**  */
        Blend_Factor_Old: "#Blend_Factor_Old",
        Blend_Factor_New: "#Blend_Factor_New",
    },

    ready() {
        Editor.Ipc.sendToMain("blendset:panel-load-finish");
        this.BtnClick();
        this.selectBlendChange();
    },
    /** 保存按鈕點擊事件 */
    BtnClick() {
        this.$set.addEventListener("confirm", () => {
            if (!this.$node._value) {
                Editor.error("請拖曳 Node 到視窗");
                return;
            }
            Editor.Ipc.sendToMain("blendset:set-click", this.$node, this.$Blend.value, this.$Blend_Factor_Old.value, this.$Blend_Factor_New.value);
            // Editor.Ipc.sendToMain("blendset:set-click", this.$asset);
        });
    },
    selectBlendChange() {
        // var selectedValue = event.detail.value;
        // Editor.log(`selectedValue: ${selectedValue}`);
        this.$Blend.addEventListener("confirm", () => {
            // Editor.log(`Blend: ${this.$Blend.value}`);
            switch (this.$Blend.value) {
                case "srcBlendFactor":
                    this.$label_Blend_Factor.innerText = "Src Blend Factor";
                    break;

                case "dstBlendFactor":
                    this.$label_Blend_Factor.innerText = "Dst Blend Factor";
                    break;
            }
        });
    },
    messages: {
        "setDefault": function (event, ...agrs) {
            let Data = JSON.parse(agrs[0]);
            let node_uuid = Data["node_uuid"];
            // Editor.log(`agrs: ${agrs[0]}`);
            // Editor.log(`node_uuid: ${node_uuid}`);
            if (node_uuid && node_uuid !== "") {
                this.$node.value = node_uuid;
            }
            if (event.reply) {
                //if no error, the first argument should be null
                event.reply(null, "Fine, thank you!");
            }
        }
    }
});