import * as React from 'react'
import {__, _x} from '@wordpress/i18n'
import cx from 'classnames'

import {
	RecordEditor,
	RecordEditorProps,
	RecordEditorStrings,
	RecordEditorStringsContext,
	RECORD_EDITOR_STRINGS,
	CommitTextControl,
} from '@ska/components'

import {
	VariableValueControl,
} from '.'

import {
	type VariablesValue,
} from '..'

const STRINGS: RecordEditorStrings = {
	...RECORD_EDITOR_STRINGS,
	keyPlaceholder: _x('--var-name', 'record-editor CSS variable name placeholder', 'ska-blocks'),
}

const VariableRecordEditor: React.FC<RecordEditorProps<NonNullable<VariablesValue['record']>>> = (props) => {
	return (
		<RecordEditorStringsContext.Provider value={STRINGS}>
			<RecordEditor
				// @ts-ignore
				KeyControl={CommitTextControl}
				ValueControl={VariableValueControl}
				{...props}
				className={cx('ska-blocks--use-code-inputs', props.className)}
			/>
		</RecordEditorStringsContext.Provider>
	)
}

export default VariableRecordEditor