import React from "react";
import katex from "katex";
import splitAtDelimiters from "./splitAtDelimiters";

import "katex/dist/katex.css";
import "./mediaarea.css";
import References from "./references";
import { DescriptiveReference } from "../../../common/graph/node";

interface MediaAreaProps {
    description: string;
    image?: string;
    video?: string;
    references?: DescriptiveReference[];
}

/**
 * This component displays media-related information associated with a specific node.
 * @param description The node description.
 * @param image Link to an image.
 * @param video Link to a video.
 * @param references List of additional reference links.
 * @constructor
 */
function MediaArea({ description, image, video, references }: MediaAreaProps) {
    const text = splitAtDelimiters(description, [
        { left: "$$", right: "$$", display: true },
        { left: "$", right: "$", display: true },
    ]);

    return (
        <div className={"media-area"}>
            {image && <img src={image} />}
            <p
                className={"media-area-description"}
                // dangerouslySetInnerHTML={{
                //     __html: katex.renderToString(description, options),
                // }}
            >
                {text.map((textObj, idx) => {
                    if (textObj.type == "math") {
                        return (
                            <span
                                key={idx}
                                dangerouslySetInnerHTML={{
                                    __html: katex.renderToString(textObj.data),
                                }}
                            ></span>
                        );
                    } else {
                        return <span key={idx}>{textObj.data}</span>;
                    }
                })}
            </p>

            {video && (
                <video
                    controls={true}
                    className={"media-area-video"}
                    src={video}
                />
            )}

            {references && (
                <div className={"media-area-references"}>
                    <h6>Weiterführende Links</h6>
                    <References references={references} />
                </div>
            )}
            <div className={"media-area-spacer"}></div>
        </div>
    );
}

export default MediaArea;