/**
 * WordPress dependencies
 */
import { useSelect } from '@safe-wordpress/data';
import { addQueryArgs } from '@safe-wordpress/url';

/**
 * External dependencies
 */
import clsx from 'clsx';
import { usePageAttribute } from '@nab/data';
import { store as NAB_EDITOR } from '@nab/editor';
import type { AlternativeId } from '@nab/types';

/**
 * Internal dependencies
 */
import './style.scss';
import { Sidebar } from '../sidebar';
import { CssPreview } from '../preview';
import type { AlternativeAttributes } from '../../../../../../../../../packages/experiment-library/css/types';

export type LayoutProps = {
	readonly alternativeId: AlternativeId;
};

export const Layout = ( { alternativeId }: LayoutProps ): JSX.Element => {
	const [ areControlsVisible ] = usePageAttribute(
		'css-preview/areControlsVisible',
		true
	);
	const cssValue = useCssValue( alternativeId );
	const previewUrl = usePreviewUrl();
	return (
		<div className="nab-css-editor">
			<Sidebar
				className={ clsx( {
					'nab-css-editor__sidebar': true,
					'nab-css-editor__sidebar--is-collapsed':
						! areControlsVisible,
				} ) }
				alternativeId={ alternativeId }
			/>

			<CssPreview
				key="nab-css-editor__preview"
				className={ clsx( {
					'nab-css-editor__preview': true,
					'nab-css-editor__preview--is-fullscreen':
						! areControlsVisible,
				} ) }
				previewUrl={ previewUrl }
				value={ cssValue }
			/>
		</div>
	);
};

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

const useCssValue = ( alternativeId: AlternativeId ) =>
	useSelect(
		( select ) =>
			select( NAB_EDITOR ).getAlternative< AlternativeAttributes >(
				alternativeId
			)?.attributes?.css || '',
		[ alternativeId ]
	);

const usePreviewUrl = () =>
	useSelect( ( select ) => {
		const { getAlternative } = select( NAB_EDITOR );
		const alternative = getAlternative( 'control' );
		if ( ! alternative ) {
			return;
		}

		if ( ! alternative.links.preview ) {
			return;
		}

		return addQueryArgs( alternative.links.preview, {
			'nab-css-previewer': true,
			'nab-css-selector-finder': true,
		} );
	}, [] );