import {
    shortcut,
    find,
    i18nText,
    isNotEmptyString,
    VerticalAdaptLayout
} from "@/core";
import {
    ButtonGroup,
    Trigger,
    Searcher,
    IconButton
} from "@/base";
import { TriggerIconButton } from "../../button";
import { DefaultTextEditor } from "../../editor";

@shortcut()
export class SearchTextValueTrigger extends Trigger {
    static xtype = "bi.search_text_value_trigger";

    static EVENT_SEARCHING = "EVENT_SEARCHING";
    static EVENT_STOP = "EVENT_STOP";
    static EVENT_START = "EVENT_START";
    static EVENT_CHANGE = "EVENT_CHANGE";
    static EVENT_CLEAR = "EVENT_CLEAR";

    props() {
        return {
            baseCls: "bi-search-text-value-trigger",
            height: 24,
            watermark: i18nText("BI-Basic_Search"),
            allowClear: false,
            title: () => this.editor.getText(),
        };
    }

    render() {
        const o = this.options;

        const triggerButton = {
            type: TriggerIconButton.xtype,
            cls: "trigger-icon-button",
            ref: _ref => {
                this.triggerBtn = _ref;
            },
            width: o.height,
            height: o.height,
        };

        const stateText = this._digest(o.value, o.items) || o.text;

        return {
            type: "bi.horizontal_fill",
            columnSize: ["fill", 24],
            items: [
                {
                    el: {
                        type: Searcher.xtype,
                        ref: _ref => {
                            this.searcher = this;
                        },
                        isAutoSearch: false,
                        el: {
                            type: DefaultTextEditor.xtype,
                            ref: _ref => {
                                this.editor = _ref;
                            },
                            watermark: o.watermark,
                            defaultText: o.defaultText,
                            text: stateText,
                            value: o.value,
                            height: o.height,
                        },
                        popup: {
                            type: "bi.search_text_value_combo_popup",
                            cls: "bi-card",
                            chooseType: ButtonGroup.CHOOSE_TYPE_SINGLE,
                            tipText: i18nText("BI-No_Select"),
                        },
                        onSearch (obj, callback) {
                            const keyword = obj.keyword;
                            const finding = BI.Func.getSearchResult(
                                o.items,
                                keyword
                            );
                            const matched = finding.match,
                                find = finding.find;
                            callback(matched, find);
                        },
                        listeners: [
                            {
                                eventName: Searcher.EVENT_CHANGE,
                                action: () => {
                                    this.fireEvent(
                                        SearchTextValueTrigger.EVENT_CHANGE
                                    );
                                },
                            }
                        ],
                    },
                },
                {
                    el: o.allowClear
                        ? {
                            type: VerticalAdaptLayout.xtype,
                            horizontalAlign: "left",
                            scrollable: false,
                            items: [
                                {
                                    el: {
                                        type: IconButton.xtype,
                                        ref: _ref => {
                                            this.clearBtn = _ref;
                                        },
                                        cls:
                                              `close-h-font ${
                                                  o.allowClear
                                                      ? "clear-button"
                                                      : ""}`,
                                        stopPropagation: true,
                                        invisible:
                                              !isNotEmptyString(stateText),
                                        width: o.height,
                                        height: o.height,
                                        handler: () => {
                                            this.fireEvent(
                                                SearchTextValueTrigger.EVENT_CLEAR
                                            );
                                        },
                                    },
                                },
                                {
                                    el: triggerButton,
                                }
                            ],
                        }
                        : triggerButton,
                    width: 24,
                }
            ],
        };
    }

    _setState(v) {
        this.editor.setState(v);
    }

    _digest(value, items) {
        const result = find(items, (i, item) => item.value === value);
        
        return result?.text;
    }

    stopEditing() {
        this.searcher.stopSearch();
    }

    getSearcher() {
        return this.searcher;
    }

    populate(items) {
        this.options.items = items;
    }

    setValue(vals) {
        const digestText = this._digest(vals, this.options.items);
        this._setState(digestText);
        this.options.allowClear &&
            this.clearBtn.setVisible(isNotEmptyString(digestText));
    }

    getValue() {
        return this.searcher.getValue();
    }
}