/**
 * @license MIT
 * author: Cube Dev Team
 * @cube-dev/ui-kit v0.0.0-canary-7eefd09
 * Released under the MIT license.
 */

import { jsx as _jsx } from "react/jsx-runtime";
import { memo, useEffect, useRef, useState } from 'react';
import { tasty } from '../tasty/index.js';
import { UpIcon } from './UpIcon.js';
const StyledUpIcon = tasty(UpIcon, {
    styles: {
        transformOrigin: 'center',
        transition: 'rotate linear $transition, transform linear $transition',
    },
});
const DIRECTIONS = ['left', 'right', 'top', 'bottom', 'up', 'down'];
const rotationByDirection = {
    top: 0,
    right: 90,
    bottom: 180,
    left: 270,
    up: 0,
    down: 180,
};
export const DirectionIcon = memo(function DirectionIcon(props) {
    const { to: direction = 'bottom', ...iconProps } = props;
    const lastDirectionRef = useRef(direction);
    const [rotate, setRotate] = useState(rotationByDirection[direction]);
    const [flipScale, setFlipScale] = useState(1); // Tracks flipping: 1 (normal) or -1 (flipped)
    const lastDirection = lastDirectionRef.current;
    useEffect(() => {
        if (lastDirection === direction || !DIRECTIONS.includes(direction)) {
            return;
        }
        const lastRotate = rotationByDirection[lastDirection];
        const nextRotate = rotationByDirection[direction];
        const diffRotate = lastRotate - nextRotate;
        const angle = Math.abs(diffRotate) % 360;
        if (angle === 180) {
            // For 180° changes, flip instead of rotating
            setFlipScale((prev) => -prev);
        }
        else {
            // Find shortest rotation path
            let shortestDiff = diffRotate;
            if (angle > 180) {
                // Wrap around: use the shorter path
                shortestDiff = diffRotate > 0 ? diffRotate - 360 : diffRotate + 360;
            }
            // Apply the shortest rotation path
            setRotate((prev) => prev - shortestDiff);
        }
        lastDirectionRef.current = direction;
    }, [direction]);
    return (_jsx(StyledUpIcon, { "data-direction": direction, ...iconProps, style: {
            rotate: `${rotate}deg`,
            transform: `scaleY(${flipScale})`,
        } }));
});

        