import React, {useState} from 'react';
import ReactHowler from 'react-howler';

interface PlayerProps {
	src: string;
}

/**
 * @return {jsx} a simple audio player
 */
export default function Player({src}: PlayerProps) {
	const [play, setPlay] = useState(false);
	const [playText, setPlayText] = useState('Play');

	/**
	 * change play state
	 */
	function handlePlay() {
		setPlay(!play);
		if (play) {
			setPlayText('Play');
		} else {
			setPlayText('Pause');
		}
	}

	return (
		<React.Fragment>
			<ReactHowler
				src={[src]}
				playing={play}/>
			<div
				className='
					tile-child tile-player d-flex
					flex-column
					align-items-center
					justify-content-center'
				id='clickme'>
				<div className='lead player-text mb-4'>
					{src.split('/')[3].split('.')[0]}
				</div>
				<button
					type='button'
					onClick={() => handlePlay()}
					className={'d-inline btn btn-clickme btn-lg'}>
					{playText}
				</button>
			</div>
		</React.Fragment>
	);
}