import { __assign, __extends } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cx from 'classnames';
import { Component, createRef } from 'react';
import { SearchInput } from './Search';
import Tags from './Tags';
import { BaseTrigger } from './BaseTrigger';
var TagsTrigger = (function (_super) {
    __extends(TagsTrigger, _super);
    function TagsTrigger() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.searchInputRef = createRef();
        _this.onKeywordChange = function (e) {
            _this.props.onKeywordChange(e.target.value);
        };
        return _this;
    }
    TagsTrigger.prototype.focus = function () {
        var _a;
        (_a = this.searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
    };
    TagsTrigger.prototype.renderTagsContent = function () {
        var _a = this.props, selectedPaths = _a.selectedPaths, renderValue = _a.renderValue, onRemove = _a.onRemove, selectionMap = _a.selectionMap, simplifyPaths = _a.simplifyPaths, maxLine = _a.maxLine, lineHeight = _a.lineHeight;
        var tagEl = (_jsx(Tags, { list: selectedPaths, selectionMap: selectionMap, simplifyPaths: simplifyPaths, renderValue: renderValue, collapse: maxLine === 1, onRemove: onRemove }, void 0));
        var maxHeightStyle = {};
        if (maxLine > 1) {
            maxHeightStyle.maxHeight = maxLine * lineHeight + 'px';
            maxHeightStyle.overflowY = 'auto';
            return (_jsx("div", __assign({ style: maxHeightStyle, className: "zent-cascader-v2-tag__list", "data-zv": 'v10.0.12' }, { children: tagEl }), void 0));
        }
        return tagEl;
    };
    TagsTrigger.prototype.render = function () {
        var _a = this.props, className = _a.className, visible = _a.visible, clearable = _a.clearable, selectedPaths = _a.selectedPaths, keyword = _a.keyword, disabled = _a.disabled, i18n = _a.i18n, searchable = _a.searchable, placeholder = _a.placeholder, onClick = _a.onClick, onClear = _a.onClear, onKeywordChange = _a.onKeywordChange, renderValue = _a.renderValue, renderTags = _a.renderTags, onRemove = _a.onRemove, maxLine = _a.maxLine;
        var showTags = selectedPaths.length > 0;
        var showSearch = visible && searchable;
        return (_jsxs(BaseTrigger, __assign({ placeholder: placeholder, disabled: disabled, className: cx(className, 'zent-cascader-v2--multiple', {
                'zent-cascader-v2--multiple--collapsed': maxLine === 1,
            }), clearable: clearable, visible: visible, onClear: onClear, selectedPaths: selectedPaths, keyword: keyword, onKeywordChange: onKeywordChange, onClick: onClick, i18n: i18n, renderValue: renderValue, searchable: searchable, showLabels: !showTags && !showSearch }, { children: [showTags &&
                    (typeof renderTags === 'function'
                        ? renderTags({
                            list: selectedPaths,
                            renderValue: renderValue,
                            onRemove: onRemove,
                        })
                        : this.renderTagsContent()), showSearch && (_jsx(SearchInput, { placeholder: i18n.searchPlaceholder, value: keyword, onChange: this.onKeywordChange, ref: this.searchInputRef }, void 0))] }), void 0));
    };
    TagsTrigger.defaultProps = {
        selectedPaths: [],
    };
    return TagsTrigger;
}(Component));
export { TagsTrigger };
