import anime from "animejs";
import useMitt from "@/modules/mitt";
import { useIpc } from '@/modules/ipc';
import { onMounted, onUnmounted, ref, Ref } from "vue";
import keyboardNameMap from "../keyBoardMaps/keyboardNameMap";
import { renderMessage, clientMessage } from '@/modules/message';


function showRecIcon () {

    anime({
        targets: '#recIcon',
        opacity: [0, 0.75],
        scale: [0.0, 1],
        duration: 250,
        easing: 'linear', 
    })

}

function hideRecIcon () {

    anime({
        targets: '#recIcon',
        opacity: [0.75, 0],
        scale: [1, 0],
        duration: 250,
        easing: 'linear', 
    })

}


export default function useAudioInputController (typing: Ref) {

    // For sending messages.
    const { post, invoke } = useIpc();
    const { emitter } = useMitt();

    // Keepp track of when we are recording.
    const recording = ref(false);

    //---Callbacks-----------------------------------------------

    const onKeyDown = (e: KeyboardEvent) => {
        const cmd = keyboardNameMap[e.keyCode];
        // console.log(cmd)

        // Start recording on space bar.
        if (cmd == "SPACE" && !recording.value && !typing.value) {

            console.log("INPT:Starting record.")
            post("start-recording", "");

            showRecIcon()
            recording.value = true;

        }

    }

    const onKeyUp = async (e: KeyboardEvent) => {
        const cmd = keyboardNameMap[e.keyCode];

        // Stop recording on space up.
        if (cmd == "SPACE" && recording.value) {

            // Create a message.
            const message = renderMessage(
                "", 
                "", 
                "", 
                "sf"
            )

            // Render it immediately.
            emitter.emit("self-message", message);

            // Stop recording and get audio from recorder.
            console.log("INPT:Stopping record.")
            const audio = await invoke("stop-recording", "");
            
            // Send message to the backend for processing.
            const clientM = clientMessage("", audio, message.uid);
            post('client-message', clientM);

            hideRecIcon()
            recording.value = false;

        }

    }

    //-----------------------------------------------------------

    onMounted(() => {
        window.addEventListener("keydown", onKeyDown);
        window.addEventListener("keyup", onKeyUp);
    })

    onUnmounted(() => {
        window.removeEventListener("keydown", onKeyDown);
        window.removeEventListener("keyup", onKeyUp);
    });


    return {
        recording
    }

}