import { jsx } from "react/jsx-runtime";
import styled from "@emotion/styled";
import apollo_core from "@uipath/apollo-core";
import react from "react";
import { ApSkeleton } from "../../../ap-skeleton/index.js";
import { useChatScroll } from "../../providers/chat-scroll-provider.js";
const SkeletonLoaderContainer = styled('div')(()=>({
        width: '100%',
        display: 'flex',
        flexDirection: 'column',
        gap: apollo_core.Spacing.SpacingBase
    }));
const SKELETON_HEIGHT = 32;
const SKELETON_GAP = Number(apollo_core.Spacing.SpacingBase.replace('px', ''));
const SkeletonLoader = ()=>{
    const [skeletonCount, setSkeletonCount] = react.useState(0);
    const { overflowContainer } = useChatScroll();
    react.useEffect(()=>{
        const calculateSkeletonCount = ()=>{
            if (overflowContainer) {
                const height = overflowContainer.clientHeight;
                const count = Math.floor(height / (SKELETON_HEIGHT + SKELETON_GAP));
                setSkeletonCount(count);
            }
        };
        calculateSkeletonCount();
        window.addEventListener('resize', calculateSkeletonCount);
        return ()=>window.removeEventListener('resize', calculateSkeletonCount);
    }, [
        overflowContainer
    ]);
    return /*#__PURE__*/ jsx(SkeletonLoaderContainer, {
        children: [
            ...Array(skeletonCount)
        ].map((_, index)=>/*#__PURE__*/ jsx("div", {
                children: /*#__PURE__*/ jsx(ApSkeleton, {
                    style: {
                        width: index % 3 === 0 ? '90%' : index % 2 === 0 ? '80%' : '70%',
                        height: `${SKELETON_HEIGHT}px`
                    }
                })
            }, index))
    });
};
export { SkeletonLoader };
