/*
 * 特别声明：本技术材料受《中华人民共和国著作权法》、《计算机软件保护条例》等法律、法规、行政
 * 规章以及有关国际条约的保护，赞同科技享有知识产权、保留一切权利并视其为技术秘密。未经本公司书
 * 面许可，任何人不得擅自（包括但不限于：以非法的方式复制、传播、展示、镜像、上载、下载）使用，
 * 不得向第三方泄露、透露、披露。否则，本公司将依法追究侵权者的法律责任。特此声明！
 *
 * Special Declaration: These technical material reserved as the technical secrets by AGREE 
 * TECHNOLOGY have been protected by the "Copyright Law" "ordinances on Protection of Computer 
 * Software" and other relevant administrative regulations and international treaties. Without 
 * the written permission of the Company, no person may use (including but not limited to the 
 * illegal copy, distribute, display, image, upload, and download) and disclose the above 
 * technical documents to any third party. Otherwise, any infringer shall afford the legal 
 * liability to the company.
 */
import {Widget} from "widget/Widget";
import {Composite} from "widget/Composite";
import {ADORE} from "ADORE";
import {EventHub} from "event/EventHub";
import {MessageType} from "event/MessageType";
import {Event} from "event/Event";
export class Palette extends Composite {
    private static Template = `
    <div class="adore_palette">
    <!-- 左侧-->
    <div class="select-box col s5 m5 l5">
        <ul class="select-box-data select-box-left">
        </ul>
    </div>
    <!-- 中间-->
    <div class="select-btn col s2 m2 l2">
        <div >
            <input type="button" value="&gt;">
            <input type="button" value="&and;">
            <input type="button" value="&lt;">
            <input type="button" value="&or;">
        </div>
    </div>
    <!-- 右侧-->
    <div class="select-box col s5 m5 l5">
        <ul class="select-box-data select-box-right"></ul>
    </div>
</div>`;

    private $leftBox: JQuery;
    private $buttonUL: JQuery;
    private $boxItem: JQuery;

    constructor(parentId: string, id: string, style: number) {
        super(parentId, id, style);
        this.$thisNode = $(Palette.Template).attr("id", this.id);
        this.$leftBox = this.$thisNode.find(".select-box-left");
        this.$buttonUL = this.$thisNode.find("input[type='button']");
        this.$boxItem = this.$thisNode.find(".select-box-data");
    }
    /**
     * @attrs {items:[{name:""},...]}
     */
    public setItems(args: { items: { name: String }[] }) {
        let items = args.items;
        this.addItems(items);
        let own = this;
        this.$buttonUL.click(function () {
            let i = $(this).index();
            let move = "";
            let targ = "";
            let direction = ""; //数据移动的方向：0表示向右，1表示向上，2表示向左，3表示向下

            if (i === 0) {//向右
                move = ".select-box-left li.select-current";
                targ = ".select-box-right";
                direction = "0";
            }
            if (i === 1) {//向上
                move = "li.select-current";
                direction = "1";
            }
            if (i === 2) {//向左
                move = ".select-box-right li.select-current";
                targ = ".select-box-left";
                direction = "2";
            }
            if (i === 3) {//向下
                move = "li.select-current";
                direction = "3";
            }

            own.moveSelectBox(move, targ, direction);
        });

        this.$boxItem.click(function (event) {

            let $li = $(this).children();
            let cur = event.target;

            if ($(cur).is($li)) {
                $(cur).addClass("select-current");
                $(cur).siblings().removeClass("select-current");
            }

        });
    }

    private addItems(items: { name: String }[]) {
        if (!items || items.length === 0) {
            return;
        }
        for (let i = 0; i < items.length; i++) {
            this.$leftBox.append("<li>" + items[i].name + "</li>");
        }
    }

    private moveSelectBox(moveClass: String, targetClass: String, direction: String) {
        if ($(moveClass).length === 0) {
            return;
        } else {
            let own = this;
            if (direction === "0") {//向右
                let removeItemText = "";
                $.each($(moveClass), function () {
                    $(this).remove().appendTo(targetClass + "");
                    $(this).text($(this).text());
                    removeItemText = $(this).text();
                });
                $(targetClass + " .select-current").removeClass("select-current");
                EventHub.dispatchEvent(MessageType.WIDGET, {
                    id: own.id,
                    removeItemText: removeItemText,
                    direction: direction,
                    evtType: Event.CLICK
                });
            }
            if (direction === "1") {//向上
                moveClass = ".select-box-right li.select-current";
                if ($(moveClass).length === 0) {
                    moveClass = ".select-box-left li.select-current";
                }
                $.each($(moveClass), function () {
                    if ($(this).prev()) {
                        $(this).prev().before($(this));
                    }
                });
                $(moveClass).removeClass("select-current");
            }
            if (direction === "2") {//向左
                let removeItemText = "";
                $.each($(moveClass), function () {
                    $(this).remove().appendTo(targetClass + "");
                    $(this).text($(this).text());
                });
                $(targetClass + " .select-current").removeClass("select-current");
                EventHub.dispatchEvent(MessageType.WIDGET, {
                    id: own.id,
                    removeItemText: removeItemText,
                    direction: direction,
                    evtType: Event.CLICK
                });
            }
            if (direction === "3") {//向下
                moveClass = ".select-box-right li.select-current";
                if ($(moveClass).length === 0) {
                    moveClass = ".select-box-left li.select-current";
                }
                $.each($(moveClass), function () {
                    if ($(this).next()) {
                        $(this).next().after($(this));
                    }
                });
                $(moveClass).removeClass("select-current");
            }
        }
    }

    public setFocus() {

    }
}
