mdx-components.tsx

import { Callout } from "fumadocs-ui/components/callout";
import { ImageZoom } from "fumadocs-ui/components/image-zoom";
import { Tabs, Tab } from "fumadocs-ui/components/tabs";
import defaultMdxComponents from "fumadocs-ui/mdx";
import { Check, X } from "lucide-react";
import {
  Fragment,
  type ReactNode,
  type ReactElement,
  isValidElement,
} from "react";
import { DynamicCodeBlock } from "fumadocs-ui/components/dynamic-codeblock";
import { CodeBlock, Pre } from "fumadocs-ui/components/codeblock";
import type { MDXComponents } from "mdx/types";
import { cn } from "./lib/utils";

const githubCalloutRegex =
  /^\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]\s*(.*)$/s;

// Helper function to extract text content from React children
function extractTextContent(children: any): string {
  if (typeof children === "string") {
    return children;
  }
  if (typeof children === "number") {
    return children.toString();
  }
  if (children === null || children === undefined) {
    return "";
  }
  if (Array.isArray(children)) {
    return children.map(extractTextContent).join("");
  }
  if (isValidElement(children)) {
    const props = children.props as any;
    if (props && typeof props === "object" && "children" in props) {
      return extractTextContent(props.children);
    }
  }
  return "";
}

// Helper function to parse GitHub callout from text content
function parseGitHubCallout(textContent: string) {
  const calloutMatch = textContent.match(githubCalloutRegex);

  if (!calloutMatch) {
    return null;
  }

  const calloutType = calloutMatch[1].toLowerCase();
  const contentAfterCallout = calloutMatch[2]?.trim() || "";

  // Convert to title case with colon
  const titleCaseType =
    calloutType.charAt(0).toUpperCase() + calloutType.slice(1).toLowerCase();

  // Map GitHub callout types to component types
  let type: "info" | "warn" | "error" = "info";
  let calloutTitle = `${titleCaseType}:`;

  switch (calloutType) {
    case "note":
    case "tip":
    case "important":
      type = "info";
      break;
    case "warning":
    case "caution":
      type = "warn";
      break;
    default:
      type = "info";
  }

  return {
    type,
    title: calloutTitle,
    content: contentAfterCallout,
  };
}

const mdxComponents = {
  ...defaultMdxComponents,
  // blockquote: Callout,
  // blockquote: ({ children }: { children: ReactNode }) => {
  //   let type: "info" | "warn" | "error" = "info";
  //   let calloutContent = children;
  //   let calloutTitle: string | null = null;

  //   try {
  //     if (Array.isArray(children)) {
  //       // Find the first paragraph element
  //       const firstChild = children.find(
  //         (child) => isValidElement(child) && child.type === "p",
  //       );

  //       if (firstChild && firstChild.props.children) {
  //         // Extract text content using helper function
  //         const textContent = extractTextContent(firstChild.props.children);

  //         // Parse GitHub callout format
  //         const calloutData = parseGitHubCallout(textContent);

  //         if (calloutData) {
  //           type = calloutData.type;
  //           calloutTitle = calloutData.title;

  //           if (calloutData.content) {
  //             // Create new content with only the content after callout syntax
  //             calloutContent = [
  //               {
  //                 ...firstChild,
  //                 props: {
  //                   ...firstChild.props,
  //                   children: calloutData.content,
  //                 },
  //               },
  //               // ...children.slice(1)
  //             ];
  //           } else {
  //             // Remove the first paragraph if it only contained callout syntax
  //             calloutContent = children.slice(1);
  //           }
  //         }
  //       }
  //     }
  //   } catch (e) {
  //     console.warn("### MDX Blockquote parse error:", e);
  //   }

  //   return (
  //     <Callout type={type} title={calloutTitle}>
  //       {calloutContent}
  //     </Callout>
  //   );
  // },
  Tabs,
  Tab,
  Check,
  Cross: X,
  // DocImage is used by the rehypeDocImage plugin which renames explicit <img> JSX tags
  // to <DocImage> so they go through this components map and get ImageZoom wrapping.
  // The src it receives already has basePath prepended by the rehype plugin.
  DocImage: (props: any) => {
    const src = typeof props.src === 'object' && props.src !== null && 'src' in props.src ? props.src.src : props.src;

    if (
      !src ||
      (typeof src === 'string' && (
        src.endsWith('.svg') ||
        src.startsWith('data:') ||
        src.includes('img.shields.io')
      ))
    ) {
      return <img {...props} src={src} />;
    }

    const defaultHeight = 300;
    const defaultWidth = 700;
    const width = props.width ? (typeof props.width === 'number' ? props.width : parseInt(props.width) || defaultWidth) : defaultWidth;
    const height = props.height ? (typeof props.height === 'number' ? props.height : parseInt(props.height) || defaultHeight) : defaultHeight;

    console.debug('Rendering DocImage with src:', src, 'width:', width, 'height:', height);
    
    return (
      <ImageZoom
        src={src}
        alt={props.alt || ''}
        height={height}
        width={width}
        // unoptimized
        loading="lazy"
        className="rounded-lg"
      />
    );
  },
  img: (props: any) => {
    // Resolve src if it's an object (static import)
    const src = typeof props.src === 'object' && props.src !== null && 'src' in props.src ? props.src.src : props.src;

    // Skip using ImageZoom for SVG, data URLs, img.shields.io, and if no src
    
    if (
       !src ||
       (typeof src === 'string' && (
         src.endsWith(".svg") ||
         src.startsWith("data:") ||
         src.includes("img.shields.io")
       ))
     ) {
      if (typeof props.src === 'object') {
          return <img {...props} src={src} />;
      }
      return <img {...props} />;
    }

    const defaultHeight = 300;
    const defaultWidth = 700;

    const width = props.width
      ? typeof props.width === "number"
        ? props.width
        : parseInt(props.width) || defaultWidth
      : defaultWidth;
    const height = props.height
      ? typeof props.height === "number"
        ? props.height
        : parseInt(props.height) || defaultHeight
      : defaultHeight;

    // Next.js <Image> (used by ImageZoom) automatically prepends basePath to local paths,
    // so we pass src directly — no manual basePath prefix needed here.
    // (assetPrefix only applies to webpack JS/CSS bundles, not public/ static files.)
    const url: string = src as string;

    return (
      <ImageZoom
        src={url}
        alt={props.alt || ""}
        height={height}
        width={width}
        loading="lazy"
        className="rounded-lg"
      />
    );
  },
  // pre: ({ ...props }) => {
  //   try {
  //     const children = props.children as ReactElement;
  //     let codeLang = "plaintext";
  //     const childProps = children.props as any;
  //     if (childProps?.className) {
  //       const match = childProps.className.match(/language-(\w+)/);
  //       if (match) {
  //         // eslint-disable-next-line prefer-destructuring
  //         codeLang = match[1];
  //       }
  //     }
  //     return (
  //       <DynamicCodeBlock
  //         lang={codeLang}
  //         code={childProps?.children?.trim() || ""}
  //         {...childProps}
  //       />
  //     );
  //   } catch (e) {
  //     return (
  //       <CodeBlock {...props}>
  //         <Pre>{props.children}</Pre>
  //       </CodeBlock>
  //     );
  //   }
  // },
};

export function getMDXComponents(components?: MDXComponents): MDXComponents {
  return {
    ...mdxComponents,
    ...components,
    // PagesOnly: ({ children }: { children: ReactNode }) =>
    //   <Fragment>{children}</Fragment>,
  };
}