"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Article = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const style_1 = __importDefault(require("styled-jsx/style"));
const Section_1 = require("./Section");
const Item_1 = require("./Item");
const useArticleRectObserver_1 = require("../utils/ArticleRectManager/useArticleRectObserver");
const ArticleRectContext_1 = require("../provider/ArticleRectContext");
const ArticleWrapper_1 = require("./ArticleWrapper");
const Article = ({ article, sectionData }) => {
    const articleRef = (0, react_1.useRef)(null);
    const articleRectObserver = (0, useArticleRectObserver_1.useArticleRectObserver)(articleRef.current);
    const id = (0, react_1.useId)();
    const [articleHeight, setArticleHeight] = (0, react_1.useState)(1);
    (0, react_1.useEffect)(() => {
        if (!articleRectObserver)
            return;
        return articleRectObserver.on('resize', (rect) => {
            setArticleHeight(rect.height / rect.width);
        });
    }, [articleRectObserver]);
    return ((0, jsx_runtime_1.jsxs)(ArticleRectContext_1.ArticleRectContext.Provider, { value: articleRectObserver, children: [(0, jsx_runtime_1.jsx)(ArticleWrapper_1.ArticleWrapper, { children: (0, jsx_runtime_1.jsx)("div", { className: "article", ref: articleRef, children: article.sections.map((section, i) => {
                        const data = section.name ? sectionData[section.name] : {};
                        return ((0, jsx_runtime_1.jsx)(Section_1.Section, { section: section, data: data, children: article.sections[i].items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: section.id, articleHeight: articleHeight }, item.id))) }, section.id));
                    }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
       .article {
            position: relative;
            overflow: clip;
          }
      ` })] }));
};
exports.Article = Article;
