import { Card, Heading } from '@chakra-ui/react';
import { useState } from 'react';
import { BaseEditor, createEditor, Descendant } from 'slate';
import { Editable, ReactEditor, Slate, withReact } from 'slate-react';

type CustomElement = { type: 'paragraph'; children: CustomText[] };
type CustomText = { text: string };

declare module 'slate' {
  interface CustomTypes {
    Editor: BaseEditor & ReactEditor;
    Element: CustomElement;
    Text: CustomText;
  }
}

export function EditorSlate() {
  const initialValue: Descendant[] = [
    {
      type: 'paragraph',
      children: [{ text: 'A line of text in a paragraph.' }]
    }
  ];

  const [editor] = useState(() => withReact(createEditor()));
  return (
    // Add the editable component inside the context.
    <>
      <Card.Root
        variant={'subtle'}
        width="100%"
        maxWidth="840px"
        minHeight="sm"
        justifyContent="center"
        alignItems="center"
      >
        <Card.Header>
          <Heading textAlign="center">Editor</Heading>
        </Card.Header>
        <Card.Body
          width="90%"
          css={{
            '& *': {
              fontSize: 'revert',
              fontWeight: 'revert'
            }
          }}
        >
          <Slate editor={editor} initialValue={initialValue}>
            <Editable />
          </Slate>
        </Card.Body>
      </Card.Root>
    </>
  );
}