import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { renderToString } from "react-dom/server";
import buildGrid, { getTime } from "./utils";
/**
 * Creates an svg that transitions from a square grid to rounded corners and them shrinks the balls to reveal the content
 * @param amountOfVerticalSquares The amount of squares vertically to be shown
 */
export default function (amountOfVerticalSquares = 10) {
    return function (el) {
        const height = el.clientHeight;
        const width = el.clientWidth;
        const _ballsize = height / amountOfVerticalSquares;
        const maximumBalls = width / _ballsize;
        const amountOfBalls = Math.floor(maximumBalls);
        const time = getTime(el);
        const resultSvg = renderToString(_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", id: Date.now().toString(), children: buildGrid(amountOfVerticalSquares, amountOfBalls, _ballsize).map(({ ballSize, x, y }) => {
                return (_jsxs("rect", { fill: "white", children: [_jsx("animate", { attributeName: "rx", attributeType: "XML", values: `${0}px;${ballSize / 2}px;${ballSize / 2}px`, dur: `${time}ms` }), _jsx("animate", { attributeName: "x", attributeType: "XML", values: `${x}px;${x}px;${x + ballSize / 2}px`, dur: `${time}ms` }), _jsx("animate", { attributeName: "y", attributeType: "XML", values: `${y}px;${y}px;${y + ballSize / 2}px`, dur: `${time}ms` }), _jsx("animate", { attributeName: "width", attributeType: "XML", values: `${ballSize}px;${ballSize}px;${0}px`, dur: `${time}ms` }), _jsx("animate", { attributeName: "height", attributeType: "XML", values: `${ballSize}px;${ballSize}px;${0}px`, dur: `${time}ms` })] }));
            }) }));
        return `url('data:image/svg+xml;charset=utf8,${encodeURIComponent(resultSvg)}')`;
    };
}
//# sourceMappingURL=SquareToBalls.js.map