import React from 'react';
import { Range } from 'fhir/r4';

interface FhirRangeDisplayProps {
    range: Range | undefined | null;
    className?: string;
    emptyText?: string;
    separator?: string;
}

export const formatFhirRange = (range: Range | undefined | null, separator: string = ' - '): string => {
    if (!range) {
        return '';
    }

    const low = range.low?.value;
    const high = range.high?.value;
    const unit = range.low?.unit || range.high?.unit || range.low?.code || range.high?.code || '';

    if (low === undefined && high === undefined) {
        return '';
    }

    if (low !== undefined && high !== undefined) {
        return `${low}${separator}${high}${unit ? ` ${unit}` : ''}`;
    }

    if (low !== undefined) {
        return `≥ ${low}${unit ? ` ${unit}` : ''}`;
    }

    if (high !== undefined) {
        return `≤ ${high}${unit ? ` ${unit}` : ''}`;
    }

    return '';
};

export const FhirRangeDisplay: React.FC<FhirRangeDisplayProps> = ({
                                                                      range,
                                                                      className,
                                                                      emptyText = '',
                                                                      separator = ' - '
                                                                  }) => {
    const formattedRange = formatFhirRange(range, separator);

    return (
        <span className={className}>{formattedRange || emptyText || '-'}</span>
    );
};