/*
 The Slider Widget shows time position and allows seek
 */
import sliceStyles from "./Slice.module.css";

const Slice = function(ns) {
    return class extends ns.Widgets.Widget {
constructor(player, config) {
    super(player, config);
    this.sliding = false;
};

static defaults = {
    show_arrow: false
};

static template =
    '<div class="Ldt-Slice"></div>'
    + '{{#show_arrow}}<div class="Ldt-Slice-Arrow"></div>{{/show_arrow}}';

draw() {
    
    this.renderTemplate();
    
    this.$slider = this.$.find(".Ldt-Slice");
    
    if (this.show_arrow) {
        this.insertSubwidget(this.$.find(".Ldt-Slice-Arrow"), { type: "Arrow" },"arrow");
    }
    
    this.min = 0;
    this.max = this.media.duration.valueOf();
    
    var _this = this,
        _currentTime;
    
    this.$slider.slider({
        range: true,
        values: [0, this.max],
        min: 0,
        max: this.max,
        change: function(event, ui) {
            if (_this.arrow) {
                _this.arrow.moveToTime((ui.values[0]+ui.values[1])/2);
            }
            if (_this.onBoundsChanged) {
                _this.onBoundsChanged(ui.values[0],ui.values[1]);
            }
        },
        start: function() {
            _this.sliding = true;
            if (!_this.media.getPaused()) {
                _this.media.pause();
            }
            _currentTime = _this.media.getCurrentTime();
        },
        slide: function(event, ui) {
            _this.media.setCurrentTime(ui.value);
        },
        stop: function() {
            _this.sliding = false;
            _this.media.setCurrentTime(_currentTime);
        }
    });
    
    this.$slider.find(".ui-slider-handle:first").addClass("Ldt-Slice-left-handle");
    this.$slider.find(".ui-slider-handle:last").addClass("Ldt-Slice-right-handle");
    
    this.getWidgetAnnotations().forEach(function(_a) {
        _a.on("enter", function() {
            _this.setBounds(_a.begin, _a.end);
        });
    });
    this.player.on("annotation-click", function(_a) {
        _this.setBounds(_a.begin, _a.end);
    });
};

setBounds(begin, end) {
    this.$slider.slider("values", [ begin, end ]);
};

show() {
    this.$slider.show();
};

hide() {
    this.$slider.hide();
};

    }}

export { Slice, sliceStyles };