const {useEffect, useState} = React;
const {gainToDb, Transport, Destination, Player} = Tone;

let players;
const loops = [
	{file: 'Beat1', initialVolume: 0.75},
	{file: 'Bass1', initialVolume: 0.75},
	{file: 'Layers1', initialVolume: 0.5},
	{file: 'Layers2', initialVolume: 0.25},
	{file: 'Chords1', initialVolume: 0},
	{file: 'Beat2', initialVolume: 0},
	{file: 'Flute1', initialVolume: 0},
	{file: 'Bass2', initialVolume: 0},
];
const playerPromises = loops.map(({file, initialVolume}) => new Promise((resolve, reject) => {
	const player = new Player(`https://rileyjshaw.com/mp3/loops/${file}.mp3`, () => resolve(player)).toDestination();
	player.volume.value = gainToDb(initialVolume);
}));
Promise.all(playerPromises).then(_players => {
	players = _players;
	players.forEach(player => {
		player.sync();
		player.start();
	});
	Transport.bpm.value = 100;
	Transport.loop = true;
	Transport.loopStart = 0;
	Transport.loopEnd = '8:0:0';
	ReactDOM.render(<App />, document.getElementById('app'));
});

const nTracks = loops.length;

const add = (a, b) => a + b;
const bound = (n, lo, hi) => Math.max(lo, Math.min(hi, n)) || lo;

const FaderBank = ({values, label, onChange, className}) => <div className={`faderbank ${className ?? ""}`}>
	<div className="faders">
		{values.map((value, i) => <Fader
			key={i}
			value={value}
			onChange={({target: {value}}) => onChange(+value, i)}
		/>)}
	</div>
	<p className="label">{label}</p>
</div>;

const Fader = ({onChange, value}) => <div className="fader-container">
	<input
		type="range"
		onChange={onChange}
		value={value}
		min={0}
		max={1}
		step="any"
		className="fader"
	/>
</div>;

const App = () => {
	const [started, setStarted] = useState(false);
	const [linkedFaders, setLinkedFaders] = useState({
		volume: loops.map(loop => loop.initialVolume).reduce(add) / nTracks,
		tracks: loops.map(loop => loop.initialVolume),
		volumeLocked: !loops.some(({initialVolume}) => initialVolume && initialVolume < 1),
	});
	const [gain, setGain] = useState(0.5);

	const updateVolume = newVolume => {
		setLinkedFaders(({tracks}) => {
			const nActiveTracks = tracks.filter(track => track).length;
			const limitedVolume = bound(newVolume, 0, nActiveTracks / nTracks);
			const factor =  limitedVolume * nTracks / tracks.reduce(add);

			return {
				volume: limitedVolume,
				tracks: tracks.map(unscaled => bound(factor * unscaled, 0, 1)),
				volumeLocked: limitedVolume !== newVolume,
			};
		});
	};
	const updateTrack = (newValue, i) => {
		setLinkedFaders(({volume, tracks}) => {
			const newTracksUnscaled = [...tracks.slice(0, i), +newValue, ...tracks.slice(i + 1)];
			const factor = (volume * nTracks - newValue) / (newTracksUnscaled.reduce(add) - newValue);
			const newTracks = newTracksUnscaled.map((unscaled, j) => i === j ? unscaled : bound(factor * unscaled, 0, 1));
			return {
				volume: newTracks.reduce(add) / nTracks,
				tracks: newTracks,
				volumeLocked: !newTracks.some(track => track && track < 1),
			};
		});
	};
	const updateGain = (newGain) => setGain(newGain);
	
	// Update track volume.
	useEffect(() => {
		linkedFaders.tracks.forEach((volume, i) => {
			players[i].volume.value = gainToDb(volume);
		});
	}, linkedFaders.tracks);
	
	// Update master gain.
	useEffect(() => {
		Destination.volume.value = gainToDb(gain);
	}, [gain]);

	return <div className="app-container">
		{started
			? <>
				<FaderBank label="Volume" values={[linkedFaders.volume]} onChange={updateVolume} className={linkedFaders.volumeLocked && "locked"} />
				<FaderBank label="Tracks" values={linkedFaders.tracks} onChange={updateTrack} />
				<FaderBank label="Gain" values={[gain]} onChange={updateGain} />
			</>
			: <button onClick={() => {
				setStarted(true);
				Tone.start();
				Transport.start();
			}}>Start demo</button>}
	</div>;
};