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

interface FhirRatioDisplayProps {
    ratio: Ratio | undefined | null;
    className?: string;
    emptyText?: string;
    separator?: string;
}

export const formatFhirRatio = (ratio: Ratio | undefined | null, separator: string = ' : '): string => {
    if (!ratio) {
        return '';
    }

    const numerator = ratio.numerator?.value ?? '';
    const denominator = ratio.denominator?.value ?? '';
    const numeratorUnit = ratio.numerator?.code || ratio.numerator?.unit || '';
    const denominatorUnit = ratio.denominator?.code || ratio.denominator?.unit || '';

    if (!numerator && !denominator) {
        return '';
    }

    const numeratorStr = `${numerator}${numeratorUnit ? ` ${numeratorUnit}` : ''}`;
    const denominatorStr = `${denominator}${denominatorUnit ? ` ${denominatorUnit}` : ''}`;

    if (numerator && denominator) {
        return `${numeratorStr}${separator}${denominatorStr}`;
    }

    if (numerator) {
        return numeratorStr;
    }

    if (denominator) {
        return denominatorStr;
    }

    return '';
};

export const FhirRatioDisplay: React.FC<FhirRatioDisplayProps> = ({
                                                                      ratio,
                                                                      className,
                                                                      emptyText = '',
                                                                      separator = ' : '
                                                                  }) => {
    const formattedRatio = formatFhirRatio(ratio, separator);

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