import React, { useMemo, useState } from "react"
import { Editable, withReact, Slate } from "slate-react"
import { createEditor } from "slate"
import { withHistory } from "slate-history"
import { useCollaborativeEditor } from "@slate-collaborate/plugin"

/**
 * Set default initial value
 */
const initialValue = [
  { type: "paragraph", children: [{ text: "Hello world" }] },
]

export function MinimalEditor() {
  /**
   * Prefer `useState` to prevent crashes if you are using live reload like
   * in Next.js.
   *
   * https://github.com/ianstormtaylor/slate/issues/4081
   */
  const [editor] = useState(() => withHistory(withReact(createEditor())))

  /**
   * The `param` allows us to send values to the collaboration server which we
   * can use for authentication and authorization. Params not used for this
   * demo but value must be passed into `useCollaborativeEditor`
   *
   * It must be memoized.
   */
  const param = useMemo(() => {
    return {}
  }, [])

  /**
   * This is the meat of collaborative editing. It wires everything up against
   * the Collaborative server.
   *
   * `ready` is a boolean that tells us if the Editor is ready to start
   * editing. We don't want edits to happen before we've started the
   * collaborative editing session. Typically, this delay is not noticeable.
   */
  const { ready, value, onChange } = useCollaborativeEditor({
    serviceURL: "ws://ec2-184-72-124-41.compute-1.amazonaws.com:8080",
    editor,
    documentId: "articles/12345", // unique identifier for document
    param,
    initialValue,
  })

  return (
    <Slate editor={editor} value={value} onChange={onChange}>
      <Editable
        readOnly={!ready}
        style={{ border: "1px solid #c0c0c0", padding: "1em" }}
      />
    </Slate>
  )
}