/**
 * WordPress dependencies
 */
import { Button, Dashicon } from '@safe-wordpress/components';
import { _x } from '@safe-wordpress/i18n';

/**
 * External dependencies
 */
import clsx from 'clsx';

/**
 * Internal dependencies
 */
import { useEditorState } from '../../../hooks';

export const FooterActions = (): JSX.Element => {
	const [ state, setState ] = useEditorState();

	return (
		<div className="nab-javascript-editor-sidebar__footer-actions">
			<div
				className={ clsx( {
					'nab-javascript-editor-sidebar__visibility-toggle': true,
					'nab-javascript-editor-sidebar__visibility-toggle--hide':
						!! state.areControlsVisible,
					'nab-javascript-editor-sidebar__visibility-toggle--show':
						! state.areControlsVisible,
				} ) }
			>
				<Button
					variant="link"
					onClick={ () =>
						setState( {
							areControlsVisible: ! state.areControlsVisible,
						} )
					}
				>
					{ state.areControlsVisible ? (
						<>
							<Dashicon icon="admin-collapse" />
							<span className="nab-javascript-editor-sidebar__visibility-toggle-label">
								{ _x(
									'Hide Controls',
									'command',
									'nelio-ab-testing'
								) }
							</span>
						</>
					) : (
						<Dashicon icon="admin-collapse" />
					) }
				</Button>
			</div>

			<div className="nab-javascript-editor-sidebar__resolutions">
				<div
					className={ clsx( {
						'nab-javascript-editor-sidebar__resolution': true,
						'nab-javascript-editor-sidebar__resolution--is-active':
							'desktop' === state.activeResolution,
					} ) }
				>
					<Button
						variant="link"
						onClick={ () =>
							setState( { activeResolution: 'desktop' } )
						}
					>
						<Dashicon icon="desktop" />
						<span className="screen-reader-text">
							{ _x(
								'Enter desktop preview mode',
								'command',
								'nelio-ab-testing'
							) }
						</span>
					</Button>
				</div>

				<div
					className={ clsx( {
						'nab-javascript-editor-sidebar__resolution': true,
						'nab-javascript-editor-sidebar__resolution--is-active':
							'tablet' === state.activeResolution,
					} ) }
				>
					<Button
						variant="link"
						onClick={ () =>
							setState( { activeResolution: 'tablet' } )
						}
					>
						<Dashicon icon="tablet" />
						<span className="screen-reader-text">
							{ _x(
								'Enter tablet preview mode',
								'command',
								'nelio-ab-testing'
							) }
						</span>
					</Button>
				</div>

				<div
					className={ clsx( {
						'nab-javascript-editor-sidebar__resolution': true,
						'nab-javascript-editor-sidebar__resolution--is-active':
							'mobile' === state.activeResolution,
					} ) }
				>
					<Button
						variant="link"
						onClick={ () =>
							setState( { activeResolution: 'mobile' } )
						}
					>
						<Dashicon icon="smartphone" />
						<span className="screen-reader-text">
							{ _x(
								'Enter mobile preview mode',
								'command',
								'nelio-ab-testing'
							) }
						</span>
					</Button>
				</div>
			</div>
		</div>
	);
};