import {
	BaseControl,
	CheckboxControl,
	TextControl,
} from '@wordpress/components';
import { useEffect, useRef } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
import type { AttributesPropsAndSetter } from '../../types';
import { parseStringArrayWithSingleNestedArray } from '../../util/arrayHelpers';

export const HighlightingControl = ({
	attributes,
	setAttributes,
}: AttributesPropsAndSetter) => {
	const inputRef = useRef<HTMLInputElement>(null);
	useEffect(() => {
		try {
			parseStringArrayWithSingleNestedArray(attributes.lineHighlights);
			inputRef.current
				?.querySelector('input')
				?.classList.remove('cbp-input-error');
		} catch (e) {
			console.error(e);
			inputRef.current
				?.querySelector('input')
				?.classList.add('cbp-input-error');
		}
	}, [attributes.lineHighlights]);
	return (
		<BaseControl id="code-block-pro-show-highlighting">
			<CheckboxControl
				data-cy="enable-highlighting"
				label={__('Line highlights', 'code-block-pro')}
				help={__(
					'Highlight individual lines to bring attention to specific code.',
					'code-block-pro',
				)}
				checked={attributes.enableHighlighting ?? false}
				onChange={(enableHighlighting) => {
					setAttributes({ enableHighlighting });
				}}
			/>
			{attributes.enableHighlighting && (
				<BaseControl id="code-block-pro-show-highlighted-lines">
					<div ref={inputRef}>
						<TextControl
							id="code-block-pro-show-highlighted-lines"
							spellCheck={false}
							autoComplete="off"
							label={__('Highlight the following', 'code-block-pro')}
							help={sprintf(
								__('Try %1$s or %2$s for a range.', 'code-block-pro'),
								'1,5',
								'1,[3,5]',
							)}
							onChange={(lineHighlights) => {
								setAttributes({ lineHighlights });
							}}
							value={attributes?.lineHighlights ?? ''}
						/>
					</div>
				</BaseControl>
			)}
			<CheckboxControl
				data-cy="enable-highlighting-hover"
				label={__('Line highlights on hover', 'code-block-pro')}
				help={__(
					'Every line will be highlighted when hovered.',
					'code-block-pro',
				)}
				checked={attributes.highlightingHover ?? false}
				onChange={(highlightingHover) => {
					setAttributes({ highlightingHover });
				}}
			/>
		</BaseControl>
	);
};