import { useMemo } from "react";
import { styled } from "@mui/material/styles";
import SimpleMDE from "react-simplemde-editor";
import "easymde/dist/easymde.min.css";

const StyledMarkdownEditor = styled("div")(({ theme }) => ({
  "& .editor-toolbar": {
    backgroundColor: theme.palette.background.paper,
    borderColor: theme.palette.divider,
  },
  "& .editor-toolbar button": {
    color: theme.palette.text.primary,
  },
  "& .editor-toolbar button:hover": {
    backgroundColor: theme.palette.action.hover,
  },
  "& .editor-toolbar button:active, & .editor-toolbar button.active": {
    backgroundColor: theme.palette.action.selected,
  },
  "& .editor-statusbar": {
    display: "none",
  },
  "& .CodeMirror": {
    backgroundColor: theme.palette.background.paper,
    color: theme.palette.text.primary,
    borderColor: theme.palette.divider,
    height: "auto",
    minHeight: "400px",
    maxHeight: "500px",
    overflowY: "auto",
    overflowX: "hidden",
    wordWrap: "break-word", // ✅ добавлено
    whiteSpace: "pre-wrap", // ✅ добавлено
  },

  "& .CodeMirror-scroll": {
    minHeight: "400px",
    maxHeight: "500px",
    overflowY: "auto",
    overflowX: "hidden",
    "&::-webkit-scrollbar": {
      display: "none",
    },
    "&": {
      scrollbarWidth: "none",
    },
    wordBreak: "break-word", // ✅ добавлено
  },
  "& .CodeMirror-selected": {
    backgroundColor: `${theme.palette.action.selected} !important`,
  },
  "& .CodeMirror-cursor": {
    borderLeftColor: theme.palette.text.primary,
  },
  "& .cm-header": {
    color: theme.palette.primary.main,
  },
  "& .cm-quote": {
    color: theme.palette.text.secondary,
    fontStyle: "italic",
  },
  "& .cm-link": {
    color: theme.palette.primary.main,
  },
  "& .cm-url": {
    color: theme.palette.secondary.main,
  },
  "& .cm-formatting": {
    color: theme.palette.text.secondary,
  },
  "& .CodeMirror .editor-preview-full": {
    backgroundColor: theme.palette.background.paper,
    color: theme.palette.text.primary,
    borderColor: theme.palette.divider,
  },
  "& .EasyMDEContainer": {
    position: "relative",
    zIndex: 1000,
  },
  "& .guide": {
    display: "none",
  },
}));

export const ReactMarkdownEditor = ({
  options: incomingOptions,
  ...restProps
}: any) => {
  const mergedOptions = useMemo(() => {
    return {
      ...incomingOptions,
      codeMirrorOptions: {
        lineWrapping: true,
      },
      forceSync: true,
      spellChecker: false,
      toolbar: [
        "bold",
        "italic",
        "strikethrough",
        {
          name: "Underline",
          action: (editor: any) => {
            const cm = editor.codemirror;
            const selectedText = cm.getSelection();
            const text = selectedText || "placeholder";
            const output = `<u>${text}</u>`;
            cm.replaceSelection(output);
          },
          className: "fa fa-underline",
          title: "Underline (Ctrl/Cmd-Alt-U)",
        },
        "heading",
        "quote",
        "unordered-list",
        "ordered-list",
        "link",
        "image",
        "code",
        "table",
        "horizontal-rule",
        "preview",
        "fullscreen",
        "guide",
      ],
    };
  }, []); // создаётся один раз

  return (
    <StyledMarkdownEditor
      className="my-markdown-editor"
      sx={{ marginTop: 1.5, marginBottom: 3 }}
    >
      <SimpleMDE options={mergedOptions} {...restProps} />
    </StyledMarkdownEditor>
  );
};