import React from 'react';
import { CommunicationRequest } from 'fhir/r4';
import { FhirCodeableConceptDisplay } from '../../utils/fhirCodeableConcept';
import { FhirAnnotationDisplay } from '../../utils/fhirAnnotation';
import { FhirReferenceDisplay } from '../../utils/fhirReference';
import { renderField } from '../../utils/renderField';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/dialog';
import { FieldHistoryProvider, FieldHistoryScope } from '../FieldHistory/FieldHistoryProvider';
import { ShowFieldHistoryToggle } from '../FieldHistory/ShowFieldHistoryToggle';
import { RecordEditedMarker } from '../FieldHistory/RecordEditedMarker';
import { FieldGroup, Section } from '../FieldHistory/FieldLayout';

interface FhirCommunicationRequestDisplayProps {
    communicationRequest: CommunicationRequest;
    isOpen: boolean;
    onClose: () => void;
    title?: string;
}

export const FhirCommunicationRequestDisplay: React.FC<FhirCommunicationRequestDisplayProps> = ({
                                                                                                    communicationRequest,
                                                                                                    isOpen,
                                                                                                    onClose,
                                                                                                    title = "Communication Request Details"
                                                                                                }) => {
    if (!isOpen) return null;

    return (
        <Dialog
            open={isOpen}
            onOpenChange={(next) => {
                if (!next) onClose();
            }}
        >
            <DialogContent className="max-h-[90vh] w-full max-w-3xl overflow-y-auto">
                <FieldHistoryProvider>
                    <FieldHistoryScope resourceType="CommunicationRequest" id={communicationRequest.id}>
                        <DialogHeader className="flex-row items-center justify-between gap-4 text-left sm:text-left">
                            <div className="flex items-center gap-2">
                                <DialogTitle>{title}</DialogTitle>
                                <RecordEditedMarker resource={communicationRequest} />
                            </div>
                            <ShowFieldHistoryToggle />
                        </DialogHeader>

                        <FieldGroup>
                            {renderField('Status', communicationRequest.status, 'status')}
                            {renderField('Message Category', <FhirCodeableConceptDisplay code={communicationRequest.category} multiple={true} />)}
                            {renderField('Priority', communicationRequest.priority, 'priority')}
                            {renderField('A Channel of Communication', <FhirCodeableConceptDisplay code={communicationRequest.medium} multiple={true} />)}
                            {renderField('Request(s) Replaced by This Request', <FhirReferenceDisplay references={communicationRequest.replaces} />)}
                            {renderField('Encounter Created as Part of', <FhirReferenceDisplay references={communicationRequest.encounter} />)}
                        </FieldGroup>

                        <Section title="Reason">
                            <FieldGroup>
                                {renderField('Why is Communication Needed?', <FhirCodeableConceptDisplay code={communicationRequest.reasonCode} multiple={true} />)}
                                {renderField('Why is Communication Needed? (References)', <FhirReferenceDisplay references={communicationRequest.reasonReference} />)}
                            </FieldGroup>
                        </Section>

                        <Section title="Notes">
                            <FieldGroup>
                                {renderField('Comments Made About Communication Request', <FhirAnnotationDisplay annotation={communicationRequest.note} multiple={true} />)}
                            </FieldGroup>
                        </Section>
                    </FieldHistoryScope>
                </FieldHistoryProvider>
            </DialogContent>
        </Dialog>
    );
};

export default FhirCommunicationRequestDisplay;