import { Components } from "tinacms/dist/rich-text";
import BlockQuote, { BlockQuoteProps, blockQuoteSchema } from "./block-quote";
import DateTime, { DateTimeProps, dateTimeSchema } from "./date-time";
import { Prism } from "tinacms/dist/rich-text/prism";
import React from "react";
import Image, { ImageProps, imageSchema } from "./image";
import { RichTextTemplate } from "@tinacms/schema-tools";
import sanitizeHtml from "sanitize-html";

const HTMLInline = (props: { value: string }) => {
    const createSanitizedMarkup = (text: string) => {
        return { __html: sanitizeHtml(text, {
            allowedAttributes: {
                div: [ "class" ]
            }
        }) };
    };

    return <span dangerouslySetInnerHTML={ createSanitizedMarkup(props.value) } />;
};

const richTextComponents: Components<{
    BlockQuote: BlockQuoteProps;
    DateTime: DateTimeProps;
    Image: ImageProps;
}> = {
    code_block: (props) => <Prism { ...props } />,
    html: HTMLInline,
    img: (props) => (
        <span className="flex items-center justify-center">
            <img src={ props.url } alt={ props.alt } />
        </span>
    ),
    li: (props) => (
        <li>{ props.children }</li>
    ),
    BlockQuote,
    DateTime,
    Image
};

export const richTextTemplates: RichTextTemplate[] = [
    dateTimeSchema,
    blockQuoteSchema,
    imageSchema
];

export default richTextComponents;