import ReactMarkdown from "react-markdown"
import remarkGfm from "remark-gfm"
import CodeBlock from "@/components/CodeBlock"
import remarkMath from "remark-math"
import rehypeKatex from "rehype-katex"
import "katex/dist/katex.min.css"
import { Skeleton } from "@/components/ui/skeleton"
import BodyLink from "./BodyLink"

const EntryLoadingSkeleton = () => {
   return (
      <div className="space-y-2 max-w-2xl p-4 lg:p-6">
         {/*

			<Skeleton className="h-[400px] md:h-[800px] max-w-2xl rounded-none" />
		*/}

         <Skeleton className="h-4 max-w-full" />
         <Skeleton className="h-4 md:max-w-xl max-w-[300px]" />
         <Skeleton className="h-4 md:max-w-[400px] max-w-[250px]" />
         <Skeleton className="h-4 md:max-w-[300px] max-w-[200px]" />
         <Skeleton className="h-4 md:max-w-[200px] max-w-[150px]" />
         <Skeleton className="h-4 md:max-w-[100px] max-w-[100px]" />
      </div>
   )
}

const ImagePreprocessor = (src) => {
   const filename = src.src.split("/").pop()
   const s3RootUrl = "https://eolas.s3.systemsobscure.net/"
   return <img src={s3RootUrl + filename} />
}

export default function EntryBody({ body, isLoading }) {
   if (isLoading) {
      return <EntryLoadingSkeleton />
   } else
      return (
         <div className="max-w-2xl p-4 lg:p-6">
            <ReactMarkdown
               remarkPlugins={[remarkGfm, remarkMath]}
               rehypePlugins={[rehypeKatex]}
               components={{
                  h1: () => null,
                  h2: ({ children }) => (
                     <h2 className="scroll-m-20 font-semibold mt-8 mb-4 first:mt-0">{children}</h2>
                  ),
                  h3: ({ children }) => (
                     <h3 className="scroll-m-20 font-semibold mt-8 mb-4 first:mt-0">{children}</h3>
                  ),
                  h4: ({ children }) => (
                     <h4 className="scroll-m-20 font-semibold mt-8 mb-4 first:mt-0">{children}</h4>
                  ),
                  p: ({ children }) => (
                     <p className="leading-[1.5] mb-4 not-first:mt-4">{children}</p>
                  ),
                  ul: ({ children }) => (
                     <ul className="list-disc ml-10 mb-4 space-y-1">{children}</ul>
                  ),
                  ol: ({ children }) => (
                     <ol className="list-decimal ml-10 mb-4 space-y-1">{children}</ol>
                  ),
                  table: ({ children }) => (
                     <table className="w-full mb-4 text-sm">{children}</table>
                  ),
                  tr: ({ children }) => (
                     <tr className="even:bg-muted m-0 border-t p-0">{children}</tr>
                  ),
                  th: ({ children }) => (
                     <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
                        {children}
                     </th>
                  ),
                  td: ({ children }) => (
                     <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
                        {children}
                     </td>
                  ),
                  blockquote: ({ children }) => (
                     <blockquote className="mt-4 border-l-2 pl-6 text-muted-foreground">
                        {children}
                     </blockquote>
                  ),
                  pre: ({ children }) => {
                     const child = children.props
                     return <CodeBlock className={child.className}>{child.children}</CodeBlock>
                  },
                  code: ({ children }) => (
                     <code className="rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">
                        {children}
                     </code>
                  ),
                  img: ({ src }) => <ImagePreprocessor src={src} />,
                  a: ({ href, children }) => {
                     return <BodyLink link={href} children={children} />
                  },
               }}
            >
               {body}
            </ReactMarkdown>
         </div>
      )
}
