import { generateSlug } from "./general";
import rangeParser from "parse-numeric-range";
import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
import tsx from "react-syntax-highlighter/dist/cjs/languages/prism/tsx";
import typescript from "react-syntax-highlighter/dist/cjs/languages/prism/typescript";
import scss from "react-syntax-highlighter/dist/cjs/languages/prism/scss";
import bash from "react-syntax-highlighter/dist/cjs/languages/prism/bash";
import markdown from "react-syntax-highlighter/dist/cjs/languages/prism/markdown";
import json from "react-syntax-highlighter/dist/cjs/languages/prism/json";
import { coldarkDark as defaulttheme } from "react-syntax-highlighter/dist/cjs/styles/prism";
import { BiCopy } from "react-icons/bi";
import { Components } from "react-markdown";
SyntaxHighlighter.registerLanguage("tsx", tsx);
SyntaxHighlighter.registerLanguage("typescript", typescript);
SyntaxHighlighter.registerLanguage("scss", scss);
SyntaxHighlighter.registerLanguage("bash", bash);
SyntaxHighlighter.registerLanguage("markdown", markdown);
SyntaxHighlighter.registerLanguage("json", json);

export const MarkdownComponents: Components = {
  h3: (props: any) => {
    const arr = props.children;
    let heading = "";

    for (let i = 0; i < arr.length; i++) {
      if (arr[i]?.type !== undefined) {
        for (let j = 0; j < arr[i].props.children.length; j++) {
          heading += arr[i]?.props?.children[0];
        }
      } else heading += arr[i];
    }

    const slug = generateSlug(heading);
    return (
      <h3 id={slug}>
        <a href={`#${slug}`} {...props}></a>
      </h3>
    );
  },
  code({ node, inline, className, ...props }: any) {
    const match = /language-(\w+)/.exec(className || "");
    const hasMeta = node?.data?.meta;

    const applyHighlights: object = (applyHighlights: number) => {
      if (hasMeta) {
        const RE = /{([\d,-]+)}/;
        const metadata = node.data.meta?.replace(/\s/g, "");
        const strlineNumbers = RE?.test(metadata)
          ? // @ts-ignore
            RE?.exec(metadata)[1]
          : "0";
        const highlightLines = rangeParser(strlineNumbers);
        const highlight = highlightLines;
        const data = highlight.includes(applyHighlights) ? "highlight" : null;
        return { data };
      } else {
        return {};
      }
    };

    return match ? (
      <div>
        <div className="w-full">
          <button
            className="w-fit ml-2 important"
            onClick={() => navigator.clipboard.writeText(props.children)}
          >
            <BiCopy className="hover:text-action important" />
          </button>
        </div>
        <SyntaxHighlighter
          style={defaulttheme}
          language={match[1]}
          PreTag="div"
          className="codeStyle bg-transparent"
          showLineNumbers={true}
          wrapLines={hasMeta ? true : false}
          useInlineStyles={true}
          lineProps={applyHighlights}
          {...props}
        />
      </div>
    ) : (
      <code className={className} {...props} />
    );
  },
};