// Shoutout to Sarah Drasner for heavily commenting her visualizer setup!
// https://codepen.io/sdras/pen/PVjPKa

const AMPLITUDE_MAX = 255;

// In case the Sandstorm audio source ever fails, uncomment this royalty-free audio source
// https://pixabay.com/music/synthwave-synthwave-80s-110045/
// const audioSource = 'https://cdn.pixabay.com/audio/2022/04/25/audio_5d61b5204f.mp3';
const audioSource = 'https://ia902201.us.archive.org/16/items/darude-sandstorm_202201/Darude%20-%20Sandstorm.mp3';

function App() {
	const [userClicked, setUserClicked] = React.useState(false);
	
	// Chrome requires a user click/gesture before AudioContext can be created
	// https://goo.gl/7K7WLu
	return (
		<div id="app">
			{userClicked ? (
				<Visualizer frequencyCount={128} audioSource={audioSource} />
			) : (
				<button onClick={() => setUserClicked(true)} aria-label="start" />
			)}
		</div>
	)
}

class Visualizer extends React.Component {
	constructor(props) {
		super(props);
		
		this.state = {
			frequencyAmplitudes: Array.from(props.frequencyCount)
		};
	}
	
	// Ensure this.audio has been set by ref callback
	componentDidMount() {
		// Wire up our audio
		this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
		this.source = this.audioContext.createMediaElementSource(this.audioRef);
		this.volumeControl = this.audioContext.createGain();
		this.source.connect(this.audioContext.destination);
		this.source.connect(this.volumeControl);
		
		// Create our analyZer 🇺🇸
		this.analyzer = this.audioContext.createAnalyser();
		this.analyzer.fftSize = this.props.frequencyCount * 2;
		this.volumeControl.connect(this.analyzer);
		this.analyzer.connect(this.audioContext.destination);
		
		// Analyzer will know user's set volume
		this.volumeControl.gain.value = this.audioRef.volume;		
		
		// Kick off our animation
		this.animate();
	}

	// Constantly get frequency data from audio so that amplitude can be updated
	animate() {
		let frequencyData = new Uint8Array(this.props.frequencyCount);
		this.analyzer.getByteFrequencyData(frequencyData);
		
		// Without the "bind(this)" silliness, we'll lose the component's context
		requestAnimationFrame(this.animate.bind(this)); // lol
		
		// Trigger React render with updated frequencyData
		this.setState({
			frequencyAmplitudes: Array.from(frequencyData).map(amplitude => amplitude * 100 / AMPLITUDE_MAX)
		});
	}
	
	render() {
		const bars = this.state.frequencyAmplitudes.map(val => {
			return <Bar amplitude={val} />
		});
		
		return (
			<div id="visualizer">
				<div id="bars">
					{bars}
				</div>
				<div id="controls">
					<audio ref={element => this.audioRef = element} src={this.props.audioSource} controls autoplay="true" crossorigin="anonymous"></audio>
				</div>
			</div>
		)
	}
}

function Bar({ amplitude }) {
	return <div className="bar" style={{ height: amplitude + '%' }}></div>
}

ReactDOM.render(<App />, document.getElementById('main'));