import React, { useRef, useEffect, useState } from "react";
import ToastEditor from "tui-image-editor";

import EditorHeader from "./EditorHeader";
import ImageResizer from "./ImageResizer";

import { editorOptions } from "utils/editorOptions";
import { SubmenuContext } from "context/Submenu";

import "tui-image-editor/dist/tui-image-editor.css";
import "./Editor.scss";
import "./EditorPage.scss";

// @ts-ignore
const initialEditor:ToastEditor = new ToastEditor(document.querySelector("#hidden-editor"), editorOptions);

function getEditorClass(size: number, subMenuVisible: boolean) {
  return `my-editor tui-image-editor-container left ${!subMenuVisible ? "submenu-hidden" : ""} size-${size}`;
}

function EditorPage() {
  const imageEditorRef = useRef<HTMLDivElement>(null);
  const [editor, setEditor] = useState(initialEditor);
  const [submenuVisible, setSubmenuVisible] = useState(true);
  const [size, setSize] = useState(1);

  useEffect(() => {
    // @ts-ignore
    setEditor(new ToastEditor(imageEditorRef.current, editorOptions));

    return () => {
      initialEditor.destroy();
    };
  }, []);

  function onChangeSubmenuVisible() {
    setSubmenuVisible(!submenuVisible);
  }

  return (
    <>
      <SubmenuContext.Provider value={{ visible: submenuVisible, onChange: onChangeSubmenuVisible }}>
        <EditorHeader editor={editor} />
        <div className={getEditorClass(size, submenuVisible)} ref={imageEditorRef} />
        <ImageResizer size={size} setSize={setSize} />
      </SubmenuContext.Provider>
    </>
  );
}

export default EditorPage;