import React, { useState, useRef, useCallback, useMemo } from "react";
import { createEditor } from "slate";
import { Slate, Editable, withReact } from "slate-react";
import EmojiPicker from "emoji-picker-react";
import useTranslation from "../../hooks/useTranslation.jsx";
import wordStore from "../../mc/wordStore.json";
const App = () => {
  const { findText } = useTranslation(wordStore);
  const editorRef = useRef();
  const inputRef = useRef();
  const [showEmojiPicker, setShowEmojiPicker] = useState(false);
  const editor = useMemo(() => withReact(createEditor()), []);
  const handleEditorChange = (value) => {
    // Update the editor's value
    // This function will be called whenever the editor's content changes
    // You can perform any necessary logic here
    Editor.isFocused(editor) && Editor.insertText(editor, value);
  };
  const handleEmojiClick = (emoji) => {
    // Insert the selected emoji at the current cursor position
    const { selection } = editor;
    if (selection) {
      const emojiText = `:${emoji.name}:`;
      Editor.insertText(editor, emojiText);
    }
    setShowEmojiPicker(false);
    inputRef.current.focus();
  };
  const toggleEmojiPicker = () => {
    setShowEmojiPicker(!showEmojiPicker);
  };
  return (
    <div>
      <button onClick={toggleEmojiPicker}>
        {findText("Toggle Emoji Picker")}
      </button>
      {showEmojiPicker && (
        <EmojiPicker
          onEmojiClick={handleEmojiClick}
          pickerStyle={{
            position: findText("absolute"),
            bottom: "20px",
            right: "20px",
          }}
        />
      )}
      <Slate editor={editor} value={[]} onChange={handleEditorChange}>
        <Editable
          ref={editorRef}
          onKeyDown={(event) => {
            // Prevent default handling of the "Enter" key
            if (event.key === "Enter") {
              event.preventDefault();
            }
          }}
          renderElement={(props) => <div {...props} />}
          renderLeaf={(props) => <span {...props} />}
          autoFocus
        />
      </Slate>
      <input ref={inputRef} />
    </div>
  );
};
export default App;
