"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MessageBox = void 0;
// ============================================================================
// Chatbot Main - Messages
// ============================================================================
const react_1 = __importDefault(require("react"));
const JumpButton_1 = __importDefault(require("./JumpButton"));
const MessageBoxBase = ({ announcement, ariaLabel = 'Scrollable message log', children, innerRef, className, position = 'top' }) => {
    const [atTop, setAtTop] = react_1.default.useState(false);
    const [atBottom, setAtBottom] = react_1.default.useState(true);
    const [isOverflowing, setIsOverflowing] = react_1.default.useState(false);
    const defaultRef = react_1.default.useRef(null);
    let messageBoxRef;
    if (innerRef) {
        messageBoxRef = innerRef;
    }
    else {
        messageBoxRef = defaultRef;
    }
    // Configure handlers
    const handleScroll = react_1.default.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
        }
    }, []);
    const checkOverflow = react_1.default.useCallback(() => {
        const element = messageBoxRef.current;
        if (element) {
            const { scrollHeight, clientHeight } = element;
            setIsOverflowing(scrollHeight >= clientHeight);
        }
    }, []);
    const scrollToTop = react_1.default.useCallback(() => {
        const element = messageBoxRef.current;
        if (element) {
            element.scrollTo({ top: 0, behavior: 'smooth' });
        }
    }, []);
    const scrollToBottom = react_1.default.useCallback(() => {
        const element = messageBoxRef.current;
        if (element) {
            element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' });
        }
    }, []);
    // Detect scroll position
    react_1.default.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]);
    return (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement(JumpButton_1.default, { position: "top", isHidden: isOverflowing && atTop, onClick: scrollToTop }),
        react_1.default.createElement("div", { 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 },
            children,
            react_1.default.createElement("div", { className: "pf-chatbot__messagebox-announcement", "aria-live": "polite" }, announcement)),
        react_1.default.createElement(JumpButton_1.default, { position: "bottom", isHidden: isOverflowing && atBottom, onClick: scrollToBottom })));
};
exports.MessageBox = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(MessageBoxBase, Object.assign({ innerRef: ref }, props))));
exports.default = exports.MessageBox;
