import {
    shortcut,
    extend,
    Controller,
    map,
    Events,
    VerticalAlign,
    createItems,
    i18nText,
    VerticalLayout,
    CenterLayout
} from "@/core";
import { ButtonGroup, Pane, TextButton } from "@/base";
import { SelectList } from "../../list/list.select";
import { ListPane } from "../../layer";
import { SingleSelectItem, MultiSelectItem } from "../../button";

@shortcut()
export class TextValueComboPopup extends Pane {
    static xtype = "bi.text_value_combo_popup";

    static EVENT_CHANGE = "EVENT_CHANGE";
    static EVENT_CLEAR = "EVENT_CLEAR";
    static EVENT_CONFIRM = "EVENT_CONFIRM";

    _defaultConfig() {
        return extend(super._defaultConfig(...arguments), {
            baseCls: "bi-text-icon-popup",
            chooseType: ButtonGroup.CHOOSE_TYPE_SINGLE,
            allowSelectAll: true,
        });
    }

    render() {
        const o = this.options;
        if (o.chooseType !== ButtonGroup.CHOOSE_TYPE_MULTI) {
            return {
                type: VerticalLayout.xtype,
                vgap: 5,
                items: [
                    {
                        type: ButtonGroup.xtype,
                        ref: _ref => {
                            this.popup = _ref;
                        },
                        items: this._formatItems(o.items),
                        chooseType: o.chooseType,
                        layouts: [
                            {
                                type: VerticalLayout.xtype,
                            }
                        ],
                        value: o.value,
                        listeners: [
                            {
                                eventName: Controller.EVENT_CHANGE,
                                action: (type, val, obj) => {
                                    this.fireEvent(
                                        Controller.EVENT_CHANGE,
                                        arguments
                                    );
                                    if (type === Events.CLICK) {
                                        this.fireEvent(
                                            TextValueComboPopup.EVENT_CHANGE,
                                            val,
                                            obj
                                        );
                                    }
                                },
                            }
                        ],
                    }
                ],
            };
        }
        
        return {
            type: VerticalLayout.xtype,
            verticalAlign: VerticalAlign.Stretch,
            items: o.allowSelectAll
                ? [
                    {
                        type: SelectList.xtype,
                        logic: {
                            dynamic: true,
                            innerVgap: 5,
                            rowSize: ["", "fill"],
                            verticalAlign: VerticalAlign.Stretch,
                        },
                        ref: _ref => {
                            this.popup = _ref;
                        },
                        el: {
                            el: {
                                chooseType: o.chooseType,
                            },
                        },
                        items: this._formatItems(o.items),
                        value: {
                            type: ButtonGroup.CHOOSE_TYPE_MULTI,
                            value: o.value,
                        },
                        height: "fill",
                        listeners: [
                            {
                                eventName: SelectList.EVENT_CHANGE,
                                action (val) {
                                    this.fireEvent(
                                        TextValueComboPopup.EVENT_CHANGE,
                                        val
                                    );
                                },
                            }
                        ],
                    },
                    {
                        type: CenterLayout.xtype,
                        cls: "list-view-toolbar bi-high-light bi-split-top",
                        height: 24,
                        items: createItems(
                            [
                                {
                                    type: TextButton.xtype,
                                    text: i18nText("BI-Basic_Clears"),
                                    handler: () => {
                                        this.fireEvent(
                                            TextValueComboPopup.EVENT_CLEAR
                                        );
                                    },
                                },
                                {
                                    type: TextButton.xtype,
                                    text: i18nText("BI-Basic_OK"),
                                    handler: () => {
                                        this.fireEvent(
                                            TextValueComboPopup.EVENT_CONFIRM
                                        );
                                    },
                                }
                            ],
                            {
                                once: false,
                                shadow: true,
                                isShadowShowingOnSelected: true,
                            }
                        ),
                    }
                ]
                : [
                    {
                        type: ListPane.xtype,
                        logic: {
                            dynamic: true,
                            innerVgap: 5,
                            rowSize: ["", "fill"],
                            verticalAlign: VerticalAlign.Stretch,
                        },
                        ref: _ref => {
                            this.popup = _ref;
                        },
                        el: {
                            chooseType: o.chooseType,
                        },
                        items: this._formatItems(o.items),
                        value: o.value,
                        height: "fill",
                        listeners: [
                            {
                                eventName: ListPane.EVENT_CHANGE,
                                action: val => {
                                    this.fireEvent(
                                        TextValueComboPopup.EVENT_CHANGE,
                                        val
                                    );
                                },
                            }
                        ],
                    }
                ],
        };
    }

    beforeMount() {
        if (this.options.chooseType !== ButtonGroup.CHOOSE_TYPE_MULTI) {
            this.check();
        }
    }

    _formatItems(items) {
        const o = this.options;
        
        return map(items, (i, item) => extend(
            {
                type:
                        o.chooseType !== ButtonGroup.CHOOSE_TYPE_MULTI
                            ? SingleSelectItem.xtype
                            : MultiSelectItem.xtype,
                iconWrapperWidth: 36,
                textAlign: o.textAlign,
                title: item.title || item.text,
            },
            item
        ));
    }

    populate(items) {
        super.populate(...arguments);
        this.popup.populate(this._formatItems(items));
    }

    getValue() {
        if (this.options.chooseType !== ButtonGroup.CHOOSE_TYPE_MULTI) {
            return this.popup.getValue();
        }
        const val = this.popup.getValue();
        if (!this.options.allowSelectAll) {
            return val;
        }
        if (val.type === ButtonGroup.CHOOSE_TYPE_MULTI) {
            return val.value;
        } else {
            return val.assist;
        }
    }

    setValue(v) {
        if (this.options.chooseType !== ButtonGroup.CHOOSE_TYPE_MULTI) {
            return this.popup.setValue(v);
        }
        if (!this.options.allowSelectAll) {
            this.popup.setValue(v);
            
            return;
        }
        this.popup.setValue({
            type: ButtonGroup.CHOOSE_TYPE_MULTI,
            value: v,
        });
    }
}