import React from 'react';
import { Reference } from 'fhir/r4';
import { Text } from '../components/ui/text';
import { useFhirServiceContext } from '../services';

interface FhirReferenceDisplayProps {
    references: Reference | Reference[] | undefined | null;
    emptyMessage?: string;
    className?: string;
}

export const FhirReferenceDisplay: React.FC<FhirReferenceDisplayProps> = ({
                                                                              references,
                                                                              emptyMessage = 'No references recorded',
                                                                              className
                                                                          }) => {
    const { extractReferenceType } = useFhirServiceContext();

    if (!references) {
        return (
            <Text variant="muted" style={{ fontStyle: 'italic' }} className={className}>
                {emptyMessage}
            </Text>
        );
    }

    const referenceArray = Array.isArray(references) ? references : [references];

    if (referenceArray.length === 0) {
        return (
            <Text variant="muted" style={{ fontStyle: 'italic' }} className={className}>
                {emptyMessage}
            </Text>
        );
    }

    return (
        <div className={className}>
            {referenceArray.map((ref, index) => (
                <div key={index} style={{
                    marginBottom: index < referenceArray.length - 1 ? '8px' : '0',
                    padding: '12px',
                    backgroundColor: '#f6f7f7',
                    borderRadius: '6px',
                    border: '1px solid #e0e0e0'
                }}>
                    <Text>{extractReferenceType(ref)} - {ref.display || ref.reference || '-'}</Text>
                </div>
            ))}
        </div>
    );
};

export const renderFhirReferences = (references: Reference | Reference[] | undefined | null, emptyMessage: string = 'No references recorded'): React.ReactNode => {
    return <FhirReferenceDisplay references={references} emptyMessage={emptyMessage} />;
};