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

import {
	ArrayEditor as SkaArrayEditor,
	ArrayEditorStrings,
	ArrayEditorStringsContext,
} from '@ska/components'

const STRINGS: ArrayEditorStrings = {
	valuePlaceholder: _x('Value…', 'array-editor', 'ska-blocks'),
	moveUpLabel: _x('Move up', 'array-editor', 'ska-blocks'),
	moveDownLabel: _x('Move down', 'array-editor', 'ska-blocks'),
	removeLabel: _x('Remove', 'array-editor', 'ska-blocks'),
	addLabel: _x('Add', 'array-editor', 'ska-blocks'),
}

export const ArrayEditorStringsProvider: React.FC<{children: React.ReactNode}> = (props) => (
	<ArrayEditorStringsContext.Provider value={STRINGS}>
		{props.children}
	</ArrayEditorStringsContext.Provider>
)

const ArrayEditor: typeof SkaArrayEditor = (props) => (
	<ArrayEditorStringsProvider>
		<SkaArrayEditor {...props} />
	</ArrayEditorStringsProvider>
)

export default ArrayEditor