import { __assign, __extends, __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { Component } from 'react';
import cx from 'classnames';
import Button from '../../../button';
import Pop from '../../../pop';
import Icon from '../../../icon';
var DEFAULT_DISABLED_POP_PROPS = {
    position: 'top-right',
    trigger: 'hover',
    centerArrow: true,
};
var ArrowButton = (function (_super) {
    __extends(ArrowButton, _super);
    function ArrowButton() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    ArrowButton.prototype.render = function () {
        var _a = this.props, direction = _a.direction, double = _a.double, active = _a.active, bordered = _a.bordered, disabledHelp = _a.disabledHelp, rest = __rest(_a, ["direction", "double", "active", "bordered", "disabledHelp"]);
        if (double) {
            return (_jsx(DoubleArrowButton, __assign({ direction: direction, active: active, bordered: bordered }, rest), void 0));
        }
        var Arrow = null;
        if (direction === 'left') {
            Arrow = LeftArrow;
        }
        else if (direction === 'right') {
            Arrow = RightArrow;
        }
        var btn = (_jsx(Button, __assign({}, rest, { className: cx('zent-pagination-arrow-button', 'zent-pagination-button--layout', {
                'zent-pagination-page-button--no-border': !bordered,
            }) }, { children: _jsx(Arrow, {}, void 0) }), void 0));
        if (disabledHelp && rest.disabled) {
            var popProps = __assign(__assign({}, DEFAULT_DISABLED_POP_PROPS), disabledHelp);
            if (popProps.trigger === 'hover') {
                popProps.fixMouseEventsOnDisabledChildren = true;
            }
            return _jsx(Pop, __assign({}, popProps, { children: btn }), void 0);
        }
        return btn;
    };
    ArrowButton.defaultProps = {
        double: false,
        active: false,
        bordered: true,
    };
    return ArrowButton;
}(Component));
export { ArrowButton };
var DoubleArrowButton = (function (_super) {
    __extends(DoubleArrowButton, _super);
    function DoubleArrowButton() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = {
            showArrow: false,
            prevActive: false,
        };
        _this.onMouseOver = function () {
            _this.setState({
                showArrow: true,
            });
        };
        _this.onMouseOut = function () {
            _this.setState({
                showArrow: false,
            });
        };
        return _this;
    }
    DoubleArrowButton.prototype.render = function () {
        var _a = this.props, direction = _a.direction, active = _a.active, bordered = _a.bordered, _ = _a.double, rest = __rest(_a, ["direction", "active", "bordered", "double"]);
        var showArrow = this.state.showArrow;
        var Arrow = null;
        if (direction === 'left') {
            Arrow = LeftDoubleArrow;
        }
        else if (direction === 'right') {
            Arrow = RightDoubleArrow;
        }
        var isActive = showArrow;
        return (_jsx(Button, __assign({ className: cx('zent-pagination-arrow-button', 'zent-pagination-arrow-button--double', 'zent-pagination-button--layout', {
                'zent-pagination-arrow-button--double-active': isActive,
                'zent-pagination-page-button--no-border': !bordered,
            }) }, rest, { onMouseOver: active ? undefined : this.onMouseOver, onMouseLeave: active ? undefined : this.onMouseOut }, { children: isActive ? (_jsx(Arrow, {}, void 0)) : (_jsx(Icon, { type: "more", className: "zent-pagination-more" }, void 0)) }), void 0));
    };
    DoubleArrowButton.getDerivedStateFromProps = function (props, state) {
        var active = props.active;
        var stateDiff = {
            prevActive: active,
            showArrow: state.showArrow,
        };
        if (active !== state.prevActive) {
            stateDiff.showArrow = !!active;
        }
        return stateDiff;
    };
    DoubleArrowButton.defaultProps = {
        double: false,
        active: false,
        bordered: true,
    };
    return DoubleArrowButton;
}(Component));
function LeftArrow() {
    return _jsx(Icon, { type: "left", className: "zent-pagination-arrow" }, void 0);
}
function RightArrow() {
    return _jsx(Icon, { type: "right", className: "zent-pagination-arrow" }, void 0);
}
function LeftDoubleArrow() {
    return _jsx(Icon, { type: "double-last", className: "zent-pagination-arrow" }, void 0);
}
function RightDoubleArrow() {
    return _jsx(Icon, { type: "double-next", className: "zent-pagination-arrow" }, void 0);
}
export default ArrowButton;
