/*
 * 特别声明：本技术材料受《中华人民共和国著作权法》、《计算机软件保护条例》等法律、法规、行政
 * 规章以及有关国际条约的保护，赞同科技享有知识产权、保留一切权利并视其为技术秘密。未经本公司书
 * 面许可，任何人不得擅自（包括但不限于：以非法的方式复制、传播、展示、镜像、上载、下载）使用，
 * 不得向第三方泄露、透露、披露。否则，本公司将依法追究侵权者的法律责任。特此声明！
 *
 * 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 Slider extends Widget {

    private static Template = `<div class="adore-slider"></div>`;
    private slider: noUiSlider.Instance;
    private step: number;
    private min: number;
    private max: number;
    private startValue: number | number[];
    private value: number | number[];
    private isLayout: boolean;


    constructor(parentId: string, id: string, style: number) {
        super(parentId, id, style);
        this.$thisNode = $(Slider.Template).attr("id", this.id);
        this.slider = this.$thisNode[0] as noUiSlider.Instance;
        /**
         * 默认数据
         */
        this.step = 1;
        this.min = 0;
        this.max = 100;
        this.startValue = 0;
        this.value = this.startValue;
    }

    public setStep(args: { step: number }) {
        this.step = args.step;
        if (this.isLayout) {
            let own = this;
            this.slider.noUiSlider.updateOptions({
                step: own.step,
                range: {
                    "min": own.min,
                    "max": own.max
                }
            });
        }
    }

    public setRange(args: { min: number, max: number }) {
        this.max = args.max;
        this.min = args.min;
        if (this.isLayout) {
            let own = this;
            this.slider.noUiSlider.updateOptions({
                range: {
                    "min": own.min,
                    "max": own.max
                }
            });
        }
    }

    public setValue(args: { value: number }) {
        this.value = args.value;
        if (this.isLayout) {
            this.slider.noUiSlider.set(this.value);
        }
    }

    public postLayout() {
        this.isLayout = true;
        let own = this;
        noUiSlider.create(this.slider, {
            start: this.min,
            step: own.step,
            connect: "lower",
            tooltips: [true],
            range: {
                "min": own.min,
                "max": own.max
            }
        });
        //隐藏tooltips，等有交互时再显示
        $(this.slider).find("div.noUi-tooltip").css({ display: "none" });
        this.slider.noUiSlider.on("start", function () {
            $(own.slider).find("div.noUi-tooltip").css({ display: "block" }); //显示tooltips
            own.startValue = own.slider.noUiSlider.get();
        });
        this.slider.noUiSlider.on("end", function () {
            $(own.slider).find("div.noUi-tooltip").css({ display: "none" }); //隐藏tooltips
            let endValue = own.slider.noUiSlider.get();
            if (own.startValue !== endValue) {
                // dispatch onChange event
                EventHub.dispatchEvent(MessageType.WIDGET, {
                    id: own.id,
                    evtType: Event.ON_CHANGE,
                    value: endValue
                });
            }
        });
    }
}
