/**
 * WordPress dependencies
 */
import {
	Button,
	Dashicon,
	DropdownMenu,
	Path,
	SVG,
} from '@safe-wordpress/components';
import { _x } from '@safe-wordpress/i18n';
import { useDispatch, useSelect } from '@safe-wordpress/data';

/**
 * External dependencies
 */
import { Tooltip } from '@nab/components';
import { store as NAB_DATA } from '@nab/data';
import { store as NAB_EDITOR } from '@nab/editor';

export const Header = (): JSX.Element => {
	const experimentUrl = useExperimentUrl();
	const [ isSaving, save ] = useSave();

	return (
		<div className="nab-css-editor-sidebar__header">
			<div className="nab-css-editor-sidebar__back-to-experiment">
				<a
					className="nab-css-editor-sidebar__back-to-experiment-link"
					href={ experimentUrl }
					title={ _x(
						'Back to test…',
						'command',
						'nelio-ab-testing'
					) }
				>
					<Dashicon icon="arrow-left-alt2" />
				</a>
			</div>

			<div className="nab-css-editor-sidebar__header-actions">
				{ ! isSaving && <CssActivationToggle /> }
				{ ! isSaving && <InteractionMode /> }

				<div className="nab-css-editor-sidebar__save-info">
					{ isSaving && (
						<span className="nab-css-editor-sidebar__saving-label">
							<Dashicon icon="cloud" />
							{ _x( 'Saving…', 'text', 'nelio-ab-testing' ) }
						</span>
					) }
					<Button
						variant="primary"
						disabled={ isSaving }
						onClick={ () => void save() }
					>
						{ _x( 'Save', 'command', 'nelio-ab-testing' ) }
					</Button>
				</div>
			</div>
		</div>
	);
};

// ============
// HELPER VIEWS
// ============

const CssActivationToggle = () => {
	const [ editor, setEditor ] = useCssEditorState();
	if ( ! editor ) {
		return null;
	}

	if ( ! editor.isPreviewInScope ) {
		return (
			<Tooltip
				text={ _x(
					'Preview unavailable: this page is outside the test scope',
					'text',
					'nelio-ab-testing'
				) }
			>
				<Button
					className="nab-css-editor-sidebar__header-actions__css-toggle"
					icon="warning"
					onClick={ () => void null }
					disabled
				/>
			</Tooltip>
		);
	}

	const { areChangesActive } = editor;
	return (
		<Button
			className="nab-css-editor-sidebar__header-actions__css-toggle"
			icon={ ICONS[ 'css-toggle' ] }
			label={
				areChangesActive
					? _x( 'Hide changes', 'command', 'nelio-ab-testing' )
					: _x( 'Show changes', 'command', 'nelio-ab-testing' )
			}
			showTooltip
			isPressed={ areChangesActive }
			variant="secondary"
			onClick={ () =>
				setEditor( { areChangesActive: ! areChangesActive } )
			}
		/>
	);
};

const InteractionMode = () => {
	const [ editor ] = useCssEditorState();
	const [ finder, setFinder ] = useCssFinderState();
	if ( ! editor || ! finder ) {
		return null;
	}

	const { interactionMode } = finder;
	return (
		<DropdownMenu
			className="nab-css-selector-finder__interactivity-mode"
			icon={ ICONS[ interactionMode ] }
			label={
				'navigation' === interactionMode
					? _x( 'Navigate your site', 'user', 'nelio-ab-testing' )
					: _x( 'Select an element', 'user', 'nelio-ab-testing' )
			}
			toggleProps={ { variant: 'secondary' } }
			controls={ [
				{
					title: _x(
						'Navigate your site',
						'user',
						'nelio-ab-testing'
					),
					isActive: 'navigation' === interactionMode,
					icon: NavigationIcon,
					onClick: () =>
						setFinder( { interactionMode: 'navigation' } ),
				},
				...( 'content-editor' !== editor.mode
					? [
							{
								title: _x(
									'Flexible Inspector',
									'text',
									'nelio-ab-testing'
								),
								isActive:
									'flexible-inspector' === interactionMode,
								icon: FlexibleInspectorIcon,
								onClick: () =>
									setFinder( {
										interactionMode: 'flexible-inspector',
									} ),
							},
							{
								title: _x(
									'Single Inspector',
									'text',
									'nelio-ab-testing'
								),
								isActive:
									'single-inspector' === interactionMode,
								icon: SingleInspectorIcon,
								onClick: () =>
									setFinder( {
										interactionMode: 'single-inspector',
									} ),
							},
					  ]
					: [
							{
								title: _x(
									'Content Inspector',
									'text',
									'nelio-ab-testing'
								),
								isActive:
									'editable-content-inspector' ===
									interactionMode,
								icon: SingleInspectorIcon,
								onClick: () =>
									setFinder( {
										interactionMode:
											'editable-content-inspector',
									} ),
							},
					  ] ),
			] }
		/>
	);
};

const FlexibleInspectorIcon = (): JSX.Element => (
	<SVG
		xmlns="http://www.w3.org/2000/svg"
		viewBox="0 0 24 24"
		width="24"
		height="24"
	>
		<Path d="M11.2 4c-1.26.12-2.48.53-3.56 1.2l-1-1.73A9.675 9.675 0 0 1 11 2m6.53 4.25c-.91-.86-2-1.52-3.19-1.92L15 2.39c1.5.45 2.89 1.27 4 2.39M5.34 7.41A8.312 8.312 0 0 0 4 10.83l-2-.28C2.2 9 2.79 7.5 3.7 6.23M22 12v.66l-2-.16V12c0-1.08-.19-2.14-.61-3.14l1.83-.8c.53 1.25.78 2.59.78 3.94M6 17.3l-1.5 1.31a10.457 10.457 0 0 1-2.2-4.08L4.17 14c.36 1.22.99 2.35 1.83 3.3m6.14 4.7H12c-1.5 0-3-.32-4.36-.93l.89-1.83c1.09.51 2.27.76 3.47.76h.19M17 21h-2v-6h6v2h-2.58l2.72 2.76-1.41 1.41L17 18.5" />
	</SVG>
);

const SingleInspectorIcon = (): JSX.Element => (
	<SVG
		xmlns="http://www.w3.org/2000/svg"
		viewBox="0 0 24 24"
		width="24"
		height="24"
	>
		<Path d="M 11.111328,0.953125 V 1.8046875 C 6.2950661,2.2761068 2.4488845,6.1214973 1.9765625,10.9375 H 1.125 v 2 h 0.8515625 c 0.472322,4.816002 4.3185036,8.661395 9.1347655,9.132812 v 0.851563 h 2 v -0.853516 -2.011718 -1.574219 c -0.331425,0.05268 -0.666373,0.0801 -1.001953,0.08203 -0.334226,-0.0015 -0.66786,-0.02825 -0.998047,-0.08008 v 1.572266 C 7.3830873,19.60592 4.4418121,16.66547 3.9902344,12.9375 H 5.5625 c -0.05127,-0.330881 -0.077386,-0.665172 -0.078125,-1 7.39e-4,-0.334828 0.026855,-0.669119 0.078125,-1 H 3.9902344 C 4.4418121,7.2095295 7.3830873,4.2690786 11.111328,3.8183594 V 5.390625 c 0.330187,-0.051825 0.663821,-0.078594 0.998047,-0.080078 0.33548,6.403e-4 0.670428,0.026757 1.001953,0.078125 V 3.8183594 c 3.726644,0.4522801 6.667487,3.3924551 7.119141,7.1191406 h -1.570313 c 0.05062,0.330931 0.07608,0.665221 0.07617,1 -0.0011,0.328259 -0.02653,0.655984 -0.07617,0.980469 h 4.435547 V 10.9375 H 22.244141 C 21.771754,6.1228345 17.925908,2.2798023 13.111328,1.8066406 V 0.953125 Z m 0.998047,7.7929688 c -1.750294,0 -3.1894531,1.4411122 -3.1894531,3.1914062 0,1.750294 1.4391591,3.191406 3.1894531,3.191406 1.750294,0 3.191406,-1.441112 3.191406,-3.191406 0,-1.750294 -1.441112,-3.1914063 -3.191406,-3.1914062 z m 0,2.0000002 c 0.669418,0 1.191406,0.521988 1.191406,1.191406 0,0.669418 -0.521988,1.191406 -1.191406,1.191406 -0.669418,0 -1.189453,-0.521988 -1.189453,-1.191406 0,-0.669418 0.520035,-1.191406 1.189453,-1.191406 z M 15.255525,15 v 6 h 2 V 18.5 L 19.985994,21.169922 21.39615,19.759766 18.675447,17 h 2.580078 v -2 z" />
	</SVG>
);

const NavigationIcon = (): JSX.Element => (
	<SVG
		xmlns="http://www.w3.org/2000/svg"
		viewBox="0 0 24 24"
		width="24"
		height="24"
	>
		<Path d="m12 7.3 4.3 10.4-3.5-1.5-.8-.4-.8.4-3.5 1.5L12 7.3M12 2 4.5 20.3l.7.7 6.8-3 6.8 3 .7-.7L12 2Z" />
	</SVG>
);

const CssToggleIcon = (): JSX.Element => (
	<SVG
		xmlns="http://www.w3.org/2000/svg"
		viewBox="0 0 24 24"
		width="24"
		height="24"
	>
		<Path d="M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9M12,4.5C17,4.5 21.27,7.61 23,12C21.27,16.39 17,19.5 12,19.5C7,19.5 2.73,16.39 1,12C2.73,7.61 7,4.5 12,4.5M3.18,12C4.83,15.36 8.24,17.5 12,17.5C15.76,17.5 19.17,15.36 20.82,12C19.17,8.64 15.76,6.5 12,6.5C8.24,6.5 4.83,8.64 3.18,12Z" />
	</SVG>
);

const ICONS = {
	navigation: NavigationIcon,
	'flexible-inspector': FlexibleInspectorIcon,
	'single-inspector': SingleInspectorIcon,
	'editable-content-inspector': SingleInspectorIcon,
	'css-toggle': CssToggleIcon,
};

// =====
// HOOKS
// =====

const useExperimentUrl = () =>
	useSelect(
		( select ) =>
			select( NAB_EDITOR ).getExperimentAttribute( 'links' )?.edit,
		[]
	);

const useSave = () => {
	const isSaving = useSelect(
		( select ) => select( NAB_EDITOR ).isExperimentBeingSaved(),
		[]
	);
	const { saveExperiment } = useDispatch( NAB_EDITOR );
	return [ isSaving, saveExperiment ] as const;
};

const useCssFinderState = () => {
	const attrName = 'css-selector/cssSelectorFinderState';
	const finder = useSelect(
		( select ) => select( NAB_DATA ).getPageAttribute( attrName ),
		[ attrName ]
	);
	const { setPageAttribute } = useDispatch( NAB_DATA );
	if ( ! finder ) {
		return [ finder, () => void null ] as const;
	}

	const setFinder = ( attrs: Partial< typeof finder > ) =>
		setPageAttribute( attrName, { ...finder, ...attrs } );
	return [ finder, setFinder ] as const;
};

const useCssEditorState = () => {
	const attrName = 'css-editor/cssEditorState';
	const editor = useSelect(
		( select ) => select( NAB_DATA ).getPageAttribute( attrName ),
		[ attrName ]
	);
	const { setPageAttribute } = useDispatch( NAB_DATA );
	if ( ! editor ) {
		return [ editor, () => void null ] as const;
	}

	const setEditor = (
		attrs: Partial< Pick< typeof editor, 'areChangesActive' > >
	) => setPageAttribute( attrName, { ...editor, ...attrs } );
	return [ editor, setEditor ] as const;
};