import React, { useCallback, useState } from 'react';
import { DropdownMenuPopup } from './DropdownMenuPopup';
import { DropdownMenuWrapDiv, DropdownMenuDotsDiv, DropdownMenuDotI, DropdownMenuButtonDiv, PlusCircleIconSVG, } from './styled';
import { VariantDropdownMenu } from './types';
const DropdownMenu = ({ list, className, variant = VariantDropdownMenu.default, button, }) => {
    const [showPopup, setShowPopup] = useState(false);
    const togglePopupVisibility = useCallback(() => setShowPopup(!showPopup), [showPopup]);
    return (React.createElement(DropdownMenuWrapDiv, { className: className },
        (button === null || button === void 0 ? void 0 : button.title) ? (React.createElement(DropdownMenuButtonDiv, { active: showPopup, onClick: togglePopupVisibility },
            (button === null || button === void 0 ? void 0 : button.icon) ? button.icon : React.createElement(PlusCircleIconSVG, null),
            button.title,
            "...")) : (React.createElement(DropdownMenuDotsDiv, { active: showPopup, onClick: togglePopupVisibility, variant: variant },
            React.createElement(DropdownMenuDotI, { variant: variant }),
            React.createElement(DropdownMenuDotI, { variant: variant }),
            React.createElement(DropdownMenuDotI, { variant: variant }))),
        showPopup && React.createElement(DropdownMenuPopup, { list: list, onClose: togglePopupVisibility })));
};
export default DropdownMenu;
