import Editor from '@monaco-editor/react';
import './editor.scss';

const CodeEditor = ( {
	label = '',
	attributes = '',
	setAttributes,
	attributesKey = '',
	onChange = false,
	defaultLanguage = 'css',
	height = '180px',
} ) => {
	const setCustomCss = ( value ) => {
		if ( onChange ) {
			onChange( value );
		} else {
			setAttributes( { [ attributesKey ]: value } );
		}
	};

	return (
		<div className="spl-weather-code-editor-component spl-weather-component-mb">
			<div className="spl-weather-code-editor-label">
				<p className="spl-weather-component-title">{ label }</p>
			</div>
			<div className="spl-weather-code-editor">
				<Editor
					height={ height }
					defaultLanguage={ defaultLanguage }
					theme="vs-dark"
					defaultValue=""
					value={ attributes }
					onChange={ ( e ) => setCustomCss( e ) }
					options={ {
						quickSuggestions: {
							other: 'on',
							comments: 'off',
							strings: 'off',
						},
						quickSuggestionsDelay: 10,
						minimap: {
							enabled: false,
						},
						scrollbar: {
							vertical: 'auto',
							horizontal: 'auto',
							verticalScrollbarSize: 5,
							horizontalScrollbarSize: 5,
							scrollByPage: false,
							ignoreHorizontalScrollbarInContentHeight: false,
						},
						lineNumbersMinChars: 1,
						folding: false,
						wordWrap: 'on',
					} }
				/>
			</div>
		</div>
	);
};
export default CodeEditor;
