import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { withStyles } from '@material-ui/core/styles';

const styles = () =>
	({
		root :
		{
			position      : 'relative',
			flex          : '100 100 auto',
			height        : '100%',
			width         : '100%',
			display       : 'flex',
			flexDirection : 'column',
			overflow      : 'hidden'
		},
		video :
		{
			flex               : '100 100 auto',
			height             : '100%',
			width              : '100%',
			objectFit          : 'contain',
			userSelect         : 'none',
			transitionProperty : 'opacity',
			transitionDuration : '.15s',
			backgroundColor    : 'rgba(0, 0, 0, 1)',
			'&.hidden'         :
			{
				opacity            : 0,
				transitionDuration : '0s'
			},
			'&.loading' :
			{
				filter : 'blur(5px)'
			}
		}
	});

class FullView extends React.PureComponent
{
	constructor(props)
	{
		super(props);

		// Latest received video track.
		// @type {MediaStreamTrack}
		this._videoTrack = null;

		this.video = React.createRef();
	}

	render()
	{
		const {
			videoVisible,
			videoProfile,
			classes
		} = this.props;

		return (
			<div className={classes.root}>
				<video
					ref={this.video}
					className={classnames(classes.video, {
						hidden  : !videoVisible,
						loading : videoProfile === 'none'
					})}
					autoPlay
					playsInline
					muted={Boolean(true)}
				/>
			</div>
		);
	}

	componentDidMount()
	{
		const { videoTrack } = this.props;

		this._setTracks(videoTrack);
	}

	componentDidUpdate()
	{
		const { videoTrack } = this.props;

		this._setTracks(videoTrack);
	}

	_setTracks(videoTrack)
	{
		if (this._videoTrack === videoTrack)
			return;

		this._videoTrack = videoTrack;

		const video = this.video.current;

		if (videoTrack)
		{
			const stream = new MediaStream();

			stream.addTrack(videoTrack);
			video.srcObject = stream;
		}
		else
		{
			video.srcObject = null;
		}
	}
}

FullView.propTypes =
{
	videoTrack   : PropTypes.any,
	videoVisible : PropTypes.bool,
	videoProfile : PropTypes.string,
	classes      : PropTypes.object.isRequired
};

export default withStyles(styles)(FullView);