"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_1 = require("react");
const rebass_1 = require("rebass");
const join_1 = tslib_1.__importDefault(require("../utils/join"));
const useProperty_1 = tslib_1.__importDefault(require("../utils/useProperty"));
const Arrows_1 = tslib_1.__importDefault(require("./Arrows"));
const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
const baseClassName = 'ab-Dropdown';
const Dropdown = (props) => {
    let { options, multiple, name, autoFocus, showEmptyItem = true, showClearButton, disabled, allowSearch, clearButtonProps, value: _, onChange: __, style, onExpand, ...boxProps } = props;
    if (showClearButton !== false) {
        showClearButton = true;
    }
    let [value, setValue] = (0, useProperty_1.default)(props, 'value', undefined, {
        onChange: props.onChange,
    });
    let selectedOption = null;
    let [lazyOptions, setLazyOptions] = (0, react_1.useState)([]);
    let onMouseDown = () => {
        if (onExpand) {
            onExpand();
        }
    };
    if (typeof options === 'function') {
        const lazyOptionsFn = options;
        onMouseDown = () => {
            const newOptions = lazyOptionsFn();
            setLazyOptions(newOptions);
            if (onExpand) {
                onExpand();
            }
        };
        options = lazyOptions;
    }
    let placeholder = props.emptyText || props.placeholder || 'Select an option';
    const finalOptions = options.map((option) => {
        if (typeof option === 'string') {
            option = {
                label: option,
                value: option,
            };
        }
        if (value === option.value) {
            selectedOption = option;
        }
        return option;
    });
    if (showEmptyItem)
        finalOptions.splice(0, 0, {
            label: placeholder,
            value: '',
        });
    const onChange = (option, e) => {
        setValue(option ? option.value : option, e, option);
    };
    const selectRef = (0, react_1.useRef)(null);
    const domRef = (0, react_1.useRef)(null);
    const [focused, setFocused] = (0, react_1.useState)(false);
    const onFocus = (e) => {
        if (e.target === selectRef.current) {
            setFocused(true);
            return;
        }
        if (e.target === domRef.current) {
            selectRef.current.focus();
        }
    };
    const onBlur = () => {
        setFocused(false);
    };
    const defaultLabel = selectedOption ? selectedOption.label : null;
    let selectedText = props.renderLabel
        ? props.renderLabel(defaultLabel, selectedOption)
        : defaultLabel;
    if (!selectedOption) {
        selectedText = placeholder;
    }
    //20  ... 20 16
    const renderClearButton = () => (React.createElement(SimpleButton_1.default, { variant: "text", icon: "close", tone: "none", tooltip: "Clear", iconSize: 20, px: 0, py: 0, marginRight: 1, ...clearButtonProps, style: {
            zIndex: 10,
            color: 'inherit',
            ...(clearButtonProps ? clearButtonProps.style : null),
        }, onClick: (e) => {
            e.preventDefault();
            onChange(null, e);
        } }));
    return (React.createElement(rebass_1.Flex, { ref: domRef, flexDirection: "row", alignItems: "center", ...boxProps, className: (0, join_1.default)(props.className, baseClassName, !selectedOption ? `${baseClassName}--empty` : `${baseClassName}--not-empty`, focused ? `${baseClassName}--focused` : `${baseClassName}--not-focused`, disabled ? `${baseClassName}--disabled` : null), style: style, tabIndex: focused ? -1 : props.tabIndex || 0, onFocus: onFocus, onBlur: onBlur },
        React.createElement("div", { style: { display: 'inline-block' }, className: `${baseClassName}__text` },
            selectedText,
            React.createElement(Arrows_1.default, null)),
        React.createElement("select", { ref: selectRef, tabIndex: -1, disabled: disabled, value: value == null ? '' : value, onChange: (e) => {
                const selected = finalOptions.filter((o) => o.value == e.target.value)[0];
                onChange(selected, e);
            }, style: {
                opacity: 0,
                width: '100%',
                height: '100%',
                top: 0,
                left: 0,
                zIndex: 1,
            }, onMouseDown: onMouseDown, name: name, multiple: multiple, autoFocus: autoFocus }, finalOptions.map((o) => {
            return (React.createElement("option", { key: o.value, value: o.value }, o.label));
        })),
        showClearButton && selectedOption ? renderClearButton() : null));
};
exports.default = Dropdown;
