import { jsxs, jsx } from "react/jsx-runtime";
import { ScrollArea, mergeRefs } from "@choiceform/design-system";
import { memo, useMemo } from "react";
import { ConversationTv } from "../tv.js";
import { LoadMoreButton } from "./load-more-button.js";
import { ScrollToBottomButton } from "./scroll-to-bottom-button.js";
import { useResizeObserver } from "../../../_vendor/usehooks-ts/dist-index.js";
import { useStickToBottom } from "../../../_vendor/use-stick-to-bottom/dist-useStickToBottom.js";
const LOAD_MORE_BUTTON_HEIGHT = 40;
const ScrollContainer = memo(function ScrollContainer2(props) {
  const {
    scrollContainerRef,
    virtualizer,
    messages,
    shouldShowLoadMore,
    hasMore,
    isLoading,
    totalCount,
    onLoadMore,
    children,
    className
  } = props;
  const tv = ConversationTv();
  const { scrollRef, contentRef, isAtBottom, scrollToBottom } = useStickToBottom({
    resize: "smooth",
    initial: "instant"
  });
  const { height = 0 } = useResizeObserver({
    ref: scrollContainerRef,
    box: "border-box"
  });
  const lastIndex = messages.length - 1;
  const secondLastIndex = messages.length - 2;
  const lastTwoItemsHeight = useMemo(() => {
    return (lastIndex >= 0 ? virtualizer.measurementsCache[lastIndex]?.size || 0 : 0) + (secondLastIndex >= 0 ? virtualizer.measurementsCache[secondLastIndex]?.size || 0 : 0);
  }, [lastIndex, secondLastIndex, virtualizer.measurementsCache]);
  return /* @__PURE__ */ jsxs("div", { className: tv.root({ className }), children: [
    /* @__PURE__ */ jsx(ScrollArea, { hoverBoundary: "none", children: /* @__PURE__ */ jsx(
      ScrollArea.Viewport,
      {
        ref: mergeRefs(scrollRef, scrollContainerRef),
        className: tv.viewport(),
        style: {
          height: "var(--viewport-height, 100%)",
          paddingBottom: `calc(var(--viewport-height, ${height}px) - ${lastTwoItemsHeight}px - 40px)`
        },
        children: /* @__PURE__ */ jsxs(
          ScrollArea.Content,
          {
            ref: contentRef,
            className: tv.content(),
            style: {
              height: virtualizer.getTotalSize() + (shouldShowLoadMore ? LOAD_MORE_BUTTON_HEIGHT : 0),
              maxWidth: "var(--max-width, 100%)"
            },
            children: [
              shouldShowLoadMore && /* @__PURE__ */ jsx(
                LoadMoreButton,
                {
                  hasMore,
                  isLoading,
                  onLoadMore,
                  totalCount,
                  loadedCount: messages.length
                }
              ),
              virtualizer.getVirtualItems().map((virtualItem) => {
                const message = messages[virtualItem.index];
                return /* @__PURE__ */ jsx(
                  "div",
                  {
                    "data-index": virtualItem.index,
                    ref: virtualizer.measureElement,
                    className: tv.virtualItems(),
                    style: {
                      transform: `translateY(${virtualItem.start + (shouldShowLoadMore ? LOAD_MORE_BUTTON_HEIGHT : 0)}px)`
                    },
                    children: children ? children(message, message.contentSegments || [], virtualItem.index) : null
                  },
                  virtualItem.key
                );
              })
            ]
          }
        )
      }
    ) }),
    /* @__PURE__ */ jsx(
      ScrollToBottomButton,
      {
        shouldShow: !isAtBottom,
        scrollToBottom
      }
    )
  ] });
});
export {
  ScrollContainer
};
//# sourceMappingURL=scroll-container.js.map
