/* eslint-disable jsx-a11y/control-has-associated-label */
/* eslint-disable react/require-default-props */
import { MathJax, MathJaxContext } from 'better-react-mathjax';
import { observer } from 'mobx-react';
import React from 'react';
import * as Tb from 'react-icons/tb';
import ReactMarkdown from 'react-markdown';
import './MessageComponent.scss';
import { AssistantMessage } from './types';

const TbCircles = [
    Tb.TbCircleNumber0Filled,
    Tb.TbCircleNumber1Filled,
    Tb.TbCircleNumber2Filled,
    Tb.TbCircleNumber3Filled,
    Tb.TbCircleNumber4Filled,
    Tb.TbCircleNumber5Filled,
    Tb.TbCircleNumber6Filled,
    Tb.TbCircleNumber7Filled,
    Tb.TbCircleNumber8Filled,
    Tb.TbCircleNumber9Filled,
];
interface MessageComponentProps {
    message: AssistantMessage;
    toggleToolLogs: (index: number) => void;
    expandedLogIndex: number | null;
    index: number;
    showModal: () => void;
    goToLinkedDoc: (url: string) => void;
    setCurrentFile: (file: { url: string }) => void;
    isCurrent?: boolean;
}

const LinkRendererWrapper = (goToLinkedDoc: (url: string) => void, showModal: () => void, setCurrentFile: (file: { url: string }) => void) =>
    function LinkRenderer({ href, children }: { href?: string; children?: React.ReactNode }) {
        const Children = TbCircles[Number(children)]; // pascal case variable needed to convert IconType to JSX.Element tag
        const [, aurl, linkType] = href?.match(/([a-zA-Z0-9_.!-]+)~~~(citation|file_path)/) ?? [undefined, href, null];
        const renderType = (content: JSX.Element | null, click: (url: string) => void):JSX.Element => (
            // eslint-disable-next-line jsx-a11y/anchor-is-valid
            <a className={`MessageComponent-${linkType}`}
                href="#"
                onClick={e => {
                    e.preventDefault();
                    aurl && click(aurl);
                }}>
                {content}
            </a> 
        ); // prettier-ignore
        switch (linkType) {
            case 'citation':   return renderType(<Children />, (url: string) => goToLinkedDoc(url));
            case 'file_path':  return renderType(null, (url: string) => { showModal(); setCurrentFile({ url }); });
            default:           return null;
        } // prettier-ignore
    };

const MessageComponent: React.FC<MessageComponentProps> = function ({ message, toggleToolLogs, expandedLogIndex, goToLinkedDoc, index, showModal, setCurrentFile, isCurrent = false }) {
    // const messageClass = `${message.role} ${isCurrent ? 'current-message' : ''}`;
    return (
        <div className={`message ${message.role}`}>
            <MathJaxContext>
                <MathJax dynamic hideUntilTypeset="every">
                    <ReactMarkdown components={{ a: LinkRendererWrapper(goToLinkedDoc, showModal, setCurrentFile) }}>{message.text}</ReactMarkdown>
                </MathJax>
            </MathJaxContext>
            {message.image && <img src={message.image} alt="" />}
            <div className="message-footer">
                {message.tool_logs && (
                    <button type="button" className="toggle-logs-button" onClick={() => toggleToolLogs(index)}>
                        {expandedLogIndex === index ? 'Hide Code Interpreter Logs' : 'Show Code Interpreter Logs'}
                    </button>
                )}
                {expandedLogIndex === index && (
                    <div className="tool-logs">
                        <pre>{message.tool_logs}</pre>
                    </div>
                )}
            </div>
        </div>
    );
};

export default observer(MessageComponent);