import { __assign, __extends } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cx from 'classnames';
import { Component } from 'react';
import Popover from '../../popover';
import { Checkbox } from '../../checkbox';
import BlockLoading from '../../loading/BlockLoading';
import { getNodeKey } from '../node-fns';
import { getPathValue } from '../path-fns';
var withPopover = Popover.withPopover;
var SearchContent = (function (_super) {
    __extends(SearchContent, _super);
    function SearchContent() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.closePopup = function () { var _a; return (_a = _this.props.popover) === null || _a === void 0 ? void 0 : _a.close(); };
        return _this;
    }
    SearchContent.prototype.onOptionClick = function (path) {
        var onOptionClick = this.props.onOptionClick;
        onOptionClick(path, this.closePopup);
    };
    SearchContent.prototype.renderSearchingOrEmpty = function () {
        var _a = this.props, isSearching = _a.isSearching, i18n = _a.i18n;
        return (_jsx("div", __assign({ className: "zent-cascader-v2--search-empty", "data-zv": 'v10.0.12' }, { children: isSearching ? (_jsx(BlockLoading, { height: 32, iconSize: 18, loading: true, colorPreset: "grey", icon: "circle" }, void 0)) : (i18n.searchEmpty) }), void 0));
    };
    SearchContent.prototype.renderPanels = function () {
        var _this = this;
        var _a = this.props, searchList = _a.searchList, multiple = _a.multiple, highlight = _a.highlight, keyword = _a.keyword, selectionMap = _a.selectionMap;
        return (_jsx("ul", __assign({ className: "zent-cascader-v2--search-list", "data-zv": 'v10.0.12' }, { children: searchList.map(function (path) {
                var leafNode = path[path.length - 1];
                var searchItemCls = cx('zent-cascader-v2--search-item', {
                    'zent-cascader-v2--search-item--multiple': multiple,
                });
                var checkState;
                if (multiple) {
                    checkState = selectionMap.get(getNodeKey(leafNode));
                }
                return (_jsxs("li", __assign({ className: searchItemCls, onClick: leafNode.disabled || multiple
                        ? undefined
                        : function () { return _this.onOptionClick(path); }, "data-zv": 'v10.0.12' }, { children: [multiple && (_jsx(Checkbox, { value: leafNode.value, onChange: function (e) {
                                return _this.props.onOptionToggle(path, e.target.checked);
                            }, checked: checkState === 'on', disabled: leafNode.disabled }, void 0)), highlight(keyword, path)] }), getPathValue(path)));
            }) }), void 0));
    };
    SearchContent.prototype.render = function () {
        var _a = this.props, isSearching = _a.isSearching, searchList = _a.searchList;
        return (_jsx("div", __assign({ className: "zent-cascader-v2__popup-inner zent-cascader-v2__popup-inner-search", "data-zv": 'v10.0.12' }, { children: isSearching || !searchList.length
                ? this.renderSearchingOrEmpty()
                : this.renderPanels() }), void 0));
    };
    return SearchContent;
}(Component));
export default withPopover(SearchContent);
