import { __, _x } from '@wordpress/i18n';
import {
	ToggleControl,
	SelectControl,
	__experimentalToolsPanelItem as ToolsPanelItem,
} from '@wordpress/components';
import { useMemo, useCallback } from '@wordpress/element';

const options = [
	{ value: 'auto', label: __( 'Auto' ) },
	{ value: 'metadata', label: __( 'Metadata' ) },
	{ value: 'none', label: _x( 'None', 'Preload value' ) },
];

const VideoSettings = ( { setAttributes, attributes } ) => {
	const { autoplay, controls, loop, muted, playsInline, preload } =
		attributes;

	const autoPlayHelpText = __(
		'Autoplay may cause usability issues for some users.'
	);

	const getAutoplayHelp = useCallback( ( checked ) => {
		return checked ? autoPlayHelpText : null;
	}, [] );

	const toggleFactory = useMemo( () => {
		const toggleAttribute = ( attribute ) => {
			return ( newValue ) => {
				setAttributes( {
					[ attribute ]: newValue,
					// Set muted and playsInLine when autoplay changes
					// playsInline is set to true when autoplay is true to support iOS devices
					...( attribute === 'autoplay' && {
						muted: newValue,
						playsInline: newValue,
					} ),
				} );
			};
		};

		return {
			autoplay: toggleAttribute( 'autoplay' ),
			loop: toggleAttribute( 'loop' ),
			muted: toggleAttribute( 'muted' ),
			controls: toggleAttribute( 'controls' ),
			playsInline: toggleAttribute( 'playsInline' ),
		};
	}, [] );

	const onChangePreload = useCallback( ( value ) => {
		setAttributes( { preload: value } );
	}, [] );

	return (
		<>
			<ToolsPanelItem
				label={ __( 'Autoplay' ) }
				isShownByDefault
				hasValue={ () => !! autoplay }
				onDeselect={ () => {
					setAttributes( { autoplay: false, muted: false } );
				} }
			>
				<ToggleControl
					label={ __( 'Autoplay' ) }
					onChange={ toggleFactory.autoplay }
					checked={ !! autoplay }
					help={ getAutoplayHelp }
				/>
			</ToolsPanelItem>
			<ToolsPanelItem
				label={ __( 'Loop' ) }
				isShownByDefault
				hasValue={ () => !! loop }
				onDeselect={ () => {
					setAttributes( { loop: false } );
				} }
			>
				<ToggleControl
					label={ __( 'Loop' ) }
					onChange={ toggleFactory.loop }
					checked={ !! loop }
				/>
			</ToolsPanelItem>
			<ToolsPanelItem
				label={ __( 'Muted' ) }
				isShownByDefault
				hasValue={ () => !! muted }
				onDeselect={ () => {
					setAttributes( { muted: false } );
				} }
			>
				<ToggleControl
					label={ __( 'Muted' ) }
					onChange={ toggleFactory.muted }
					checked={ !! muted }
					disabled={ autoplay }
					help={
						autoplay ? __( 'Muted because of Autoplay.' ) : null
					}
				/>
			</ToolsPanelItem>
			<ToolsPanelItem
				label={ __( 'Playback controls' ) }
				isShownByDefault
				hasValue={ () => ! controls }
				onDeselect={ () => {
					setAttributes( { controls: true } );
				} }
			>
				<ToggleControl
					label={ __( 'Playback controls' ) }
					onChange={ toggleFactory.controls }
					checked={ !! controls }
				/>
			</ToolsPanelItem>
			<ToolsPanelItem
				label={ __( 'Play inline' ) }
				isShownByDefault
				hasValue={ () => !! playsInline }
				onDeselect={ () => {
					setAttributes( { playsInline: false } );
				} }
			>
				<ToggleControl
					/* translators: Setting to play videos within the webpage on mobile browsers rather than opening in a fullscreen player. */
					label={ __( 'Play inline' ) }
					onChange={ toggleFactory.playsInline }
					checked={ !! playsInline }
					disabled={ autoplay }
					help={
						autoplay
							? __( 'Play inline enabled because of Autoplay.' )
							: __(
									'When enabled, videos will play directly within the webpage on mobile browsers, instead of opening in a fullscreen player.'
							  )
					}
				/>
			</ToolsPanelItem>
			<ToolsPanelItem
				label={ __( 'Preload' ) }
				isShownByDefault
				hasValue={ () => preload !== 'metadata' }
				onDeselect={ () => {
					setAttributes( { preload: 'metadata' } );
				} }
			>
				<SelectControl
					label={ __( 'Preload' ) }
					value={ preload }
					onChange={ onChangePreload }
					options={ options }
					hideCancelButton
				/>
			</ToolsPanelItem>
		</>
	);
};

export default VideoSettings;