import { BodyText, BodyTextProps, Headline, Link } from '@servicetitan/design-system';
import classNames from 'classnames';
import DOMpurify from 'dompurify';
import { FC, ReactNode, useMemo } from 'react';
import Markdown, { Components } from 'react-markdown';
import rehypeRaw from 'rehype-raw';
import remarkBreaks from 'remark-breaks';
import remarkGfm from 'remark-gfm';
import * as Styles from './markdown-text.module.less';

type Node = { children: ReactNode } & { [key: string]: any };

type MarkdownTextProps = BodyTextProps & {
    text: string;
};

export const MarkdownText: FC<MarkdownTextProps> = ({ className, text, ...rest }) => {
    const markdownComponents: Components = useMemo(
        () => ({
            code({ children, ...rest }: Node) {
                return (
                    <BodyText
                        el="span"
                        className="c-blue-600 bg-neutral-40 border-radius-1"
                        style={{ fontFamily: 'monospace', fontSize: '0.85em' }}
                        {...rest}
                    >
                        {children}
                    </BodyText>
                );
            },
            u({ children }: Node) {
                return <u>{children}</u>;
            },
            a({ children, href }: Node & { href?: string }) {
                return (
                    <Link href={href} target="_blank" primary rel="noopener noreferrer">
                        {children}
                    </Link>
                );
            },
            h1({ children }: Node) {
                return (
                    <Headline el="h1" size="xlarge">
                        {children}
                    </Headline>
                );
            },
            h2({ children }: Node) {
                return (
                    <Headline el="h2" size="large">
                        {children}
                    </Headline>
                );
            },
            h3({ children }: Node) {
                return (
                    <Headline el="h3" size="medium">
                        {children}
                    </Headline>
                );
            },
            h4({ children }: Node) {
                return (
                    <Headline el="h4" size="small">
                        {children}
                    </Headline>
                );
            },
            h5({ children }: Node) {
                return (
                    <Headline el="h5" size="small">
                        {children}
                    </Headline>
                );
            },
            h6({ children }: Node) {
                return (
                    <Headline el="h6" size="small">
                        {children}
                    </Headline>
                );
            },
        }),
        []
    );

    return (
        <BodyText el="div" className={classNames(Styles.content, className)} {...rest}>
            <Markdown
                components={markdownComponents}
                rehypePlugins={[rehypeRaw]}
                remarkPlugins={[remarkGfm, remarkBreaks]}
            >
                {DOMpurify.sanitize(text)}
            </Markdown>
        </BodyText>
    );
};