import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cx from 'classnames';
import { useEffect, useRef, useState } from 'react';
import DropdownList from '../DropdownList';
import Icon from '../Icon';
import './styles.scss';
export const DropdownButtonSizes = [
    'large',
    'medium',
    'small',
    'x-small',
];
export const DropdownButtonColors = [
    'primary',
    'secondary',
    'tertiary',
];
export default function DropdownButton({ text, list, className = '', disabled = false, active = false, color = 'primary', size = 'large', onSelect, hideDivider, right, icon, }) {
    const [show, setShow] = useState(false);
    const containerRef = useRef(null);
    useEffect(() => {
        const handleClickOutside = (event) => {
            if (containerRef.current &&
                !containerRef.current.contains(event.target)) {
                setShow(false);
            }
        };
        if (show) {
            document.addEventListener('mousedown', handleClickOutside);
        }
        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, [show]);
    const getClassNames = cx('ds-dropdown-button', className, size, color, {
        active: !disabled && active,
    });
    return (_jsxs("div", { className: "ds-dropdown-container", ref: containerRef, children: [_jsxs("button", { type: "button", disabled: disabled, className: getClassNames, onClick: () => setShow(!show), children: [_jsxs("div", { className: "left-side", children: [icon && _jsx(Icon, { name: icon, className: "icon-custom" }), _jsx("span", { className: "text", children: text })] }), !hideDivider && _jsx("div", { className: "divider", children: "\u00A0" }), _jsx(Icon, { name: "arrow_drop_down", className: "icon-arrow" })] }), show && (_jsx(DropdownList, { right: right, list: list, onSelect: (s) => {
                    onSelect && onSelect(s);
                    setTimeout(function () {
                        setShow(false);
                    }, 200);
                } }))] }));
}
