/* 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 { 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;
}

function LinkRendererWrapper(goToLinkedDoc: any, showModal: any, setCurrentFile: any) {
    function LinkRenderer({ href, children }: { href?: string; children?: React.ReactNode }) {
        const [, url, linkType] = href?.match(/([a-zA-Z0-9_.!-]+)~~~(citation|file_path)/) ?? [undefined, href, null];
        const Children = linkType === 'citation' ? null : TbCircles[Number(children)];

        return (
            // eslint-disable-next-line jsx-a11y/anchor-is-valid
            <a
                href="#"
                onClick={e => {
                    e.preventDefault();
                    switch (linkType) {
                        case 'citation':
                            goToLinkedDoc(url);
                            break;
                        case 'file_path':
                            showModal();
                            setCurrentFile({ url });
                            break;
                        default:
                    }
                }}
                style={{
                    color: 'lightblue',
                    verticalAlign: linkType === 'citation' ? 'super' : 'baseline',
                    fontSize: linkType === 'citation' ? 'smaller' : 'inherit',
                }}>
                {Children ? <Children /> : null}
            </a>
        );
    }
    return LinkRenderer;
}
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);