import React, { useEffect, useState } from "react";
import useSound from "use-sound";
import chantierAtmopshere from "../../assets/sounds/chantier_1.mp3";
import soundControlIcon from "../../assets/img/icons/sound-control-icon.svg";
export default function SoundControl() {
	const [atmosphereSound, setAtmosphereSound] = useState(null);
	const [isPlaying, setIsPlaying] = useState(false);

	function playSound() {
		const chantierSound = new Audio(chantierAtmopshere);
		chantierSound.play();
		setAtmosphereSound(chantierSound);
		setIsPlaying(true);
	}

	function clearSound() {
		if (atmosphereSound) {
			atmosphereSound.pause();
			atmosphereSound.removeAttribute("src");
			atmosphereSound.load();
		}
		setIsPlaying(false);
	}
	return (
		<>
			<div className='sound-control-pannel'>
				<button className='sound-control-pannel__audio-toggle'>
					<img className='sound-control-pannel__icon' src={soundControlIcon} alt='' />
				</button>
				<button hidden={isPlaying} onClick={playSound}>
					Play Sound
				</button>
				<button hidden={!isPlaying} onClick={clearSound}>
					Stop Sound
				</button>
			</div>
		</>
	);
}
