/* -------------------------------------------------------------------------- */
/*                                  MarkDown                                  */
/* -------------------------------------------------------------------------- */
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";

/* -------------------------------------------------------------------------- */
/*                                 Components                                 */
/* -------------------------------------------------------------------------- */
import Typography from "./typography/Typography";
import Heading from "./typography/Heading";

/* -------------------------------------------------------------------------- */
/*                                    Code                                    */
/* -------------------------------------------------------------------------- */
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { dark } from "react-syntax-highlighter/dist/esm/styles/prism";
import Link from "./typography/Link";
import style from "react-syntax-highlighter/dist/esm/styles/hljs/a11y-dark";

export type Props = {
  markdown: string;
};

const Markdown = ({ markdown }: Props) => {
  return (
    <ReactMarkdown
      remarkPlugins={[remarkGfm]}
      children={markdown}
      components={{
        ul: ({ node, ...props }) => (
          <ul
            style={{
              listStyleType: "disc",
            }}
            className="mx-8"
            {...props}
          />
        ),

        ol: ({ node, ...props }) => (
          <ol className="list-decimal mx-8" {...props} />
        ),

        h1: ({ node, ...props }) => (
          <h1
            style={{
              fontWeight: "bold",
              marginInlineEnd: 0,
              marginInlineStart: 0,
              marginBlockStart: 11,
              marginBlockEnd: 11,

              fontSize: 32,
            }}
            {...props}
          />
        ),

        h2: ({ node, ...props }) => (
          <h1
            style={{
              fontWeight: "bold",

              marginInlineEnd: 0,
              marginInlineStart: 0,

              marginBlockStart: 13.28,
              marginBlockEnd: 13.28,

              fontSize: 24,
            }}
            {...props}
          />
        ),

        h3: ({ node, ...props }) => (
          <h1
            style={{
              fontWeight: "bold",

              marginInlineEnd: 0,
              marginInlineStart: 0,

              marginBlockStart: 16,
              marginBlockEnd: 16,

              fontSize: 18.72,
            }}
            {...props}
          />
        ),

        h4: ({ node, ...props }) => (
          <h1
            style={{
              fontWeight: "bold",

              marginInlineEnd: 0,
              marginInlineStart: 0,

              marginBlockStart: 21.28,
              marginBlockEnd: 21.28,
            }}
            {...props}
          />
        ),

        h5: ({ node, ...props }) => (
          <h1
            style={{
              fontWeight: "bold",

              marginInlineEnd: 0,
              marginInlineStart: 0,

              marginBlockStart: 26.72,
              marginBlockEnd: 26.72,

              fontSize: 13.28,
            }}
            {...props}
          />
        ),

        h6: ({ node, ...props }) => (
          <h1
            style={{
              fontWeight: "bold",

              marginInlineEnd: 0,
              marginInlineStart: 0,

              marginBlockStart: 37.28,
              marginBlockEnd: 37.28,

              fontSize: 10.72,
            }}
            {...props}
          />
        ),
        p: Typography,

        a: ({ node, ...props }) => (
          <Link
            className=" inline-flex text-sm font-bold text-blue-500"
            {...props}
          />
        ),

        code({ node, inline, className, children, ...props }) {
          const match = /language-(\w+)/.exec(className || "");
          return !inline && match ? (
            <SyntaxHighlighter
              children={String(children).replace(/\n$/, "")}
              style={dark}
              language={match[1]}
              PreTag="div"
            />
          ) : (
            <code className={className} {...props}>
              {children}
            </code>
          );
        },
      }}
    />
  );
};

export default Markdown;
