import { __assign, __extends } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Component, createRef } from 'react';
import cx from 'classnames';
import capitalize from '../utils/capitalize';
import Button from '../button';
import Popover from '../popover';
import Menu from '../menu';
import Icon from '../icon';
import { DisabledContext } from '../disabled';
var MenuItem = Menu.MenuItem;
var SplitButton = (function (_super) {
    __extends(SplitButton, _super);
    function SplitButton() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.splitButton = createRef();
        _this.state = {
            isShowDropdown: false,
        };
        _this.toggleDropdown = function (isShow) {
            _this.setState({ isShowDropdown: isShow });
        };
        _this.handleSelect = function (e, key) {
            _this.props.onSelect && _this.props.onSelect(key);
            _this.toggleDropdown(false);
        };
        return _this;
    }
    SplitButton.prototype.render = function () {
        var _this = this;
        var _a = this.props, type = _a.type, size = _a.size, _b = _a.disabled, disabled = _b === void 0 ? this.context.value : _b, loading = _a.loading, dropdownTrigger = _a.dropdownTrigger, dropdownData = _a.dropdownData, dropdownValue = _a.dropdownValue, dropdownText = _a.dropdownText, dropdownPosition = _a.dropdownPosition, dropdownIcon = _a.dropdownIcon, className = _a.className, children = _a.children, onClick = _a.onClick;
        var classString = cx('zent-split-button', className);
        var trigger = capitalize(dropdownTrigger);
        var Trigger = disabled || loading
            ? Popover.Trigger.Base
            : Popover.Trigger[trigger];
        var position = dropdownPosition
            .split('-')
            .map(function (s) { return capitalize(s); })
            .join('');
        return (_jsxs("div", __assign({ ref: this.splitButton, className: classString, "data-zv": 'v10.0.12' }, { children: [children && (_jsx(Button, __assign({ className: "zent-split-button__main", type: type, size: size, onClick: onClick, disabled: disabled, loading: loading }, { children: children }), void 0)), _jsx("div", __assign({ className: cx('zent-split-button__dropdown-wrapper', {
                        'zent-split-button__dropdown-wrapper-text': type === 'text',
                    }), "data-zv": 'v10.0.12' }, { children: _jsxs(Popover, __assign({ visible: this.state.isShowDropdown, onVisibleChange: function (isShow) { return _this.toggleDropdown(isShow); }, position: Popover.Position[position], cushion: 5 }, { children: [_jsx(Trigger, { children: _jsx(Button, __assign({ className: cx('zent-split-button__dropdown', {
                                        'zent-split-button__dropdown-disabled': loading,
                                        'zent-split-button__dropdown-icononly': !children,
                                    }), type: type, size: size, disabled: disabled }, { children: _jsx(Icon, { className: "zent-split-button__dropdown-icon", type: dropdownIcon }, void 0) }), void 0) }, void 0), _jsx(Popover.Content, { children: _jsx(Menu, __assign({ className: "zent-split-button__dropdown-menu", onClick: this.handleSelect }, { children: dropdownData.map(function (item) {
                                        return (_jsx(MenuItem, __assign({ className: "zent-split-button__dropdown-menu-item-" + type }, { children: item[dropdownText] }), "" + item[dropdownValue]));
                                    }) }), void 0) }, void 0)] }), void 0) }), void 0)] }), void 0));
    };
    SplitButton.defaultProps = {
        type: 'default',
        size: 'medium',
        dropdownTrigger: 'click',
        dropdownData: [],
        dropdownValue: 'value',
        dropdownText: 'text',
        dropdownIcon: 'down',
        dropdownPosition: 'auto-bottom-right',
    };
    SplitButton.contextType = DisabledContext;
    return SplitButton;
}(Component));
export { SplitButton };
export default SplitButton;
