import * as React from 'react'
import {_x} from '@wordpress/i18n'

import {
	RecordEditor as SkaRecordEditor,
	RecordEditorStrings,
	RecordEditorStringsContext,
} from '@ska/components'

export const RECORD_EDITOR_STRINGS: RecordEditorStrings = {
	keyPlaceholder: _x('Key…', 'record-editor', 'ska-blocks'),
	valuePlaceholder: _x('Value…', 'record-editor', 'ska-blocks'),
	moveUpLabel: _x('Move up', 'record-editor', 'ska-blocks'),
	moveDownLabel: _x('Move down', 'record-editor', 'ska-blocks'),
	removeLabel: _x('Remove', 'record-editor', 'ska-blocks'),
	addLabel: _x('Add', 'record-editor', 'ska-blocks'),
}

export const RecordEditorStringsProvider: React.FC<{children: React.ReactNode}> = (props) => (
	<RecordEditorStringsContext.Provider value={RECORD_EDITOR_STRINGS}>
		{props.children}
	</RecordEditorStringsContext.Provider>
)

const RecordEditor: typeof SkaRecordEditor = (props) => (
	<RecordEditorStringsProvider>
		<SkaRecordEditor {...props} />
	</RecordEditorStringsProvider>
)

export default RecordEditor