import React, { useState } from "react";
import TetronsEditor from "tetrons";
import "tetrons/style.css";
import "./App.css";

export default function App() {
  const [saving, setSaving] = useState(false);

  const [savedDocumentJson] = useState({
    type: "doc",
    content: [
      {
        type: "paragraph",
        content: [
          {
            type: "text",
            text: "Hello 👋 This document was loaded when the editor started.",
          },
        ],
      },
      {
        type: "paragraph",
        content: [
          {
            type: "text",
            text: "You can now edit, autosave, and track versions.",
          },
        ],
      },
    ],
  });

  return (
    <div className="app-root">
      <div className="editor-panel full-width">
        <div className="editor-status">
          {saving ? "Saving…" : "All changes saved"}
        </div>

        <div className="editor-container">
          <TetronsEditor
            apiKey="Your API key"
            initialContent={{ json: savedDocumentJson }}
            onLoad={() => setSaving(false)}
            onChange={() => setSaving(false)}
            config={{
              features: {
                separator: true,
                newFile: true,
                openFile: true,
                saveFile: true,
                cut: true,
                copy: true,
                paste: true,
                undo: true,
                redo: true,
                bold: true,
                italic: true,
                underline: true,
                strikeout: true,
                subscript: true,
                superscript: true,
                fontColor: true,
                highlightColor: true,
                clearFormatting: true,
                bulletedList: true,
                numberedList: true,
                lineHeight: true,
                letterSpacing: true,
                indentIncrease: true,
                indentDecrease: true,
                alignLeft: true,
                alignCenter: true,
                alignRight: true,
                alignJustify: true,
              },
              addOns: {
                insertTable: true,
                insertImage: true,
                insertVideo: true,
                insertAudio: true,
                insertCheckboxList: true,
                insertLink: true,
                insertComments: true,
                insertEmoji: true,
                insertHorizontalRule: true,
                insertEmbedVideo: true,
                zoomIn: true,
                zoomOut: true,
                print: true,
                exportFile: true,
                resetFormatting: true,
                preview: true,
                spellCheck: true,
                voice: true,
                ai: true,
                languageConverter: true,
                codeEditor: true,
                mathEquation: true,
                virtualKeyboard: true,
                getContentFromImage: true,
              },
              autoSave: true,
              showVersions: true,
              ui: {
                topMenu: true,
                paragraphDropdown: true,
                fontDropdown: true,
                fontSizeDropdown: true,
              },
            }}
          />
        </div>
      </div>
    </div>
  );
}