"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FormulaPicker = void 0;
var tslib_1 = require("tslib");
var uncontrollable_1 = require("uncontrollable");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var Editor_1 = require("./Editor");
var helper_1 = require("../../utils/helper");
var icon_1 = require("../../utils/icon");
var PickerContainer_1 = (0, tslib_1.__importDefault)(require("../PickerContainer"));
var Editor_2 = (0, tslib_1.__importDefault)(require("./Editor"));
var ResultBox_1 = (0, tslib_1.__importDefault)(require("../ResultBox"));
var Button_1 = (0, tslib_1.__importDefault)(require("../Button"));
var icons_1 = require("../icons");
var theme_1 = require("../../theme");
var locale_1 = require("../../locale");
var tpl_builtin_1 = require("../../utils/tpl-builtin");
var FormulaPicker = /** @class */ (function (_super) {
    (0, tslib_1.__extends)(FormulaPicker, _super);
    function FormulaPicker() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    FormulaPicker.prototype.handleConfirm = function (value) {
        var _a, _b;
        (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, value);
    };
    FormulaPicker.prototype.renderFormulaValue = function (item) {
        var _a = this.props, allowInput = _a.allowInput, cx = _a.classnames;
        var html = { __html: item.html };
        if (allowInput) {
            return '';
        }
        return (react_1.default.createElement("div", { className: cx('FormulaPicker-ResultBox'), dangerouslySetInnerHTML: html }));
    };
    FormulaPicker.prototype.render = function () {
        var _this = this;
        var _a = this.props, cx = _a.classnames, value = _a.value, __ = _a.translate, disabled = _a.disabled, allowInput = _a.allowInput, className = _a.className, onChange = _a.onChange, size = _a.size, borderMode = _a.borderMode, placeholder = _a.placeholder, mode = _a.mode, btnLabel = _a.btnLabel, level = _a.level, btnSize = _a.btnSize, icon = _a.icon, title = _a.title, clearable = _a.clearable, variables = _a.variables, functions = _a.functions, rest = (0, tslib_1.__rest)(_a, ["classnames", "value", "translate", "disabled", "allowInput", "className", "onChange", "size", "borderMode", "placeholder", "mode", "btnLabel", "level", "btnSize", "icon", "title", "clearable", "variables", "functions"]);
        if ((0, tpl_builtin_1.isPureVariable)(variables)) {
            // 如果 variables 是 ${xxx} 这种形式，将其处理成实际的值
            variables = (0, tpl_builtin_1.resolveVariableAndFilter)(variables, this.props.data, '| raw');
        }
        if ((0, tpl_builtin_1.isPureVariable)(functions)) {
            // 如果 functions 是 ${xxx} 这种形式，将其处理成实际的值
            functions = (0, tpl_builtin_1.resolveVariableAndFilter)(functions, this.props.data, '| raw');
        }
        var iconElement = (0, icon_1.generateIcon)(cx, icon, 'Icon');
        return (react_1.default.createElement(PickerContainer_1.default, { title: __(title || 'FormulaEditor.title'), headerClassName: "font-bold", bodyRender: function (_a) {
                var onClose = _a.onClose, value = _a.value, onChange = _a.onChange;
                return (react_1.default.createElement(Editor_2.default, (0, tslib_1.__assign)({}, rest, { variables: variables, functions: functions, value: value, onChange: onChange })));
            }, value: value, onConfirm: this.handleConfirm, size: 'md' }, function (_a) {
            var _b, _c, _d;
            var _e, _f;
            var onClick = _a.onClick, isOpened = _a.isOpened;
            return (react_1.default.createElement("div", { className: cx('FormulaPicker', className) }, mode === 'button' ? (react_1.default.createElement(Button_1.default, { className: cx('FormulaPicker-action', 'w-full'), level: level, size: btnSize, onClick: onClick },
                iconElement ? (react_1.default.cloneElement(iconElement, {
                    className: cx((_f = (_e = iconElement === null || iconElement === void 0 ? void 0 : iconElement.props) === null || _e === void 0 ? void 0 : _e.className) !== null && _f !== void 0 ? _f : '', 'FormulaPicker-icon', (_b = {},
                        _b['is-filled'] = !!value,
                        _b))
                })) : (react_1.default.createElement(icons_1.Icon, { icon: "function", className: cx('FormulaPicker-icon', 'icon', (_c = {},
                        _c['is-filled'] = !!value,
                        _c)) })),
                react_1.default.createElement("span", { className: cx('FormulaPicker-label') }, __(btnLabel || 'FormulaEditor.btnLabel')))) : (react_1.default.createElement(react_1.default.Fragment, null,
                react_1.default.createElement(ResultBox_1.default, { className: cx('FormulaPicker-input', isOpened ? 'is-active' : ''), allowInput: allowInput, clearable: clearable, value: value, result: allowInput
                        ? void 0
                        : Editor_1.FormulaEditor.highlightValue(value, variables, functions), itemRender: _this.renderFormulaValue, onResultChange: helper_1.noop, onChange: _this.handleConfirm, disabled: disabled, borderMode: borderMode, placeholder: placeholder }),
                react_1.default.createElement(Button_1.default, { className: cx('FormulaPicker-action'), onClick: onClick },
                    react_1.default.createElement(icons_1.Icon, { icon: "function", className: cx('FormulaPicker-icon', 'icon', (_d = {},
                            _d['is-filled'] = !!value,
                            _d)) }))))));
        }));
    };
    (0, tslib_1.__decorate)([
        helper_1.autobind,
        (0, tslib_1.__metadata)("design:type", Function),
        (0, tslib_1.__metadata)("design:paramtypes", [Object]),
        (0, tslib_1.__metadata)("design:returntype", void 0)
    ], FormulaPicker.prototype, "handleConfirm", null);
    (0, tslib_1.__decorate)([
        helper_1.autobind,
        (0, tslib_1.__metadata)("design:type", Function),
        (0, tslib_1.__metadata)("design:paramtypes", [Object]),
        (0, tslib_1.__metadata)("design:returntype", void 0)
    ], FormulaPicker.prototype, "renderFormulaValue", null);
    return FormulaPicker;
}(react_1.default.Component));
exports.FormulaPicker = FormulaPicker;
exports.default = (0, theme_1.themeable)((0, locale_1.localeable)((0, uncontrollable_1.uncontrollable)(FormulaPicker, {
    value: 'onChange'
})));
//# sourceMappingURL=./components/formula/Picker.js.map
