import { jsx } from "react/jsx-runtime";
import { useLingui } from "@lingui/react";
import { styled } from "@mui/material";
import apollo_core from "@uipath/apollo-core";
import react from "react";
import { useChatScroll } from "../../providers/chat-scroll-provider.js";
import { useChatService } from "../../providers/chat-service.provider.js";
import { AutopilotChatEvent, AutopilotChatInternalEvent } from "../../service/index.js";
import { AutopilotChatActionButton } from "../common/action-button.js";
const ScrollButtonContainer = styled('div')(({ visible, bottom, left })=>({
        position: 'fixed',
        bottom,
        left,
        zIndex: 1,
        transitionProperty: 'opacity',
        transitionDuration: '0.3s',
        transitionTimingFunction: 'ease-in-out',
        opacity: visible ? 1 : 0,
        pointerEvents: visible ? 'auto' : 'none',
        '& .MuiIconButton-root': {
            backgroundColor: 'var(--color-background)',
            boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)',
            '&:hover,&:focus': {
                backgroundColor: "var(--color-hover) !important",
                boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.2)'
            },
            '&:active': {
                backgroundColor: "var(--color-hover) !important"
            }
        }
    }));
const ScrollButtonWrapper = styled('div')(()=>({
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: apollo_core.Spacing.SpacingXxl,
        height: apollo_core.Spacing.SpacingXxl,
        backgroundColor: 'transparent'
    }));
function AutopilotChatScrollToBottomButtonComponent({ overflowContainer }) {
    const { _ } = useLingui();
    const [bottom, setBottom] = react.useState(0);
    const [left, setLeft] = react.useState(0);
    const { autoScroll, scrollToBottom } = useChatScroll();
    const chatService = useChatService();
    const chatInternalService = chatService.__internalService__;
    react.useEffect(()=>{
        if (!chatService || !chatInternalService) return;
        let animationFrameRef = null;
        const updatePosition = ()=>{
            animationFrameRef = requestAnimationFrame(()=>{
                if (overflowContainer) {
                    const rect = overflowContainer.getBoundingClientRect();
                    setBottom(Math.round(window.innerHeight - rect.bottom));
                    setLeft(Math.round(rect.left + rect.width / 2 - parseInt(apollo_core.Spacing.SpacingM, 10)));
                }
            });
        };
        const timeout = setTimeout(()=>{
            updatePosition();
        }, 200);
        window.addEventListener('resize', updatePosition);
        const unsubscribeResize = chatInternalService.on(AutopilotChatInternalEvent.ChatResize, updatePosition);
        const unsubscribeModeChange = chatService.on(AutopilotChatEvent.ModeChange, updatePosition);
        return ()=>{
            window.removeEventListener('resize', updatePosition);
            unsubscribeResize();
            unsubscribeModeChange();
            if (animationFrameRef) cancelAnimationFrame(animationFrameRef);
            if (timeout) clearTimeout(timeout);
        };
    }, [
        overflowContainer,
        chatInternalService,
        chatService,
        bottom
    ]);
    const isVisible = !autoScroll;
    return /*#__PURE__*/ jsx(ScrollButtonContainer, {
        visible: isVisible,
        bottom: bottom,
        left: left,
        children: /*#__PURE__*/ jsx(ScrollButtonWrapper, {
            children: /*#__PURE__*/ jsx(AutopilotChatActionButton, {
                iconName: "arrow_downward",
                onClick: ()=>scrollToBottom({
                        force: true
                    }),
                ariaLabel: _({
                    id: 'autopilot-chat.message.scroll-to-bottom'
                }),
                tooltip: isVisible ? _({
                    id: 'autopilot-chat.message.scroll-to-bottom'
                }) : void 0,
                tabIndex: isVisible ? 0 : -1,
                "data-testid": "autopilot-chat-scroll-to-bottom"
            })
        })
    });
}
const AutopilotChatScrollToBottomButton = /*#__PURE__*/ react.memo(AutopilotChatScrollToBottomButtonComponent);
export { AutopilotChatScrollToBottomButton };
