import { jsx } from "react/jsx-runtime";
import { styled } from "@mui/material/styles";
import apollo_core from "@uipath/apollo-core";
import react from "react";
import { useChatService } from "../../providers/chat-service.provider.js";
import { useChatState } from "../../providers/chat-state-provider.js";
import { useChatWidth } from "../../providers/chat-width-provider.js";
import { AutopilotChatInternalEvent, CHAT_WIDTH_KEY, CHAT_WIDTH_SIDE_BY_SIDE_MAX, CHAT_WIDTH_SIDE_BY_SIDE_MIN, StorageService } from "../../service/index.js";
const DragHandleContainer = styled('div')(()=>({
        position: 'absolute',
        left: 0,
        top: 0,
        width: apollo_core.Border.BorderThickS,
        height: '100%',
        background: 'var(--color-border-de-emp)',
        cursor: 'ew-resize',
        transition: 'background 0.2s ease',
        userSelect: 'none',
        zIndex: 2,
        '&::before': {
            content: '""',
            position: 'absolute',
            top: 0,
            left: -7,
            width: 15,
            height: '100%',
            cursor: 'ew-resize',
            userSelect: 'none',
            zIndex: 2
        },
        '&:hover, &:focus, &:active': {
            background: 'var(--color-focus-indicator)',
            outline: 'none'
        }
    }));
const Border = styled('div')(()=>({
        position: 'absolute',
        left: 0,
        top: 0,
        width: apollo_core.Border.BorderThickS,
        height: '100%',
        background: 'var(--color-border-de-emp)'
    }));
function DragHandleComponent() {
    const isDraggingRef = react.useRef(false);
    const startXRef = react.useRef(0);
    const startWidthRef = react.useRef(0);
    const { width, setWidth, setShouldAnimate } = useChatWidth();
    const chatInternalService = useChatService().__internalService__;
    const { disabledFeatures } = useChatState();
    const widthRef = react.useRef(width);
    widthRef.current = width;
    const handleMouseMove = react.useCallback((e)=>{
        if (!isDraggingRef.current) return;
        const delta = startXRef.current - e.clientX;
        const newWidth = Math.min(Math.max(startWidthRef.current + delta, CHAT_WIDTH_SIDE_BY_SIDE_MIN), CHAT_WIDTH_SIDE_BY_SIDE_MAX);
        widthRef.current = newWidth;
        chatInternalService.publish(AutopilotChatInternalEvent.ChatResize, newWidth);
        setWidth(newWidth);
    }, [
        setWidth,
        chatInternalService
    ]);
    const handleMouseUp = react.useCallback(()=>{
        isDraggingRef.current = false;
        document.removeEventListener('mousemove', handleMouseMove);
        document.removeEventListener('mouseup', handleMouseUp);
        StorageService.Instance.set(CHAT_WIDTH_KEY, widthRef.current.toString());
    }, [
        handleMouseMove
    ]);
    const handleMouseDown = react.useCallback((e)=>{
        e.preventDefault();
        isDraggingRef.current = true;
        startXRef.current = e.clientX;
        startWidthRef.current = widthRef.current;
        document.addEventListener('mousemove', handleMouseMove);
        document.addEventListener('mouseup', handleMouseUp);
    }, [
        handleMouseMove,
        handleMouseUp
    ]);
    const handleKeyDown = react.useCallback((e)=>{
        const step = 10;
        if (widthRef.current < CHAT_WIDTH_SIDE_BY_SIDE_MIN || widthRef.current > CHAT_WIDTH_SIDE_BY_SIDE_MAX) return;
        if ('ArrowLeft' === e.key) {
            e.preventDefault();
            const newWidth = Math.min(widthRef.current + step, CHAT_WIDTH_SIDE_BY_SIDE_MAX);
            widthRef.current = newWidth;
            setWidth(newWidth);
            chatInternalService.publish(AutopilotChatInternalEvent.ChatResize, newWidth);
            setShouldAnimate(true);
        } else if ('ArrowRight' === e.key) {
            e.preventDefault();
            const newWidth = Math.max(widthRef.current - step, CHAT_WIDTH_SIDE_BY_SIDE_MIN);
            widthRef.current = newWidth;
            setWidth(newWidth);
            chatInternalService.publish(AutopilotChatInternalEvent.ChatResize, newWidth);
            setShouldAnimate(true);
        }
    }, [
        setWidth,
        setShouldAnimate,
        chatInternalService
    ]);
    const handleKeyUp = react.useCallback(()=>{
        setShouldAnimate(false);
        StorageService.Instance.set(CHAT_WIDTH_KEY, widthRef.current.toString());
    }, [
        setShouldAnimate
    ]);
    react.useEffect(()=>()=>{
            document.removeEventListener('mousemove', handleMouseMove);
            document.removeEventListener('mouseup', handleMouseUp);
        }, [
        handleMouseMove,
        handleMouseUp
    ]);
    if (disabledFeatures.resize) return /*#__PURE__*/ jsx(Border, {});
    return /*#__PURE__*/ jsx(DragHandleContainer, {
        onMouseDown: handleMouseDown,
        onKeyDown: handleKeyDown,
        onKeyUp: handleKeyUp,
        tabIndex: 0,
        role: "separator",
        "aria-valuenow": width,
        "aria-valuemin": CHAT_WIDTH_SIDE_BY_SIDE_MIN,
        "aria-valuemax": CHAT_WIDTH_SIDE_BY_SIDE_MAX
    });
}
const DragHandle = /*#__PURE__*/ react.memo(DragHandleComponent);
export { DragHandle };
