import { jsx } from "react/jsx-runtime";
import { useLingui } from "@lingui/react";
import { styled } from "@mui/material";
import apollo_core from "@uipath/apollo-core";
import { useCallback, useEffect, useRef, useState } from "react";
import { useChatService } from "../../providers/chat-service.provider.js";
import { AutopilotChatEvent } from "../../service/index.js";
import { useAudioInput } from "../audio/chat-audio-input.js";
import { useAudioOutput } from "../audio/chat-audio-output.js";
import { AutopilotChatActionButton } from "../common/action-button.js";
const VoiceButtonContainer = styled('div', {
    shouldForwardProp: (prop)=>'active' !== prop
})(({ active })=>({
        '& .MuiIconButton-root': {
            borderRadius: apollo_core.Border.BorderRadiusM,
            ...active && {
                backgroundColor: "var(--color-foreground) !important",
                '&:hover, &:active, &:focus': {
                    backgroundColor: "var(--color-foreground-de-emp) !important"
                }
            }
        }
    }));
const AlwaysOnVoiceButton = ({ disabled = false, onActiveChange })=>{
    const { _ } = useLingui();
    const [isActive, setIsActive] = useState(false);
    const chatService = useChatService();
    const isActiveRef = useRef(false);
    const onActiveChangeRef = useRef(onActiveChange);
    onActiveChangeRef.current = onActiveChange;
    const { queueOutputAudio, clearOutputAudioQueue } = useAudioOutput();
    useEffect(()=>{
        if (!chatService) return;
        return chatService.on(AutopilotChatEvent.OutputStream, (event)=>{
            if (!isActiveRef.current) return;
            if (event.mediaChunks) {
                for (const chunk of event.mediaChunks)if (chunk.mimeType.startsWith('audio/pcm;')) queueOutputAudio(chunk.mimeType, chunk.data, chunk.sequenceNumber);
            }
            if (event.interrupted) clearOutputAudioQueue();
        });
    }, [
        chatService,
        queueOutputAudio,
        clearOutputAudioQueue
    ]);
    const handleAudioInputStart = useCallback((automaticActivityDetectionEnabled)=>{
        if (!chatService) return;
        isActiveRef.current = true;
        setIsActive(true);
        onActiveChangeRef.current?.(true);
        chatService.sendInputStreamEvent({
            activityStart: {
                automaticActivityDetectionEnabled
            }
        });
    }, [
        chatService
    ]);
    const handleAudioInputEnd = useCallback((sequenceNumber)=>{
        if (!chatService) return;
        isActiveRef.current = false;
        setIsActive(false);
        onActiveChangeRef.current?.(false);
        clearOutputAudioQueue();
        chatService.sendInputStreamEvent({
            activityEnd: {
                sequenceNumber
            }
        });
    }, [
        chatService,
        clearOutputAudioQueue
    ]);
    const handleAudioInputData = useCallback((mimeType, data, sequenceNumber)=>{
        if (!chatService) return;
        chatService.sendInputStreamEvent({
            mediaChunks: [
                {
                    mimeType,
                    data,
                    sequenceNumber
                }
            ]
        });
    }, [
        chatService
    ]);
    const { startAudioInput, stopAudioInput } = useAudioInput({
        handleAudioInputData,
        handleAudioInputStart,
        handleAudioInputEnd
    });
    useEffect(()=>()=>{
            if (isActiveRef.current) {
                isActiveRef.current = false;
                stopAudioInput();
                clearOutputAudioQueue();
                onActiveChangeRef.current?.(false);
            }
        }, [
        stopAudioInput,
        clearOutputAudioQueue
    ]);
    const handleClick = useCallback(async ()=>{
        if (disabled) return;
        if (isActive) stopAudioInput();
        else await startAudioInput(true);
    }, [
        disabled,
        isActive,
        startAudioInput,
        stopAudioInput
    ]);
    const iconColor = disabled ? 'var(--color-foreground-disable)' : isActive ? 'var(--color-background)' : void 0;
    const stopLabel = _({
        id: 'autopilot-chat.input.actions.stop'
    });
    const voiceLabel = _({
        id: 'autopilot-chat.input.actions.voice-interaction'
    });
    return /*#__PURE__*/ jsx(VoiceButtonContainer, {
        active: isActive,
        children: /*#__PURE__*/ jsx(AutopilotChatActionButton, {
            iconName: isActive ? 'stop' : 'graphic_eq',
            tooltip: isActive ? stopLabel : voiceLabel,
            overrideColor: iconColor,
            preventHover: true,
            disabled: disabled,
            onClick: handleClick,
            "data-testid": "autopilot-chat-always-on-voice-button",
            ariaLabel: isActive ? stopLabel : voiceLabel,
            ariaPressed: isActive
        })
    });
};
export { AlwaysOnVoiceButton, VoiceButtonContainer };
