import { FC, useRef, useEffect } from "react";

import "prismjs/themes/prism.css";
// @ts-ignore
import codeSyntaxHighlight from "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js";
import { Viewer } from "@toast-ui/react-editor";

import "@toast-ui/editor/dist/toastui-editor-viewer.css";
// import '@toast-ui/editor/dist/theme/toastui-editor-dark.css';
// import '@toast-ui/editor/dist/toastui-editor.css';
// import '@toast-ui/editor/dist/theme/toastui-editor-dark.css';
import "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css";
//@ts-ignore

import { isDarkMode } from "../utils";
import ImagePreview from "./ImagePreview";
import katexPlugin from "./MarkdownRender/katexPlugin";

interface IProps {
  cleanMode?: boolean;
  content: string;
}
const MarkdownRender: FC<IProps> = ({ content, cleanMode = false }) => {
  const mdContainer = useRef<HTMLDivElement | null>(null);
  const viewerRef = useRef<any>(null);

  useEffect(() => {
    if (mdContainer.current) {
      const links = mdContainer.current.querySelectorAll("a");
      [...links].forEach((link) => {
        link.setAttribute("target", "_blank");
      });
    }
  }, [mdContainer]);

  useEffect(() => {
    // Update viewer content when content changes
    if (viewerRef.current) {
      const instance = viewerRef.current.getInstance();
      if (instance && instance.setMarkdown) {
        instance.setMarkdown(content);
      }
    }
  }, [content]);

  if (cleanMode)
    return <Viewer key={content} initialValue={content} theme={isDarkMode() ? "dark" : "light"}></Viewer>;
  return (
    <>
      <ImagePreview container={mdContainer.current} context="markdown" />
      <div ref={mdContainer} id="MARKDOWN_CONTAINER">
        <Viewer
          ref={viewerRef}
          initialValue={content}
          plugins={[codeSyntaxHighlight, katexPlugin]}
          theme={isDarkMode() ? "dark" : "light"}
        ></Viewer>
      </div>
    </>
  );
};

export default MarkdownRender;
