/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b04eed0 | Cube Dev Team */
import { UpIcon } from "./UpIcon.js";
import { tasty } from "@tenphi/tasty";
import { memo, useEffect, useRef, useState } from "react";
import { jsx } from "react/jsx-runtime";

//#region src/icons/DirectionIcon.tsx
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
};
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);
	const lastDirection = lastDirectionRef.current;
	useEffect(() => {
		if (lastDirection === direction || !DIRECTIONS.includes(direction)) return;
		const diffRotate = rotationByDirection[lastDirection] - rotationByDirection[direction];
		const angle = Math.abs(diffRotate) % 360;
		if (angle === 180) setFlipScale((prev) => -prev);
		else {
			let shortestDiff = diffRotate;
			if (angle > 180) shortestDiff = diffRotate > 0 ? diffRotate - 360 : diffRotate + 360;
			setRotate((prev) => prev - shortestDiff);
		}
		lastDirectionRef.current = direction;
	}, [direction]);
	return /* @__PURE__ */ jsx(StyledUpIcon, {
		"data-direction": direction,
		...iconProps,
		style: {
			rotate: `${rotate}deg`,
			transform: `scaleY(${flipScale})`
		}
	});
});

//#endregion
export { DirectionIcon };
//# sourceMappingURL=DirectionIcon.js.map