import { __assign, __rest } from "tslib";
import React, { useContext, useEffect, useRef, useState } from 'react';
import classNames from 'classnames';
import { useClickOutside } from '../_utils/hooks';
import { ArrowDown } from '../_utils/components';
import { SelectContext } from './select-context';
import { ConfigContext } from '../config-provider/config-context';
import { getPrefixCls } from '../_utils/general';
import Popup from '../popup';
import Input from '../input/input';
var Select = function (props) {
    var _a;
    var _b = props.defaultOpen, defaultOpen = _b === void 0 ? false : _b, _c = props.disabled, disabled = _c === void 0 ? false : _c, _d = props.defaultValue, defaultValue = _d === void 0 ? '' : _d, customisedCls = props.prefixCls, value = props.value, onDropdownVisibleChange = props.onDropdownVisibleChange, placeholder = props.placeholder, className = props.className, children = props.children, dropdownStyle = props.dropdownStyle, onSelect = props.onSelect, otherProps = __rest(props, ["defaultOpen", "disabled", "defaultValue", "prefixCls", "value", "onDropdownVisibleChange", "placeholder", "className", "children", "dropdownStyle", "onSelect"]);
    var _e = useState('open' in props ? props.open : defaultOpen), isOpenDropdown = _e[0], setIsOpenDropdown = _e[1];
    var _f = useState('value' in props ? value : defaultValue), selectVal = _f[0], setSelectVal = _f[1];
    var ref = useRef(null);
    var configContext = useContext(ConfigContext);
    var prefixCls = getPrefixCls('select', configContext.prefixCls, customisedCls);
    var cls = classNames(prefixCls, className);
    var arrowCls = classNames(prefixCls + "__arrow", (_a = {},
        _a[prefixCls + "__arrow_reverse"] = isOpenDropdown,
        _a));
    useClickOutside(ref.current, function () {
        if (!('open' in props)) {
            setIsOpenDropdown(false);
            onDropdownVisibleChange && onDropdownVisibleChange(false);
        }
    });
    var inputOnClick = function (e) {
        e.preventDefault();
        if (!('open' in props)) {
            setIsOpenDropdown(true);
            onDropdownVisibleChange && onDropdownVisibleChange(true);
        }
    };
    var contextValue = {
        value: selectVal,
        onSelect: function (value) {
            setSelectVal(value);
            setIsOpenDropdown(false);
            onSelect && onSelect(value);
        },
    };
    useEffect(function () {
        'open' in props && setIsOpenDropdown(props.open);
    }, [props]);
    var renderOverlay = function () { return (React.createElement(SelectContext.Provider, { value: contextValue },
        React.createElement("ul", { className: prefixCls + "__dropdown", style: dropdownStyle }, React.Children.map(children, function (child) {
            var childElement = child;
            var displayName = childElement.type.displayName;
            if (displayName === 'SelectOption' || displayName === 'SelectOptGroup') {
                return React.cloneElement(childElement, childElement.props);
            }
            else {
                console.warn('Select has a child that is not neither SelectOption nor SelectOptGroup component.');
                return null;
            }
        })))); };
    return (React.createElement("div", __assign({}, otherProps, { ref: ref, className: cls }),
        React.createElement(Popup, { trigger: "manual", placement: "bottom", arrow: false, visible: isOpenDropdown, content: renderOverlay() },
            React.createElement(Input, { value: Array.isArray(selectVal) ? selectVal[0] : selectVal, disabled: disabled, placeholder: placeholder, onClick: inputOnClick, suffix: React.createElement("span", { className: arrowCls },
                    React.createElement(ArrowDown, { size: 10 })) }))));
};
Select.displayName = 'Select';
export default Select;
//# sourceMappingURL=select.js.map