"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useItemPosition = void 0;
const sdk_1 = require("@cntrl-site/sdk");
const useKeyframeValue_1 = require("../common/useKeyframeValue");
const getItemTopStyle_1 = require("../utils/getItemTopStyle");
const useLayoutContext_1 = require("./useLayoutContext");
const useItemPosition = (item, sectionId) => {
    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
    const position = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Position, (item, layoutId) => {
        if (!layoutId)
            return;
        return item.area[layoutId];
    }, (animator, scroll, value) => value ? animator.getPositions(value, scroll) : undefined, sectionId, [layoutId]);
    const anchorSide = layoutId ? item.area[layoutId].anchorSide : sdk_1.AnchorSide.Top;
    const positionType = layoutId ? item.area[layoutId].positionType : sdk_1.PositionType.ScreenBased;
    // tp prevent fixed item (with anchor point bottom) to jump when scroll in safari on mobile
    const isScreenBasedBottom = positionType === sdk_1.PositionType.ScreenBased && anchorSide === sdk_1.AnchorSide.Bottom;
    return position ? {
        bottom: isScreenBasedBottom ? `${-position.top * 100}vw` : 'unset',
        top: isScreenBasedBottom ? 'unset' : (0, getItemTopStyle_1.getItemTopStyle)(position.top, anchorSide),
        left: `${position.left * 100}vw`
    } : undefined;
};
exports.useItemPosition = useItemPosition;
