import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef, useState } from "react";
import record_icon from '../assets/images/record.png';
import send_icon from '../assets/images/send.png';
import stop_icon from '../assets/images/stop.png';
import { defaultTheme } from "../constants";
import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';
const Messageinput = (props) => {
    const [value, setValue] = useState(props.initialState ? props.initialState : "");
    const [mode, setMode] = useState("blur");
    const [enabelRecording, setEnableRecording] = useState(false);
    const { transcript, resetTranscript, browserSupportsSpeechRecognition } = useSpeechRecognition();
    const messageInputRef = useRef(null);
    const handleKeyDown = (event) => {
        if (!event.shiftKey && event.key === "Enter" && value.trim().length > 0) {
            send();
        }
    };
    const send = () => {
        setValue("");
        resetTranscript();
        setTimeout(() => {
            if (enabelRecording) {
                //console.log("Recording Status 1",enabelRecording);
                setEnableRecording(false);
            }
            props.eventHandler({ name: "send-message", data: value });
        }, 100);
    };
    useEffect(() => {
        if (enabelRecording && browserSupportsSpeechRecognition) {
            messageInputRef.current.focus = true;
            SpeechRecognition.startListening({ continuous: true });
        }
        else {
            SpeechRecognition.stopListening();
        }
    }, [enabelRecording]);
    useEffect(() => {
        transcript.length > 0 ? setValue(transcript) : null;
    }, [transcript]);
    useEffect(() => {
        if (messageInputRef.current) {
            messageInputRef.current.style.height = 'auto';
            messageInputRef.current.style.height = messageInputRef.current.scrollHeight + "px";
        }
    }, [value]);
    const onFocus = () => {
        if (enabelRecording) {
            setEnableRecording(false);
        }
    };
    useEffect(() => {
        if (props.data.functionMode == "design") {
            setValue("This is a sample message");
        }
    }, []);
    console.log("Message Inmput", props.data.theme);
    return (_jsxs("div", { className: "avamodule-messageinput-wrapper", style: { backgroundColor: props.data.theme?.textInputBox.backgroundColor ?? (defaultTheme.textInputBox.backgroundColor) }, children: [_jsx("div", { className: "avamodule-messageinput-input-wrapper", children: _jsx("textarea", { onFocus: onFocus, style: { display: "flex", flex: 1, color: props.data.theme?.textInputBox.textColor ?? (defaultTheme.textInputBox.textColor) }, readOnly: props.data.functionMode == "preview", rows: 1, ref: messageInputRef, value: value, onKeyDown: (props.data.functionMode == "functional" || props.data.functionMode == "avakado") ? handleKeyDown : () => { }, onChange: (e) => setValue(e.target.value), className: 'avamodule-input' }) }), _jsxs("div", { className: "avamodule-messageinput-actions-wrapper", children: [_jsx("button", { onClick: (props.data.functionMode == "functional" || props.data.functionMode == "avakado") ? () => setEnableRecording(true) : () => { }, style: { backgroundColor: 'transparent', border: "none", padding: 0 }, children: _jsx("img", { src: record_icon, style: { width: !enabelRecording ? "auto" : "0px" }, className: 'avamodule-general-icon' }) }), _jsx("button", { onClick: (props.data.functionMode == "functional" || props.data.functionMode == "avakado") ? () => setEnableRecording(false) : () => { }, style: { backgroundColor: 'transparent', border: "none", padding: 0 }, children: _jsx("img", { src: stop_icon, style: { width: enabelRecording ? "auto" : "0px" }, className: 'avamodule-general-icon' }) }), _jsx("button", { onClick: (props.data.functionMode == "functional" || props.data.functionMode == "avakado") ? send : () => { }, style: { backgroundColor: 'transparent', border: "none", padding: 0 }, children: _jsx("img", { src: send_icon, style: { width: value.length > 0 ? "auto" : "0px" }, className: 'avamodule-general-icon' }) })] })] }));
};
const Textbox = () => {
};
const Dynamicplaceholder = () => {
    const placeholders = useRef([
        "university"
    ]).current;
    const [index, setIndex] = useState();
    return (_jsx("div", { style: { flex: 1, display: "flex", flexDirection: "row", alignItems: "center" }, children: _jsx("p", { children: "You can ask me about" }) }));
};
export default Messageinput;
//# sourceMappingURL=Messageinput.js.map