import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { MenuWrapper, ToggleButton } from "./styled";
import { useCallback, useEffect, useRef, useState, } from "react";
import cn from "classnames";
import { Box, Row } from "../grid";
import { CloseIcon } from "./img/close";
import { ShareIcon } from "./img/share";
export const SpeedMenu = ({ items = [], placement = "left", direction = "up", animationDelay = 0.1, space = 23, elementsSize = 48, menuIcon = (_jsx(Box, { pr: "3px", children: _jsx(Row, { alignItems: "center", children: _jsx(ShareIcon, {}) }) })), closeIcon = _jsx(CloseIcon, {}), ...props }) => {
    const menuRef = useRef(null);
    const [isAnimating, setAnimating] = useState(false);
    const [isOpen, setIsOpen] = useState(false);
    const [[axis, quadrupleCoef], setLocation] = useState([
        "Y",
        -1,
    ]);
    const [listSize, setListSize] = useState({ height: 0, width: 0 });
    const onMenuToggle = useCallback(() => {
        if (isAnimating)
            return;
        setIsOpen((isOpen) => !isOpen);
    }, [isAnimating]);
    useEffect(() => {
        switch (direction) {
            case "up":
                setLocation(["Y", -1]);
                break;
            // case "down":
            //   setLocation(["Y", 1])
            //   break
            case "right":
                setLocation(["X", 1]);
                break;
            case "left":
                setLocation(["X", -1]);
        }
    }, [direction]);
    useEffect(() => {
        const animationTime = animationDelay * items?.length * 1_000;
        if (axis === "Y") {
            if (isOpen) {
                setListSize({
                    height: items.length * elementsSize + items.length * space,
                    width: elementsSize,
                });
            }
            else {
                setTimeout(() => setListSize({ height: 0, width: elementsSize }), animationTime);
            }
        }
        else {
            if (isOpen) {
                setListSize({
                    width: items.length * elementsSize + items.length * space,
                    height: elementsSize,
                });
            }
            else {
                setTimeout(() => setListSize({ width: 0, height: elementsSize }), animationTime);
            }
        }
        setAnimating(true);
        setTimeout(() => setAnimating(false), animationTime);
    }, [animationDelay, axis, elementsSize, isOpen, items.length, space]);
    // scroll to bottom
    useEffect(() => {
        menuRef.current?.scroll({
            top: 99999,
            left: 0,
        });
    }, [listSize]);
    const animateListItem = useCallback((index, countOfItems) => {
        if (placement === "right" && axis === "X" && quadrupleCoef === -1) {
            return {
                transform: isOpen
                    ? `translate${axis}(${quadrupleCoef * (index + 1) * (elementsSize + space) +
                        listSize.width}px)`
                    : `translate${axis}(${elementsSize + listSize.width}px) scale(0)`,
                transitionDelay: (isOpen
                    ? (countOfItems - index) * animationDelay
                    : (index + 1) * animationDelay) + "s",
            };
        }
        return {
            transform: isOpen
                ? `translate${axis}(${quadrupleCoef * (index + 1) * (elementsSize + space) -
                    quadrupleCoef * elementsSize}px)`
                : `translate${axis}(${elementsSize}px) scale(0)`,
            transitionDelay: (isOpen
                ? (countOfItems - index) * animationDelay
                : (index + 1) * animationDelay) + "s",
        };
    }, [
        animationDelay,
        axis,
        elementsSize,
        isOpen,
        listSize.width,
        placement,
        quadrupleCoef,
        space,
    ]);
    return (_jsxs(MenuWrapper, { ref: menuRef, ...props, style: {
            ...{
                minWidth: elementsSize,
                minHeight: elementsSize,
            },
            ...props.style,
        }, className: cn("ui-speed-menu__nav", isOpen && "open", props.className), placement: placement, axis: axis, children: [_jsx("ul", { className: "ui-speed-menu__list", style: listSize, children: items.map((element, index, array) => (_jsx("li", { className: "ui-speed-menu__list-item", style: {
                        ...animateListItem(index, array.length),
                        width: elementsSize,
                        height: elementsSize,
                    }, children: element }, index))) }), _jsx(ToggleButton, { className: cn("ui-speed-menu__button", isOpen && "active"), onClick: onMenuToggle, width: `${elementsSize}px`, height: `${elementsSize}px`, children: isOpen ? closeIcon : menuIcon })] }));
};
//# sourceMappingURL=index.js.map