import React, { ReactNode } from "react";
import classNames from "classnames";
import ReactMarkdown, {
  Options as ReactMarkdownProps,
  Components as ReactMarkdownComponents,
} from "react-markdown";
import remarkBreaks from "remark-breaks";
import remarkDirective from "remark-directive";
import remarkDirectiveRehype from "remark-directive-rehype";
import { bem } from "../../utilities/bem";
import {
  MarkdownDirectiveChipJira,
  MarkdownDirectiveChipSalesforce,
  MarkdownDirectiveChipServiceNow,
  MarkdownDirectiveChipZendesk,
  MarkdownDirectiveChipConveyor,
  MarkdownDirectiveChipInfo,
} from "./directives/chip";

const cn = "Markdown";

export interface MarkdownProps extends ReactMarkdownProps {
  children: string;
  className?: string;
  escapeHtml?: boolean;
  skipHtml?: boolean;
  renderPlainText?: boolean;
  directives?: {
    [key: string]: (props: { children: string }) => JSX.Element;
  } | null;
  renderers?: ReactMarkdownComponents | null;
}

export const Markdown = ({
  children,
  className,
  skipHtml = false,
  renderPlainText = false,
  components,
  directives: customDirectives,
  renderers,
  ...rest
}: MarkdownProps) => {
  const plainTextRenderers = renderPlainText
    ? {
        h1: ({ ...props }) => <p {...props} />,
        h2: ({ ...props }) => <p {...props} />,
        h3: ({ ...props }) => <p {...props} />,
        h4: ({ ...props }) => <p {...props} />,
        h5: ({ ...props }) => <p {...props} />,
        h6: ({ ...props }) => <p {...props} />,
        strong: ({ ...props }) => <span {...props} />,
        em: ({ ...props }) => <span {...props} />,
      }
    : undefined;

  const linkRenderer = ({
    href,
    children: text,
  }: {
    href?: string;
    children?: ReactNode;
  }) => {
    const externalLinkProps = {
      target: "_blank",
      rel: "noopener noreferrer",
    };

    if (href?.startsWith("http")) {
      return (
        <a href={href} {...externalLinkProps}>
          {text}
        </a>
      );
    }

    return <a href={href}>{text}</a>;
  };

  const directives = {
    "jira-chip": MarkdownDirectiveChipJira,
    "salesforce-chip": MarkdownDirectiveChipSalesforce,
    "servicenow-chip": MarkdownDirectiveChipServiceNow,
    "zendesk-chip": MarkdownDirectiveChipZendesk,
    "conveyor-chip": MarkdownDirectiveChipConveyor,
    "info-chip": MarkdownDirectiveChipInfo,
    ...customDirectives,
  };

  return (
    <ReactMarkdown
      className={classNames(bem(cn), className)}
      skipHtml={skipHtml}
      components={{
        ...plainTextRenderers,
        ...directives,
        a: linkRenderer,
        ...components,
        ...renderers,
      }}
      remarkPlugins={[remarkBreaks, remarkDirective, remarkDirectiveRehype]}
      {...rest}
    >
      {children}
    </ReactMarkdown>
  );
};