import { shortcut, Widget, createItems, i18nText, isNull, isEmptyObject, isEmptyString, isNotEmptyObject, getDate } from "@/core";
import { ButtonGroup, TextButton } from "@/base";
import { DynamicDatePane } from "../datepane";
import { DynamicDateCombo, DynamicDateHelper } from "../dynamicdate";

@shortcut()
export class DynamicDateTimePane extends Widget {
    static xtype = "bi.dynamic_date_time_pane"

    static EVENT_CHANGE = "EVENT_CHANGE"
    static EVENT_BEFORE_YEAR_MONTH_POPUPVIEW = "EVENT_BEFORE_YEAR_MONTH_POPUPVIEW"

    static Static = 1
    static Dynamic = 2

    props = {
        baseCls: "bi-dynamic-date-pane",
        minDate: "1900-01-01",
        maxDate: "2099-12-31",
        supportDynamic: true,
    };

    render() {
        const o = this.options;
        
        return {
            type: "bi.vtape",
            items: [{
                el: {
                    type: "bi.linear_segment",
                    invisible: !o.supportDynamic,
                    cls: "bi-split-bottom",
                    height: 30,
                    items: createItems([{
                        text: i18nText("BI-Multi_Date_YMD"),
                        value: DynamicDateTimePane.Static,
                    }, {
                        text: i18nText("BI-Basic_Dynamic_Title"),
                        value: DynamicDateTimePane.Dynamic,
                    }], {
                        textAlign: "center",
                    }),
                    listeners: [{
                        eventName: ButtonGroup.EVENT_CHANGE,
                        action: () => {
                            const value = this.switcher.getValue()[0];
                            let date;
                            this.dateTab.setSelect(value);
                            switch (value) {
                            case DynamicDateTimePane.Static:
                                date = DynamicDateHelper.getCalculation(this.dynamicPane.getValue());
                                this.ymd.setValue({
                                    year: date.getFullYear(),
                                    month: date.getMonth() + 1,
                                    day: date.getDate(),
                                });
                                break;
                            case DynamicDateTimePane.Dynamic:
                                this.dynamicPane.setValue({
                                    year: 0,
                                });
                                break;
                            default:
                                break;
                            }
                            this.fireEvent(DynamicDateTimePane.EVENT_CHANGE);
                        },
                    }],
                    ref: _ref => {
                        this.switcher = _ref;
                    },
                },
                height: o.supportDynamic ? 30 : 0,
            }, {
                type: "bi.tab",
                ref: _ref => {
                    this.dateTab = _ref;
                },
                showIndex: DynamicDateTimePane.Static,
                cardCreator: v => {
                    switch (v) {
                    case DynamicDateTimePane.Static:
                        return {
                            type: "bi.static_date_time_pane_card",
                            min: o.minDate,
                            max: o.maxDate,
                            behaviors: o.behaviors,
                            listeners: [{
                                eventName: "EVENT_CHANGE",
                                action: () => {
                                    this.fireEvent(DynamicDateTimePane.EVENT_CHANGE);
                                },
                            }, {
                                eventName: "EVENT_BEFORE_YEAR_MONTH_POPUPVIEW",
                                action: () => {
                                    this.fireEvent(DynamicDateTimePane.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW);
                                },
                            }],
                            ref: _ref => {
                                this.ymd = _ref;
                            },
                        };
                    case DynamicDateTimePane.Dynamic:
                    default:
                        return {
                            type: "bi.vtape",
                            items: [{
                                type: "bi.dynamic_date_card",
                                min: o.minDate,
                                max: o.maxDate,
                                ref: _ref => {
                                    this.dynamicPane = _ref;
                                },
                            }, {
                                el: {
                                    type: "bi.center",
                                    items: [{
                                        type: "bi.text_button",
                                        cls: "bi-high-light bi-border-top",
                                        shadow: true,
                                        text: i18nText("BI-Basic_Clear"),
                                        textHeight: 23,
                                        listeners: [{
                                            eventName: TextButton.EVENT_CHANGE,
                                            action: () => {
                                                this.setValue();
                                                this.fireEvent(DynamicDatePane.EVENT_CHANGE);
                                            },
                                        }],
                                    }, {
                                        type: "bi.text_button",
                                        cls: "bi-border-left bi-high-light bi-border-top",
                                        textHeight: 23,
                                        shadow: true,
                                        text: i18nText("BI-Basic_OK"),
                                        listeners: [{
                                            eventName: TextButton.EVENT_CHANGE,
                                            action: () => {
                                                const type = this.dateTab.getSelect();
                                                if (type === DynamicDateCombo.Dynamic) {
                                                    this.dynamicPane.checkValidation(true) && this.fireEvent(DynamicDatePane.EVENT_CHANGE);
                                                } else {
                                                    this.fireEvent(DynamicDatePane.EVENT_CHANGE);
                                                }
                                            },
                                        }],
                                    }],
                                },
                                height: 24,
                            }],
                        };
                    }
                },
            }],
        };
    }

    created() {
        this.setValue(this.options.value);
    }

    _checkValueValid(value) {
        return isNull(value) || isEmptyObject(value) || isEmptyString(value);
    }

    _checkValue(v) {
        switch (v.type) {
        case DynamicDateCombo.Dynamic:
            return isNotEmptyObject(v.value);
        case DynamicDateCombo.Static:
        default:
            return true;
        }
    }

    setMinDate(minDate) {
        if (this.options.minDate !== minDate) {
            this.options.minDate = minDate;
            this.ymd.setMinDate(minDate);
        }
    }

    setMaxDate(maxDate) {
        if (this.options.maxDate !== maxDate) {
            this.options.maxDate = maxDate;
            this.ymd.setMaxDate(maxDate);
        }
    }

    setValue(v) {
        v = v || {};
        const type = v.type || DynamicDateTimePane.Static;
        const value = v.value || v;
        this.switcher.setValue(type);
        this.dateTab.setSelect(type);
        switch (type) {
        case DynamicDateTimePane.Dynamic:
            this.dynamicPane.setValue(value);
            break;
        case DynamicDateTimePane.Static:
        default:
            if (this._checkValueValid(value)) {
                const date = getDate();
                this.ymd.setValue({
                    year: date.getFullYear(),
                    month: date.getMonth() + 1,
                });
            } else {
                this.ymd.setValue(value);
            }
            break;
        }
    }

    getValue() {
        return {
            type: this.dateTab.getSelect(),
            value: this.dateTab.getValue(),
        };
    }
}