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

interface FhirPeriodDisplayProps {
    period: Period | undefined | null;
    className?: string;
    emptyText?: string;
    separator?: string;
}

export const formatFhirPeriod = (period: Period | undefined | null, separator: string = ' - '): string => {
    if (!period) {
        return '';
    }

    const start = period.start ? formatDate(period.start) : '';
    const end = period.end ? formatDate(period.end) : '';

    if (!start && !end) {
        return '';
    }

    if (start && end) {
        return `${start}${separator}${end}`;
    }

    if (start) {
        return `From ${start}`;
    }

    if (end) {
        return `Until ${end}`;
    }

    return '';
};

export const FhirPeriodDisplay: React.FC<FhirPeriodDisplayProps> = ({
                                                                        period,
                                                                        className,
                                                                        emptyText = '',
                                                                        separator = ' - '
                                                                    }) => {
    const formattedPeriod = formatFhirPeriod(period, separator);

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