import { __assign, __awaiter, __generator, __spreadArray } from "tslib";
import { Component, triggerEvent, triggerEventOnly } from '../_util/simply';
import { PINYIN_MAP } from './constants';
import { RareWordsKeyboardProps } from './props';
import { formatZDatas, loadFontFace, matchWordsRecommend } from './utils';
import { ZDATAS } from './zdatas';
import { getInstanceBoundingClientRect } from '../_util/jsapi/get-instance-bounding-client-rect';
var wordsData = formatZDatas(ZDATAS.datas);
Component(RareWordsKeyboardProps, {
    getInstance: function () {
        if (this.$id) {
            return my;
        }
        return this;
    },
    getBoundingClientRect: function (query) {
        return __awaiter(this, void 0, void 0, function () {
            return __generator(this, function (_a) {
                switch (_a.label) {
                    case 0: return [4 /*yield*/, getInstanceBoundingClientRect(this.getInstance(), query)];
                    case 1: return [2 /*return*/, _a.sent()];
                }
            });
        });
    },
    // 隐藏键盘，失去焦点
    handleHide: function () {
        this.setData({
            inputValue: [],
            matchWordsList: [],
            displayStr: '',
            showMoreWords: false,
        });
        triggerEventOnly(this, 'close');
    },
    // 点击键盘key值
    handleKeyClick: function (e) {
        if (this.data.loading)
            return;
        var _a = e.currentTarget.dataset.value, value = _a === void 0 ? '' : _a;
        if (!value)
            return;
        var inputValue = __spreadArray(__spreadArray([], this.data.inputValue, true), [value], false);
        this.setData(__assign({ inputValue: __spreadArray([], inputValue, true) }, this.computeMatchWords(inputValue)));
    },
    // 点击删除
    handleDelete: function () {
        var inputValue = __spreadArray([], this.data.inputValue, true);
        if (this.data.inputValue.length === 0)
            return;
        inputValue.pop();
        this.setData(__assign({ inputValue: __spreadArray([], inputValue, true) }, this.computeMatchWords(inputValue)));
    },
    // 计算展示值和候选字列表
    computeMatchWords: function (inputValue) {
        var displayStr = Array.isArray(inputValue)
            ? inputValue.join('')
            : inputValue;
        var curMatchWords = matchWordsRecommend(wordsData, displayStr);
        return {
            displayStr: displayStr,
            matchWordsList: curMatchWords,
        };
    },
    // 点击查看更多
    hanleLookMore: function () {
        if (this.data.matchWordsList.length <= this.data.maxDisplayNum) {
            this.handleHide();
            return;
        }
        this.setData({
            showMoreWords: !this.data.showMoreWords,
        });
    },
    // 计算每行可以展示的最大字数
    computeMaxDisplayNum: function () {
        return __awaiter(this, void 0, void 0, function () {
            var _a, singleWords, wordsWrap, maxDisplayNumInOneLine;
            return __generator(this, function (_b) {
                switch (_b.label) {
                    case 0: return [4 /*yield*/, Promise.all([
                            this.getBoundingClientRect('.ant-rare-words-keyboard-match_words_hidden'),
                            this.getBoundingClientRect('.ant-rare-words-keyboard-match_words_inner'),
                        ])];
                    case 1:
                        _a = _b.sent(), singleWords = _a[0], wordsWrap = _a[1];
                        if (!(wordsWrap === null || wordsWrap === void 0 ? void 0 : wordsWrap.width) || !(singleWords === null || singleWords === void 0 ? void 0 : singleWords.width))
                            return [2 /*return*/];
                        maxDisplayNumInOneLine = parseInt(((wordsWrap === null || wordsWrap === void 0 ? void 0 : wordsWrap.width) / (singleWords === null || singleWords === void 0 ? void 0 : singleWords.width)).toString(), 10);
                        this.setData({ maxDisplayNum: maxDisplayNumInOneLine });
                        return [2 /*return*/];
                }
            });
        });
    },
    // 加载字体
    loadFont: function () {
        var _this = this;
        this.setData({
            loading: true,
        });
        loadFontFace()
            .then(function () {
            _this.setData({ showErrorPage: false, loading: false });
        })
            .catch(function (err) {
            _this.setData({ showErrorPage: true, loading: false });
            triggerEvent(_this, 'error', err);
        });
    },
    // 点击重试
    handleRetry: function () {
        this.loadFont();
    },
    handleWordClick: function (e) {
        var _a = e.currentTarget.dataset.value, value = _a === void 0 ? '' : _a;
        if (!value)
            return;
        triggerEvent(this, 'change', value);
        this.handleHide();
    },
}, {
    loading: false,
    inputValue: [],
    displayStr: '',
    matchWordsList: [],
    showMoreWords: false,
    pinyinMaps: PINYIN_MAP,
    maxDisplayNum: 0,
    showErrorPage: false, // 是否展示错误页
}, null, {
    didMount: function () {
        this.loadFont();
        this.computeMaxDisplayNum();
    },
});