import React from 'react';
import { connect } from 'react-redux';
import * as appPropTypes from '../appPropTypes';
import { withStyles } from '@material-ui/core/styles';
import { withRoomContext } from '../../RoomContext';
import * as settingsActions from '../../actions/settingsActions';
import PropTypes from 'prop-types';
import { useIntl, FormattedMessage } from 'react-intl';
import classnames from 'classnames';
import MenuItem from '@material-ui/core/MenuItem';
import FormHelperText from '@material-ui/core/FormHelperText';
import FormControl from '@material-ui/core/FormControl';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Select from '@material-ui/core/Select';
import Slider from '@material-ui/core/Slider';
import Typography from '@material-ui/core/Typography';
import Collapse from '@material-ui/core/Collapse';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import ExpandLess from '@material-ui/icons/ExpandLess';
import ExpandMore from '@material-ui/icons/ExpandMore';
import Switch from '@material-ui/core/Switch';

const NoiseSlider = withStyles(
	{
		root :
		{
			color   : '#3880ff',
			height  : 2,
			padding : '15px 0'
		},
		track : {
			height : 2
		},
		rail : {
			height  : 2,
			opacity : 0.2
		},
		mark : {
			backgroundColor : '#bfbfbf',
			height          : 10,
			width           : 3,
			marginTop       : -3
		},
		markActive : {
			opacity         : 1,
			backgroundColor : 'currentColor'
		}
	})(Slider);

const styles = (theme) => ({
	setting :
	{
		padding : theme.spacing(2)
	},
	margin :
	{
		height : theme.spacing(3)
	},
	root : {
		width           : '100%',
		backgroundColor : theme.palette.background.paper
	},
	switchLabel : {
		justifyContent : 'space-between',
		flex           : 'auto',
		display        : 'flex',
		padding        : theme.spacing(1)
	},
	nested : {
		paddingLeft   : theme.spacing(2),
		display       : 'block',
		paddingTop    : 0,
		paddingBottom : 0
	},
	formControl :
	{
		display : 'flex'
	}
});

const MediaSettings = ({
	setEchoCancellation,
	setAutoGainControl,
	setNoiseSuppression,
	setVoiceActivatedUnmute,
	roomClient,
	me,
	volume,
	settings,
	classes
}) =>
{
	const intl = useIntl();

	const resolutions = [ {
		value : 'low',
		label : intl.formatMessage({
			id             : 'label.low',
			defaultMessage : 'Low'
		})
	},
	{
		value : 'medium',
		label : intl.formatMessage({
			id             : 'label.medium',
			defaultMessage : 'Medium'
		})
	},
	{
		value : 'high',
		label : intl.formatMessage({
			id             : 'label.high',
			defaultMessage : 'High (HD)'
		})
	},
	{
		value : 'veryhigh',
		label : intl.formatMessage({
			id             : 'label.veryHigh',
			defaultMessage : 'Very high (FHD)'
		})
	},
	{
		value : 'ultra',
		label : intl.formatMessage({
			id             : 'label.ultra',
			defaultMessage : 'Ultra (UHD)'
		})
	} ];

	let webcams;

	if (me.webcamDevices)
		webcams = Object.values(me.webcamDevices);
	else
		webcams = [];

	let audioDevices;

	if (me.audioDevices)
		audioDevices = Object.values(me.audioDevices);
	else
		audioDevices = [];

	let audioOutputDevices;

	if (me.audioOutputDevices)
		audioOutputDevices = Object.values(me.audioOutputDevices);
	else
		audioOutputDevices = [];

	const [ open, setOpen ] = React.useState(true);

	const advancedAudioSettings = () =>
	{
		setOpen(!open);
	};

	return (
		<React.Fragment>
			<form className={classes.setting} autoComplete='off'>
				<FormControl className={classes.formControl}>
					<Select
						value={settings.selectedWebcam || ''}
						onChange={(event) =>
						{
							if (event.target.value)
								roomClient.changeWebcam(event.target.value);
						}}
						displayEmpty
						name={intl.formatMessage({
							id             : 'settings.camera',
							defaultMessage : 'Camera'
						})}
						autoWidth
						className={classes.selectEmpty}
						disabled={webcams.length === 0 || me.webcamInProgress}
					>
						{ webcams.map((webcam, index) =>
						{
							return (
								<MenuItem key={index} value={webcam.deviceId}>{webcam.label}</MenuItem>
							);
						})}
					</Select>
					<FormHelperText>
						{ webcams.length > 0 ?
							intl.formatMessage({
								id             : 'settings.selectCamera',
								defaultMessage : 'Select video device'
							})
							:
							intl.formatMessage({
								id             : 'settings.cantSelectCamera',
								defaultMessage : 'Unable to select video device'
							})
						}
					</FormHelperText>
				</FormControl>
				<FormControl className={classes.formControl}>
					<Select
						value={settings.resolution || ''}
						onChange={(event) =>
						{
							if (event.target.value)
								roomClient.changeVideoResolution(event.target.value);
						}}
						name='Video resolution'
						autoWidth
						className={classes.selectEmpty}
					>
						{resolutions.map((resolution, index) =>
						{
							return (
								<MenuItem key={index} value={resolution.value}>
									{resolution.label}
								</MenuItem>
							);
						})}
					</Select>
					<FormHelperText>
						<FormattedMessage
							id='settings.resolution'
							defaultMessage='Select your video resolution'
						/>
					</FormHelperText>
				</FormControl>
			</form>
			<form className={classes.setting} autoComplete='off'>
				<FormControl className={classes.formControl}>
					<Select
						value={settings.selectedAudioDevice || ''}
						onChange={(event) =>
						{
							if (event.target.value)
								roomClient.changeAudioDevice(event.target.value);
						}}
						displayEmpty
						name={intl.formatMessage({
							id             : 'settings.audio',
							defaultMessage : 'Audio input device'
						})}
						autoWidth
						className={classes.selectEmpty}
						disabled={audioDevices.length === 0 || me.audioInProgress}
					>
						{ audioDevices.map((audio, index) =>
						{
							return (
								<MenuItem key={index} value={audio.deviceId}>{audio.label}</MenuItem>
							);
						})}
					</Select>
					<FormHelperText>
						{ audioDevices.length > 0 ?
							intl.formatMessage({
								id             : 'settings.selectAudio',
								defaultMessage : 'Select audio input device'
							})
							:
							intl.formatMessage({
								id             : 'settings.cantSelectAudio',
								defaultMessage : 'Unable to select audio input device'
							})
						}
					</FormHelperText>
				</FormControl>
			</form>
			{ 'audioOutputSupportedBrowsers' in window.config &&
				window.config.audioOutputSupportedBrowsers.includes(me.browser.name) &&
				<form className={classes.setting} autoComplete='off'>
					<FormControl className={classes.formControl}>
						<Select
							value={settings.selectedAudioOutputDevice || ''}
							onChange={(event) =>
							{
								if (event.target.value)
									roomClient.changeAudioOutputDevice(event.target.value);
							}}
							displayEmpty
							name={intl.formatMessage({
								id             : 'settings.audioOutput',
								defaultMessage : 'Audio output device'
							})}
							autoWidth
							className={classes.selectEmpty}
							disabled={audioOutputDevices.length === 0 || me.audioOutputInProgress}
						>
							{ audioOutputDevices.map((audioOutput, index) =>
							{
								return (
									<MenuItem
										key={index}
										value={audioOutput.deviceId}
									>
										{audioOutput.label}
									</MenuItem>
								);
							})}
						</Select>
						<FormHelperText>
							{ audioOutputDevices.length > 0 ?
								intl.formatMessage({
									id             : 'settings.selectAudioOutput',
									defaultMessage : 'Select audio output device'
								})
								:
								intl.formatMessage({
									id             : 'settings.cantSelectAudioOutput',
									defaultMessage : 'Unable to select audio output device'
								})
							}
						</FormHelperText>
					</FormControl>
				</form>
			}
			<List className={classes.root} component='nav'>
				<ListItem button onClick={advancedAudioSettings}>
					<ListItemText primary={intl.formatMessage({
						id             : 'settings.showAdvancedAudio',
						defaultMessage : 'Show advanced audio settings'
					})}
					/>
					{open ? <ExpandLess /> : <ExpandMore />}
				</ListItem>
				<Collapse in={!open} timeout='auto'>
					<List component='div'>
						<ListItem className={classes.nested}>
							<FormControlLabel
								className={classnames(classes.setting, classes.switchLabel)}
								control={
									<Switch color='secondary'
										checked={settings.echoCancellation}
										onChange={
											(event) =>
											{
												setEchoCancellation(event.target.checked);
												roomClient.changeAudioDevice(settings.selectedAudioDevice);
											}}
									/>}
								labelPlacement='start'
								label={intl.formatMessage({
									id             : 'settings.echoCancellation',
									defaultMessage : 'Echo cancellation'
								})}
							/>
						</ListItem>
						<ListItem className={classes.nested}>
							<FormControlLabel
								className={classnames(classes.setting, classes.switchLabel)}
								control={
									<Switch color='secondary'
										checked={settings.autoGainControl} onChange={
											(event) =>
											{
												setAutoGainControl(event.target.checked);
												roomClient.changeAudioDevice(settings.selectedAudioDevice);
											}}
									/>}
								labelPlacement='start'
								label={intl.formatMessage({
									id             : 'settings.autoGainControl',
									defaultMessage : 'Auto gain control'
								})}
							/>
						</ListItem>
						<ListItem className={classes.nested}>
							<FormControlLabel
								className={classnames(classes.setting, classes.switchLabel)}
								control={
									<Switch color='secondary'
										checked={settings.noiseSuppression} onChange={
											(event) =>
											{
												setNoiseSuppression(event.target.checked);
												roomClient.changeAudioDevice(settings.selectedAudioDevice);
											}}
									/>}
								labelPlacement='start'
								label={intl.formatMessage({
									id             : 'settings.noiseSuppression',
									defaultMessage : 'Noise suppression'
								})}
							/>
						</ListItem>
						<ListItem className={classes.nested}>
							<FormControlLabel
								className={classnames(classes.setting, classes.switchLabel)}
								control={
									<Switch color='secondary'
										checked={settings.voiceActivatedUnmute} onChange={
											(event) =>
											{
												setVoiceActivatedUnmute(event.target.checked);
											}}
									/>}
								labelPlacement='start'
								label={intl.formatMessage({
									id             : 'settings.voiceActivatedUnmute',
									defaultMessage : 'Voice activated unmute'
								})}
							/>
						</ListItem>
						<ListItem className={classes.nested}>
							<div className={classes.margin} />
							<Typography gutterBottom>
								{
									intl.formatMessage({
										id             : 'settings.noiseThreshold',
										defaultMessage : 'Noise threshold:'
									})
								}
							</Typography>
							<NoiseSlider className={classnames(classes.slider, classnames.setting)}
								key={'noise-threshold-slider'}
								min={-100}
								value={settings.noiseThreshold}
								max={0}
								valueLabelDisplay={'off'}
								onChange={
									(event, value) =>
									{
										roomClient._setNoiseThreshold(value);
									}}
								marks={[ { value: volume, label: volume+'dB' } ]}
							/>
							<div className={classes.margin} />
						</ListItem>
					</List>
				</Collapse>
			</List>
		</React.Fragment>
	);
};

MediaSettings.propTypes =
{
	roomClient              : PropTypes.any.isRequired,
	setEchoCancellation     : PropTypes.func.isRequired,
	setAutoGainControl      : PropTypes.func.isRequired,
	setNoiseSuppression     : PropTypes.func.isRequired,
	setVoiceActivatedUnmute : PropTypes.func.isRequired,
	me                      : appPropTypes.Me.isRequired,
	volume                  : PropTypes.number,
	settings                : PropTypes.object.isRequired,
	classes                 : PropTypes.object.isRequired
};

const mapStateToProps = (state) =>
{
	return {
		me       : state.me,
		volume   : state.peerVolumes[state.me.id],
		settings : state.settings
	};
};

const mapDispatchToProps = {
	setEchoCancellation     : settingsActions.setEchoCancellation,
	setAutoGainControl      : settingsActions.setAutoGainControl,
	setNoiseSuppression     : settingsActions.setNoiseSuppression,
	setVoiceActivatedUnmute : settingsActions.setVoiceActivatedUnmute
};

export default withRoomContext(connect(
	mapStateToProps,
	mapDispatchToProps,
	null,
	{
		areStatesEqual : (next, prev) =>
		{
			return (
				prev.me === next.me &&
				prev.settings === next.settings &&
				prev.peerVolumes[prev.me.id] === next[next.me.id]
			);
		}
	}
)(withStyles(styles)(MediaSettings)));