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

/**
 * Internal dependencies
 */
import './style.scss';

import { CssEditor } from './css';
import { JavaScriptEditor } from './javascript';
import { PhpEditor } from './php';

import type { Props } from './props';

export type CodeEditorProps = Props & { readonly withBorder?: boolean } & (
		| { readonly language: 'javascript' | 'php' }
		| {
				readonly language: 'css';
				readonly onChangeSelectedRule?: (
					selectors?: ReadonlyArray< string >
				) => void;
				readonly focusedSelector?: string;
		  }
	);

export const CodeEditor = ( {
	language,
	withBorder,
	...props
}: CodeEditorProps ): JSX.Element => {
	const className = clsx( {
		'nab-code-editor': true,
		'nab-code-editor--is-readonly': props.readOnly,
		'nab-code-editor--with-border': !! withBorder,
		[ props.className ?? '' ]: !! props.className,
	} );

	switch ( language ) {
		case 'css':
			return <CssEditor className={ className } { ...props } />;
		case 'javascript':
			return <JavaScriptEditor className={ className } { ...props } />;
		case 'php':
			return <PhpEditor className={ className } { ...props } />;
	}
};