var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
// ============================================================================
// Chatbot Main - Messages
// ============================================================================
import React from 'react';
import JumpButton from './JumpButton';
const MessageBoxBase = (_a) => {
    var { announcement, ariaLabel = 'Scrollable message log', children, innerRef, className, position = 'top', onScrollToTopClick, onScrollToBottomClick } = _a, props = __rest(_a, ["announcement", "ariaLabel", "children", "innerRef", "className", "position", "onScrollToTopClick", "onScrollToBottomClick"]);
    const [atTop, setAtTop] = React.useState(false);
    const [atBottom, setAtBottom] = React.useState(true);
    const [isOverflowing, setIsOverflowing] = React.useState(false);
    const defaultRef = React.useRef(null);
    let messageBoxRef;
    if (innerRef) {
        messageBoxRef = innerRef;
    }
    else {
        messageBoxRef = defaultRef;
    }
    // Configure handlers
    const handleScroll = React.useCallback(() => {
        const element = messageBoxRef.current;
        if (element) {
            const { scrollTop, scrollHeight, clientHeight } = element;
            setAtTop(scrollTop === 0);
            setAtBottom(Math.round(scrollTop) + Math.round(clientHeight) >= Math.round(scrollHeight) - 1); // rounding means it could be within a pixel of the bottom
        }
    }, [messageBoxRef]);
    const checkOverflow = React.useCallback(() => {
        const element = messageBoxRef.current;
        if (element) {
            const { scrollHeight, clientHeight } = element;
            setIsOverflowing(scrollHeight >= clientHeight);
        }
    }, [messageBoxRef]);
    const scrollToTop = React.useCallback(() => {
        const element = messageBoxRef.current;
        if (element) {
            element.scrollTo({ top: 0, behavior: 'smooth' });
        }
        onScrollToTopClick && onScrollToTopClick();
    }, [messageBoxRef]);
    const scrollToBottom = React.useCallback(() => {
        const element = messageBoxRef.current;
        if (element) {
            element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' });
        }
        onScrollToBottomClick && onScrollToBottomClick();
    }, [messageBoxRef]);
    // Detect scroll position
    React.useEffect(() => {
        const element = messageBoxRef.current;
        if (element) {
            // Listen for scroll events
            element.addEventListener('scroll', handleScroll);
            // Check initial position and overflow
            handleScroll();
            checkOverflow();
            return () => {
                element.removeEventListener('scroll', handleScroll);
            };
        }
    }, [checkOverflow, handleScroll, messageBoxRef]);
    return (React.createElement(React.Fragment, null,
        React.createElement(JumpButton, { position: "top", isHidden: isOverflowing && atTop, onClick: scrollToTop }),
        React.createElement("div", Object.assign({ role: "region", tabIndex: 0, "aria-label": ariaLabel, className: `pf-chatbot__messagebox ${position === 'bottom' && 'pf-chatbot__messagebox--bottom'} ${className !== null && className !== void 0 ? className : ''}`, ref: innerRef !== null && innerRef !== void 0 ? innerRef : messageBoxRef }, props),
            children,
            React.createElement("div", { className: "pf-chatbot__messagebox-announcement", "aria-live": "polite" }, announcement)),
        React.createElement(JumpButton, { position: "bottom", isHidden: isOverflowing && atBottom, onClick: scrollToBottom })));
};
export const MessageBox = React.forwardRef((props, ref) => (React.createElement(MessageBoxBase, Object.assign({ innerRef: ref }, props))));
export default MessageBox;
