import { __assign, __extends } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Component } from 'react';
import cx from 'classnames';
import Popover from '../popover';
import { I18nReceiver as Receiver } from '../i18n';
import { DisabledContext } from '../disabled';
import TabsContent from './components/TabsContent';
import { CascaderChangeAction, } from './types';
import { getPathLabel, getPathToNode } from './path-fns';
import { SingleTrigger } from './trigger/SingleTrigger';
import { Forest } from './forest';
import { getNodeDepth } from './node-fns';
function isControlled(props) {
    return ('visible' in props &&
        'onVisibleChange' in props &&
        typeof props.onVisibleChange === 'function');
}
function getVisible(props, state) {
    if (isControlled(props)) {
        return props.visible;
    }
    return state.visible;
}
var TabsCascader = (function (_super) {
    __extends(TabsCascader, _super);
    function TabsCascader(props) {
        var _this = _super.call(this, props) || this;
        _this.onVisibleChange = function (visible) {
            if (_this.disabled) {
                return;
            }
            _this.setVisible(visible);
        };
        _this.onTabsChange = function (activeId) {
            _this.setState({
                activeTab: activeId,
            });
        };
        _this.onClick = function (node, closePopup) {
            var _a = _this.props, loadOptions = _a.loadOptions, changeOnSelect = _a.changeOnSelect;
            var needLoading = node.loadChildrenOnExpand && loadOptions;
            var selectedOptions = getPathToNode(node);
            var newValue = selectedOptions.map(function (n) { return n.value; });
            var newState = {
                activeValue: newValue,
            };
            var hasChildren = node.children && node.children.length > 0;
            var needClose = !node.loadChildrenOnExpand && !hasChildren;
            var needTriggerChange = needClose || changeOnSelect;
            var level = getNodeDepth(node);
            var nextLevel = level + 1;
            if (!needLoading && !needClose) {
                newState.activeTab = nextLevel;
            }
            _this.setState(newState, function () {
                if (needLoading) {
                    _this.setState({
                        loadingLevel: level,
                    });
                    loadOptions(selectedOptions).then(function () {
                        _this.setState({
                            activeTab: nextLevel,
                            loadingLevel: null,
                        });
                    }, function () {
                        _this.setState({
                            loadingLevel: null,
                        });
                    });
                }
                if (needTriggerChange) {
                    _this.props.onChange(selectedOptions.map(function (n) { return n.value; }), selectedOptions, {
                        action: CascaderChangeAction.Change,
                    });
                }
                if (needClose) {
                    closePopup();
                }
            });
        };
        _this.onClear = function () {
            _this.setVisible(false);
            _this.setState({
                activeValue: [],
            }, function () {
                _this.props.onChange([], [], { action: CascaderChangeAction.Clear });
            });
        };
        var value = props.value;
        _this.state = {
            options: new Forest(props.options),
            activeValue: value,
            activeTab: value.length || 1,
            visible: false,
            prevProps: props,
            loadingLevel: null,
        };
        return _this;
    }
    TabsCascader.getDerivedStateFromProps = function (props, state) {
        var newState = {
            prevProps: props,
        };
        var prevProps = state.prevProps;
        var visible = getVisible(props, state);
        if (!visible) {
            var newValue = props.value;
            newState.activeValue = newValue;
            newState.activeTab = newValue.length || 1;
        }
        if (props.options !== prevProps.options) {
            newState.options = new Forest(props.options);
        }
        return newState;
    };
    Object.defineProperty(TabsCascader.prototype, "disabled", {
        get: function () {
            var _a;
            return (_a = this.props.disabled) !== null && _a !== void 0 ? _a : this.context.value;
        },
        enumerable: false,
        configurable: true
    });
    TabsCascader.prototype.isControlled = function () {
        return isControlled(this.props);
    };
    TabsCascader.prototype.getVisible = function () {
        return getVisible(this.props, this.state);
    };
    TabsCascader.prototype.setVisible = function (visible) {
        if (this.isControlled()) {
            this.props.onVisibleChange(visible);
        }
        else {
            this.setState({
                visible: visible,
            });
        }
    };
    TabsCascader.prototype.render = function () {
        var _this = this;
        var _a = this.props, className = _a.className, popupClassName = _a.popupClassName, placeholder = _a.placeholder, renderValue = _a.renderValue, clearable = _a.clearable, value = _a.value, title = _a.title, renderItemContent = _a.renderItemContent, getItemTooltip = _a.getItemTooltip, renderList = _a.renderList;
        var _b = this.state, activeValue = _b.activeValue, loadingLevel = _b.loadingLevel, activeTab = _b.activeTab, options = _b.options;
        var visible = this.getVisible();
        var selectedPath = options.getPathByValue(value);
        return (_jsx(Receiver, __assign({ componentName: "Cascader" }, { children: function (i18n) {
                return (_jsxs(Popover, __assign({ className: cx('zent-cascader-v2__popup', popupClassName), position: Popover.Position.CascaderAutoBottomLeft, visible: visible, onVisibleChange: _this.onVisibleChange, cushion: 4 }, { children: [_jsx(Popover.Trigger.Click, __assign({ toggle: true }, { children: _jsx(SingleTrigger, { className: className, placeholder: placeholder, renderValue: renderValue, disabled: _this.disabled, selectedPath: selectedPath, visible: visible, clearable: clearable, i18n: i18n, onClear: _this.onClear }, void 0) }), void 0), _jsx(Popover.Content, { children: _jsx(TabsContent, { i18n: i18n, value: activeValue, loadingLevel: loadingLevel, onClick: _this.onClick, activeId: activeTab, onTabsChange: _this.onTabsChange, title: title, options: options.getTrees(), renderItemContent: renderItemContent, getItemTooltip: getItemTooltip, renderList: renderList }, void 0) }, void 0)] }), void 0));
            } }), void 0));
    };
    TabsCascader.defaultProps = {
        value: [],
        options: [],
        changeOnSelect: false,
        renderValue: getPathLabel,
        clearable: false,
        title: [],
    };
    TabsCascader.contextType = DisabledContext;
    return TabsCascader;
}(Component));
export { TabsCascader };
export default TabsCascader;
