import { useState } from "react";

import { Option } from "react-dropdown";

const useAudioDevice = () => {
  const [permissionOk, setPermissionOk] = useState(false);
  const [audioDevices, setAudioDevices] = useState<Option[]>([]);
  const [loading, setLoading] = useState(true);

  const requestPermission = () => {
    navigator.mediaDevices
      .getUserMedia({
        audio: true,
      })
      .then(() => {
        setPermissionOk(true);
        updateDevices();
      })
      .catch(() => {
        setPermissionOk(false);
      })
      .finally(() => {
        setLoading(false);
      });
  };

  const getAudioStream = async (
    deviceId: string,
  ): Promise<MediaStream | null> => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({
        audio: {
          deviceId,
          noiseSuppression: false,
          echoCancellation: false,
        },
      });
      return stream;
    } catch (e) {
      setPermissionOk(false);
      setAudioDevices([]);
      return null;
    }
  };

  const updateDevices = async (): Promise<void> => {
    const devices = await navigator.mediaDevices.enumerateDevices();
    const _audioDevices = devices
      .filter(
        (d) => d.kind === "audioinput" && d.deviceId != "" && d.label != "",
      )
      .map((d) => ({ value: d.deviceId, label: d.label }));

    setPermissionOk(_audioDevices.length > 0);
    setAudioDevices(_audioDevices);
  };

  return {
    permissionOk,
    audioDevices,
    getAudioStream,
    requestPermission,
    loading,
  };
};

export default useAudioDevice;