"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useKeyframeValue = void 0;
const lodash_isequal_1 = __importDefault(require("lodash.isequal"));
const react_1 = require("react");
const ArticleRectContext_1 = require("../provider/ArticleRectContext");
const KeyframesContext_1 = require("../provider/KeyframesContext");
const Animator_1 = require("../utils/Animator/Animator");
const useLayoutContext_1 = require("../components/useLayoutContext");
const emptyDeps = [];
const useKeyframeValue = (item, type, itemParamsGetter, animatorGetter, sectionId, deps = emptyDeps) => {
    const animatorGetterRef = (0, react_1.useRef)(animatorGetter);
    const itemParamsGetterRef = (0, react_1.useRef)(itemParamsGetter);
    animatorGetterRef.current = animatorGetter;
    itemParamsGetterRef.current = itemParamsGetter;
    const articleRectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
    const keyframesRepo = (0, react_1.useContext)(KeyframesContext_1.KeyframesContext);
    const keyframes = (0, react_1.useMemo)(() => keyframesRepo.getItemKeyframes(item.id).filter(kf => kf.type === type), [item.id, keyframesRepo, type]);
    const paramValue = (0, react_1.useMemo)(() => {
        return itemParamsGetterRef.current(item, layoutId);
    }, [item, layoutId, ...deps]);
    const [adjustedValue, setAdjustedValue] = (0, react_1.useState)(paramValue);
    const adjustedValueRef = (0, react_1.useRef)(adjustedValue);
    adjustedValueRef.current = adjustedValue;
    const animator = (0, react_1.useMemo)(() => {
        if (!layoutId || !keyframes.length)
            return;
        const animationData = keyframes
            .filter(k => k.layoutId === layoutId)
            .map(({ position, type, value }) => ({
            position,
            type,
            value
        }));
        return new Animator_1.Animator(animationData);
    }, [keyframes, layoutId]);
    const handleKeyframeValue = (0, react_1.useCallback)((scroll) => {
        if (!animator)
            return;
        const newValue = animatorGetterRef.current(animator, scroll, paramValue);
        if (!(0, lodash_isequal_1.default)(newValue, adjustedValueRef.current)) {
            setAdjustedValue(newValue);
        }
    }, [animator, paramValue]);
    (0, react_1.useEffect)(() => {
        setAdjustedValue(paramValue);
    }, [paramValue]);
    (0, react_1.useEffect)(() => {
        if (!articleRectObserver || !animator)
            return;
        const scroll = articleRectObserver.getSectionScroll(sectionId);
        handleKeyframeValue(scroll);
    }, [articleRectObserver, handleKeyframeValue, animator]);
    (0, react_1.useEffect)(() => {
        if (!articleRectObserver || !animator)
            return;
        return articleRectObserver.on('resize', () => {
            const scroll = articleRectObserver.getSectionScroll(sectionId);
            handleKeyframeValue(scroll);
        });
    }, [handleKeyframeValue, articleRectObserver, animator]);
    (0, react_1.useEffect)(() => {
        if (!articleRectObserver || !animator)
            return;
        return articleRectObserver.on('scroll', () => {
            const scroll = articleRectObserver.getSectionScroll(sectionId);
            handleKeyframeValue(scroll);
        });
    }, [handleKeyframeValue, articleRectObserver, animator]);
    return keyframes.length ? adjustedValue : paramValue;
};
exports.useKeyframeValue = useKeyframeValue;
