import { observer } from "mobx-react-lite";
import { memo } from "react";
import ReactMarkdown from "react-markdown";
import rehypeKatex from "rehype-katex";
import rehypeRaw from "rehype-raw";
import remarkBreaks from "remark-breaks";
import remarkGfm from "remark-gfm";
import remarkMath from "remark-math";
import useCurrentUser from "@/hooks/useCurrentUser";
import { cn } from "@/lib/utils";
import { memoStore } from "@/store";
import { useTranslate } from "@/utils/i18n";
import { remarkPreserveType } from "@/utils/remark-plugins/remark-preserve-type";
import { remarkTag } from "@/utils/remark-plugins/remark-tag";
import { isSuperUser } from "@/utils/user";
import { CodeBlock } from "./CodeBlock";
import { createConditionalComponent, isTagNode, isTaskListItemNode } from "./ConditionalComponent";
import { useCompactLabel, useCompactMode } from "./hooks";
import { MemoContentContext } from "./MemoContentContext";
import { Tag } from "./Tag";
import { TaskListItem } from "./TaskListItem";
import type { MemoContentProps } from "./types";
import "katex/dist/katex.min.css";

const MemoContent = observer((props: MemoContentProps) => {
  const { className, contentClassName, content, memoName, onClick, onDoubleClick } = props;
  const t = useTranslate();
  const currentUser = useCurrentUser();
  const {
    containerRef: memoContentContainerRef,
    mode: showCompactMode,
    toggle: toggleCompactMode,
  } = useCompactMode(Boolean(props.compact));
  const memo = memoName ? memoStore.getMemoByName(memoName) : null;
  const allowEdit = !props.readonly && memo && (currentUser?.name === memo.creator || isSuperUser(currentUser));

  // Context for custom components
  const contextValue = {
    memoName,
    readonly: !allowEdit,
    disableFilter: props.disableFilter,
    parentPage: props.parentPage,
    containerRef: memoContentContainerRef,
  };

  const compactLabel = useCompactLabel(showCompactMode, t as (key: string) => string);

  return (
    <MemoContentContext.Provider value={contextValue}>
      <div className={`w-full flex flex-col justify-start items-start text-foreground ${className || ""}`}>
        <div
          ref={memoContentContainerRef}
          className={cn(
            "markdown-content relative w-full max-w-full wrap-break-word text-base leading-6",
            showCompactMode === "ALL" && "line-clamp-6 max-h-60",
            contentClassName,
          )}
          onMouseUp={onClick}
          onDoubleClick={onDoubleClick}
        >
          <ReactMarkdown
            remarkPlugins={[remarkGfm, remarkBreaks, remarkMath, remarkTag, remarkPreserveType]}
            rehypePlugins={[rehypeRaw, rehypeKatex]}
            components={{
              // Conditionally render custom components based on AST node type
              input: createConditionalComponent(TaskListItem, "input", isTaskListItemNode),
              span: createConditionalComponent(Tag, "span", isTagNode),
              pre: CodeBlock,
              a: ({ href, children, ...props }) => (
                <a href={href} target="_blank" rel="noopener noreferrer" {...props}>
                  {children}
                </a>
              ),
            }}
          >
            {content}
          </ReactMarkdown>
        </div>
        {showCompactMode === "ALL" && (
          <div className="absolute bottom-0 left-0 w-full h-12 bg-linear-to-b from-transparent to-background pointer-events-none"></div>
        )}
        {showCompactMode !== undefined && (
          <div className="w-full mt-1">
            <button
              type="button"
              className="w-auto flex flex-row justify-start items-center cursor-pointer text-sm text-primary hover:opacity-80 text-left"
              onClick={toggleCompactMode}
            >
              {compactLabel}
            </button>
          </div>
        )}
      </div>
    </MemoContentContext.Provider>
  );
});

export default memo(MemoContent);