import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { Content, Modal, Option, Selected, Title, Wrapper, Warning, Subscript, } from "./styled";
import { Indicator } from "../indicator";
import Icons from "../icons";
import { useClickOutside, useScrollOutside } from "../../hooks/common";
import { currentTheme } from "../../theme";
import { InnerTitle } from "../input/styled";
/**
 * UI component to select from list
 */
const Select = (props) => {
    const theme = props.theme
        ? { ...currentTheme.select, ...props.theme }
        : currentTheme.select;
    if (props?.width) {
        theme.contentWidth = props?.width;
    }
    const [isOpened, setIsOpened] = React.useState(false);
    const [selected, setSelected] = React.useState(null);
    const ref = React.useRef(null);
    useClickOutside(ref, () => setIsOpened(false));
    useScrollOutside(ref, () => setIsOpened(false), props.scrollElement, props.disableOnScroll, isOpened);
    React.useEffect(() => {
        if (props.preselectedKey) {
            React.Children.forEach(props.children, (child) => {
                if (child && child.key === props.preselectedKey) {
                    setSelected(child);
                }
            });
        }
    }, [props.children, props.preselectedKey]);
    return (_jsxs(Wrapper, { theme: theme, ref: ref, className: `ui-select__wrapper ${props.className ?? ""}`, children: [props.title && (_jsx(Title, { theme: theme, className: "ui-select__title", children: props.title })), _jsxs(Content, { theme: theme, className: "ui-select__content", onClick: () => setIsOpened(!isOpened), error: !!props.error, disabled: !!props.disabled, isInnerTitle: !!props.innerTitle, children: [props.innerTitle && (_jsx(InnerTitle, { theme: theme, className: "ui-input__inner-title", children: props.innerTitle })), _jsx(Selected, { theme: theme, className: "ui-select__selected", children: selected
                            ? selected
                            : props.placeholder
                                ? props.placeholder
                                : React.Children.toArray(props.children)[0] }), !props.disabled && (_jsx(Indicator, { opened: isOpened, width: "10", height: "9", viewBox: "0 0 10 9", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "ui-select__indicator", children: _jsx(Icons.Arrow, {}) }))] }), !props.disabled && isOpened && (_jsx(Modal, { theme: theme, className: "ui-select__modal", fixedDropdownHeight: props.fixedDropdownHeight, children: React.Children.map(props.children, (child) => {
                    return child !== null
                        ? React.cloneElement(child, {
                            onClick: (e) => {
                                setSelected(child);
                                props.onSelect && props.onSelect(child.key);
                                setIsOpened(false);
                                if (child.props.onClick) {
                                    child.props.onClick(e);
                                }
                            },
                        })
                        : null;
                }) })), props.error && typeof props.error !== "boolean" ? (_jsx(Warning, { theme: theme, className: "ui-input__warning", children: props.error })) : (props.subscript && (_jsx(Subscript, { theme: theme, children: props.subscript })))] }));
};
export default Object.assign(Select, { Option });
//# sourceMappingURL=index.js.map