'use client'

// https://xdsoft.net/jodit/play.html?spellcheck=true&language=ua&direction=ltr&saveHeightInStorage=true&saveModeInStorage=true&defaultActionOnPaste=insert_as_text&disablePlugins=ai-assistant%2Cmobile%2Cprint%2Cspeech-recognize%2Ctable%2Ctable-keyboard-navigation%2Cpowered-by-jodit%2Ciframe&minHeight=360&maxHeight=NaN&maxWidth=NaN&buttons=bold%2Citalic%2Cunderline%2Cstrikethrough%2Ceraser%2Cul%2Col%2Cfont%2Cfontsize%2Cparagraph%2ClineHeight%2Csuperscript%2Csubscript%2CclassSpan%2Cfile%2Cimage%2Cvideo%2Cspellcheck%2Ccut
//import JoditEditor from 'jodit-react'
import dynamic from 'next/dynamic'
import React, {useMemo, useRef, useState} from 'react'

const JoditEditor = dynamic(() => import('jodit-react'), {ssr: false})

export default function BasicEditor({
	placeholder,
	maxHeight,
	handleChange
}: {
	placeholder: string
	maxHeight: number
	handleChange: any
}) {
	const editor = useRef(null)
	const [content, setContent] = useState('')

	const config = useMemo(
		() => ({
			readonly: false, // all options from https://xdsoft.net/jodit/docs/,
			placeholder: placeholder || 'Start typings...',
			spellcheck: true,
			language: 'ua',
			saveHeightInStorage: true,
			saveModeInStorage: true,
			//defaultActionOnPaste: 'insert_as_text',
			disablePlugins:
				'ai-assistant,mobile,print,speech-recognize,table,table-keyboard-navigation,powered-by-jodit,iframe',
			minHeight: maxHeight || 320,
			maxHeight: 1100,
			// maxWidth: 992,
			uploader: {
				insertImageAsBase64URI: true,
				imagesExtensions: ['jpg', 'png', 'jpeg', 'gif', 'svg', 'webp']
			},
			buttons:
				'bold,italic,underline,strikethrough,eraser,ul,ol,font,fontsize,paragraph,lineHeight,superscript,subscript,classSpan,file,image,video,spellcheck,cut'
		}),
		[placeholder, maxHeight]
	)

	return (
		<JoditEditor
			ref={editor}
			value={content}
			config={config}
			tabIndex={1} // tabIndex of textarea
			onBlur={newContent => setContent(newContent)} // preferred to use only this option to update the content for performance reasons
			onChange={handleChange}
		/>
	)
}