import { shortcut, extend } from "@/core";
import { Single, Label } from "@/base";
import { TimeCombo } from "../time";

@shortcut()
export class TimePeriods extends Single {
    static xtype = "bi.time_periods"

    props = {
        extraCls: "bi-time-interval",
        value: {},
    };

    static EVENT_CONFIRM = "EVENT_CONFIRM"
    static EVENT_CHANGE = "EVENT_CHANGE"


    render() {
        const o = this.options;

        return {
            type: "bi.horizontal_fill",
            columnSize: ["fill", "", "fill"],
            items: [{
                el: extend({
                    ref: _ref => {
                        this.left = _ref;
                    },
                }, this._createCombo(o.value.start, o.watermark?.start)),
            }, {
                el: {
                    type: Label.xtype,
                    height: o.height,
                    hgap: 5,
                    text: "-",
                    ref: _ref => {
                        this.label = _ref;
                    },
                },
            }, {
                el: extend({
                    ref: _ref => {
                        this.right = _ref;
                    },
                }, this._createCombo(o.value.end, o.watermark?.end)),
            }],
        };
    }

    _createCombo(v, watermark) {
        const o = this.options;
        
        return {
            type: TimeCombo.xtype,
            value: v,
            height: o.height,
            watermark,
            listeners: [{
                eventName: TimeCombo.EVENT_BEFORE_POPUPVIEW,
                action: () => {
                    this.left.hidePopupView();
                    this.right.hidePopupView();
                },
            }, {
                eventName: TimeCombo.EVENT_CHANGE,
                action: () => {
                    this.fireEvent(TimePeriods.EVENT_CHANGE);
                },
            }, {
                eventName: TimeCombo.EVENT_CONFIRM,
                action: () => {
                    this.fireEvent(TimePeriods.EVENT_CONFIRM);
                },
            }],
        };
    }

    setValue(date) {
        date = date || {};
        this.left.setValue(date.start);
        this.right.setValue(date.end);
    }

    getValue() {
        return {
            start: this.left.getValue(),
            end: this.right.getValue(),
        };
    }
}