import { faVolumeHigh, faVolumeXmark } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useSoundEnabled } from "react-sounds";
import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
import { useEffect } from "react";

const SoundBtn = () => {
  const { mutation, query } = useCameraBlackboard();
  const [enabled, setEnabled] = useSoundEnabled();

  const handleClick = async () => {
    const newEnabled = !enabled;
    setEnabled(newEnabled);
    await mutation.mutateAsync({
      operation: "INSERT",
      path: "soundEnabled",
      value: { enabled: newEnabled },
    });
  };
  useEffect(() => {
    setEnabled(query?.data?.soundEnabled?.enabled);
  }, [query?.data?.soundEnabled?.enabled, setEnabled]);

  return (
    <button onClick={handleClick}>
      <FontAwesomeIcon
        icon={enabled ? faVolumeHigh : faVolumeXmark}
        size="2x"
      />
    </button>
  );
};

export default SoundBtn;