import { ref, watch, onUnmounted, onMounted } from "vue";
import useKeyDownHandler from "@/utils/keyDownHandler/useKeyDownHandler";
import useMediaStream from "@/utils/mediaStream/useMediaStream";
import useStreamRecord from "./audio/useStreamRecord";
import useStreamVisualizer from './audio/useStreamVisualizer';
import useTextRender from './text/useTextRender';
import useAudioAnimations from './audio/audioDetails/useAnimations';
import useAudioRecorder from './audio/useAudioRecorder';

/* 
* Input controller logic
* Will visualize text input by default as user types or
* if user holds space bar down, input audio stream
* will be visualized & recorded
*/
// NOTE: input params should probably be input and MediaStream
export default function useInputController() {
  const visualizeStream = ref(false);
  const paths = ref([]);
  const audioBubbleWidth = ref(10);
  let stream: MediaStream;
  let recorder: MediaRecorder;

  const { keyDownHandler, input } = useKeyDownHandler();
  const { textInputXoffset, renderTextInput } = useTextRender(input);
  const { visualizeStreamAsPaths, expandBubble } = useStreamVisualizer(visualizeStream);
  const { initRecorder } = useStreamRecord()
  const { animateSend } = useAudioAnimations();

  function audioSend() {
      const domQuery = document.getElementsByClassName("audioInput");
      const inputEl = domQuery[0];
      animateSend(inputEl, visualizeStream);
  }

  // stops stream recording on space key up
  function keyupHandler(e: any) {
    if (e.key === " " && visualizeStream.value) {
      console.log("stop recording");
      window.postMessage({
        myTypeField: 'update-recorder',
        record: false
      }, '*')

      visualizeStream.value = false;
      paths.value = []
      audioBubbleWidth.value = 10;
      input.value = ''
    }
  }

  // add window event keyboard listeners
  window.addEventListener("keydown", keyDownHandler);
  window.addEventListener('keyup', keyupHandler);

  // get stream & initialize recorder object on mount
  onMounted(async () => {
    stream = await useMediaStream();
    useAudioRecorder(visualizeStream, stream)
    recorder = initRecorder(stream);
  })

  // determine whether to render text or audio based one the keyboard input
  watch(input, (input, prevInput) => {
    if (prevInput !== "" || prevInput.length > 0) {
      if (!visualizeStream.value) {
        renderTextInput();
      }
      return;
    }
    if (input === " " && visualizeStream.value === false) {
      console.log("record MediaStream");
      visualizeStream.value = true;
      window.postMessage({
        myTypeField: 'update-recorder',
        record: true
      }, '*')

      expandBubble(audioBubbleWidth);
      visualizeStreamAsPaths(stream, paths, audioBubbleWidth);
      return;
    }
    renderTextInput();
  });

  // remove Event Listeners on component unMount
  onUnmounted(() => {
    window.removeEventListener("keydown", keyDownHandler);
    window.removeEventListener("keyup", keyupHandler);
  });

  return {
    input,
    visualizeStream,
    textInputXoffset,
    audioBubbleWidth,
    paths
  }

}