import React from 'react';

import { Trans } from '@lingui/macro';
import makeStyles from '@mui/styles/makeStyles';
import Divider from '@mui/material/Divider';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';

import Duration from './Duration';
import Number from './Number';

const useStyles = makeStyles((theme) => ({
	box: {
		backgroundColor: theme.palette.background.modalbox,
		borderRadius: 4,
		padding: '1em',
		height: '100%',
	},
}));

function init(props) {
	const initProps = {
		time: 0,
		fps: 0,
		bitrate: 0,
		q: -1,
		speed: 0,
		drop: 0,
		dup: 0,
		frames: 0,
		...props,
	};

	return initProps;
}

export default function Progress(props) {
	const classes = useStyles();

	const progress = init(props);

	return (
		<Grid container className={classes.box}>
			<Grid item xs={12}>
				<Typography variant="h4">
					<strong>
						<Duration seconds={progress.time} />
					</strong>
				</Typography>
				<Typography variant="body2" gutterBottom>
					<Trans>Uptime</Trans>
				</Typography>
			</Grid>
			<Grid item xs={12}>
				<Divider />
			</Grid>
			<Grid item xs={12}>
				<Typography variant="h4">
					<strong>
						<Number value={Math.round(progress.fps)} />
					</strong>
				</Typography>
				<Typography variant="body2" gutterBottom>
					<Trans>FPS</Trans>
				</Typography>
			</Grid>
			<Grid item xs={12}>
				<Divider />
			</Grid>
			<Grid item xs={12}>
				<Typography variant="h4">
					<strong>
						<Number value={progress.bitrate} minDigits={2} />
					</strong>
				</Typography>
				<Typography variant="body2" gutterBottom>
					<Trans>kbit/s</Trans>
				</Typography>
			</Grid>
			<Grid item xs={12}>
				<Divider />
			</Grid>
			<Grid item xs={12}>
				<Typography variant="h4">
					<strong>
						<Number value={progress.q} digits={2} />
					</strong>
				</Typography>
				<Typography variant="body2" gutterBottom>
					<Trans>Quality</Trans>
				</Typography>
			</Grid>
			<Grid item xs={12}>
				<Divider />
			</Grid>
			<Grid item xs={12}>
				<Typography variant="h4">
					<strong>
						<Number value={progress.speed} minDigits={2} />
					</strong>
				</Typography>
				<Typography variant="body2" gutterBottom>
					<Trans>Speed</Trans>
				</Typography>
			</Grid>
			<Grid item xs={12}>
				<Divider />
			</Grid>
			<Grid item xs={12}>
				<Typography variant="h4">
					<strong>{!isNaN(Math.round((props.drop * 100) / props.frames)) || 0}%</strong>
				</Typography>
				<Typography variant="body2" gutterBottom>
					<Trans>Frame drops</Trans>
				</Typography>
			</Grid>
			<Grid item xs={12}>
				<Divider />
			</Grid>
			<Grid item xs={12}>
				<Typography variant="h4">
					<strong>
						<Number value={Math.round(progress.dup)} />
					</strong>
				</Typography>
				<Typography variant="body2" gutterBottom>
					<Trans>Dup. frames</Trans>
				</Typography>
			</Grid>
		</Grid>
	);
}

Progress.defaultProps = {
	time: 0,
	fps: 0,
	bitrate: 0,
	q: -1,
	speed: 0,
	drop: 0,
	dup: 0,
	frame: 0,
};