import React from 'react';
import { Annotation } from 'fhir/r4';
import { formatDate } from './dateUtils';

interface FhirAnnotationDisplayProps {
    annotation: Annotation | Annotation[] | undefined | null;
    className?: string;
    emptyText?: string;
    multiple?: boolean;
}

export const formatFhirAnnotation = (annotation: Annotation | undefined | null): string => {
    if (!annotation) {
        return '';
    }
    return annotation.text || '';
};

export const FhirAnnotationDisplay: React.FC<FhirAnnotationDisplayProps> = ({
                                                                                annotation,
                                                                                className,
                                                                                emptyText = '',
                                                                                multiple = false
                                                                            }) => {
    if (!annotation || (Array.isArray(annotation) && annotation.length === 0)) {
        return <span className={className}>{emptyText || '-'}</span>;
    }

    if (multiple && Array.isArray(annotation)) {
        return (
            <div className={className}>
                {annotation.map((note, index) => (
                    <div
                        key={index}
                        style={{
                            marginBottom: index < annotation.length - 1 ? '8px' : '0',
                            padding: '8px',
                            backgroundColor: '#f6f7f7',
                            borderRadius: '4px',
                            fontSize: '14px'
                        }}
                    >
                        <div style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
                            {note.text || '-'}
                        </div>
                        {(note.authorString || note.time) && (
                            <div style={{
                                marginTop: '4px',
                                fontSize: '12px',
                                color: '#666',
                                fontStyle: 'italic'
                            }}>
                                {note.authorString && `By: ${note.authorString}`}
                                {note.authorString && note.time && ' • '}
                                {note.time && formatDate(note.time)}
                            </div>
                        )}
                    </div>
                ))}
            </div>
        );
    }

    const singleAnnotation = Array.isArray(annotation) ? annotation[0] : annotation;
    const formattedAnnotation = formatFhirAnnotation(singleAnnotation);

    return (
        <div className={className} style={{
            padding: '8px',
            backgroundColor: '#f6f7f7',
            borderRadius: '4px',
            fontSize: '14px'
        }}>
            <div style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
                {formattedAnnotation || emptyText || '-'}
            </div>
            {singleAnnotation && (singleAnnotation.authorString || singleAnnotation.time) && (
                <div style={{
                    marginTop: '4px',
                    fontSize: '12px',
                    color: '#666',
                    fontStyle: 'italic'
                }}>
                    {singleAnnotation.authorString && `By: ${singleAnnotation.authorString}`}
                    {singleAnnotation.authorString && singleAnnotation.time && ' • '}
                    {singleAnnotation.time && formatDate(singleAnnotation.time)}
                </div>
            )}
        </div>
    );
};