import { useState } from 'react';
import { CustomSelectControl } from "../ui/custom-select-control";
import { FormTokenField } from "../ui/form-token-field";
import type { CustomSelectOption } from "../ui/custom-select-control";
import type { TokenItem } from "../ui/form-token-field";
import { ExternalLink, Plus } from 'lucide-react';
import { DismissibleAlert } from '../ui/dismissible-alert';
import { Flex, FlexItem, FlexBlock } from '../ui/flex';
import { SHEET_BODY_TYPES } from '../../utils/sheetBodyDisplays';
import { Sheet, SheetContent } from '../ui/sheet';
import { Controller, useFormContext } from 'react-hook-form';
import {
    AdverseEvent,
    AllergyIntolerance,
    CarePlan,
    CareTeam,
    ClinicalImpression,
    Condition,
    DetectedIssue,
    Device,
    DeviceRequest,
    DeviceUseStatement,
    DocumentReference,
    Encounter,
    EpisodeOfCare,
    FamilyMemberHistory,
    FhirResource,
    Goal,
    HealthcareService,
    Immunization,
    ImmunizationEvaluation,
    ImmunizationRecommendation,
    Location,
    MedicationAdministration,
    MedicationDispense,
    MedicationRequest,
    MedicationStatement,
    NutritionOrder,
    Observation,
    Practitioner,
    Procedure,
    QuestionnaireResponse,
    Reference,
    RelatedPerson,
    Resource,
    RiskAssessment,
    Task,
    VisionPrescription
} from 'fhir/r4';
import {
    useAdverseEventServiceContext,
    useAllergyIntoleranceServiceContext, useAuthServiceContext,
    useCarePlanServiceContext,
    useCareTeamServiceContext,
    useClinicalImpressionServiceContext,
    useConditionServiceContext,
    useDetectedIssueServiceContext,
    useDeviceRequestServiceContext,
    useDeviceServiceContext,
    useDeviceUseStatementServiceContext,
    useDocumentReferenceServiceContext,
    useEncounterServiceContext,
    useEpisodeOfCareServiceContext,
    useFamilyMemberHistoryServiceContext,
    useFhirServiceContext,
    useGoalServiceContext,
    useHealthcareServiceServiceContext,
    useImmunizationEvaluationServiceContext,
    useImmunizationRecommendationServiceContext,
    useImmunizationServiceContext,
    useLocationServiceContext,
    useMedicationAdministrationServiceContext,
    useMedicationDispenseServiceContext,
    useMedicationRequestServiceContext,
    useMedicationStatementServiceContext,
    useNutritionOrderServiceContext,
    useObservationServiceContext,
    usePractitionerRoleServiceContext,
    useProcedureServiceContext,
    useQuestionnaireResponseServiceContext,
    useRelatedPersonServiceContext,
    useRiskAssessmentServiceContext,
    useTaskServiceContext,
    useVisionPrescriptionServiceContext
} from '../../services';
import {
    FhirAdverseEventDisplay,
    FhirAllergyIntoleranceDisplay,
    FhirCarePlanDisplay,
    FhirCareTeamDisplay,
    FhirClinicalImpressionDisplay,
    FhirConditionDisplay,
    FhirDetectedIssueDisplay,
    FhirDeviceDisplay,
    FhirDeviceRequestDisplay,
    FhirDeviceUseStatementDisplay,
    FhirDocumentReferenceDisplay,
    FhirEncounterDisplay,
    FhirEpisodeOfCareDisplay,
    FhirFamilyMemberHistoryDisplay,
    FhirGoalDisplay,
    FhirHealthcareServiceDisplay,
    FhirImmunizationDisplay,
    FhirImmunizationEvaluationDisplay,
    FhirImmunizationRecommendationDisplay,
    FhirLocationDisplay,
    FhirMedicationAdministrationDisplay,
    FhirMedicationDispenseDisplay,
    FhirMedicationRequestDisplay,
    FhirMedicationStatementDisplay,
    FhirNutritionOrderDisplay,
    FhirObservationDisplay,
    FhirProcedureDisplay,
    FhirQuestionnaireResponseDisplay,
    FhirRelatedPersonDisplay,
    FhirRiskAssessmentDisplay,
    FhirTaskDisplay,
    FhirVisionPrescriptionDisplay,
    FhirPractitionerDisplay
} from '../../components';
import {
    AdverseEventModal,
    AllergyIntoleranceModal,
    CarePlanModal,
    CareTeamModal,
    ClinicalImpressionModal,
    ConditionModal,
    DetectedIssueModal,
    DeviceModal,
    DeviceRequestModal,
    DeviceUseStatementModal,
    DocumentReferenceModal,
    EncounterModal,
    EpisodeOfCareModal,
    FamilyMemberHistoryModal,
    GoalModal,
    HealthcareServiceModal,
    ImmunizationEvaluationModal,
    ImmunizationModal,
    ImmunizationRecommendationModal,
    LocationModal,
    MedicationAdministrationModal,
    MedicationDispenseModal,
    MedicationRequestModal,
    MedicationStatementModal,
    NutritionOrderModal,
    ObservationModal,
    ProcedureModal,
    RelatedPersonModal,
    RiskAssessmentModal,
    TaskModal,
    VisionPrescriptionModal
} from '../../modals';
import { formatFhirHumanName } from '../../utils/fhirHumanName.tsx';
import { getNestedError } from '../../utils/formUtils.ts';

interface FhirReferenceProps {
    label: string;
    context: string;
    referenceType: string;
    referenceList?: FhirResource[];
    placeholder?: string;
    disabled?: boolean;
    required?: boolean;
    multiple?: boolean;
    enableInlineActions?: boolean;
}

const FhirReference = ({
                           label,
                           context,
                           referenceType,
                           referenceList = [],
                           placeholder = 'Select a reference',
                           disabled = false,
                           required = false,
                           multiple = false,
                           enableInlineActions = true
                       }: FhirReferenceProps) => {
    const { control, formState: { errors } } = useFormContext();
    const { currentUser, userRole, USER_ROLES } = useAuthServiceContext();

    /**
     * A REFERENCE FIELD THAT WILL REFUSE A SAVE NOW SAYS SO BEFORE THE PRESS.
     *
     * `required` has always reached the Controller below and blocked the submit, and nothing ever put a
     * marker beside the label - so six live call sites (clinical impression, device use statement,
     * encounter, episode of care, immunization evaluation, procedure) could stop a save on a field that
     * looked optional. Both controls here take `label` as a STRING, which is why this is a string rather
     * than the asterisk element the shadcn fields render.
     *
     * Keyed off the same `required` that does the enforcing, so nothing optional gains one.
     */
    const markedLabel = required && label ? `${label} *` : label;
    const { createReferenceObject, extractReferenceId } = useFhirServiceContext();
    const { getPractitionerRoleDisplay } = usePractitionerRoleServiceContext();
    const { getLocationDisplay } = useLocationServiceContext();
    const { getHealthcareServiceDisplay } = useHealthcareServiceServiceContext();
    const { getRelatedPersonDisplay } = useRelatedPersonServiceContext();
    const { getAllergyIntoleranceDisplay } = useAllergyIntoleranceServiceContext();
    const { getFamilyMemberHistoryDisplay } = useFamilyMemberHistoryServiceContext();
    const { getConditionDisplay } = useConditionServiceContext();
    const { getProcedureDisplay } = useProcedureServiceContext();
    const { getAdverseEventDisplay } = useAdverseEventServiceContext();
    const { getClinicalImpressionDisplay } = useClinicalImpressionServiceContext();
    const { getDetectedIssueDisplay } = useDetectedIssueServiceContext();
    const { getObservationDisplay } = useObservationServiceContext();
    const { getMedicationStatementDisplay } = useMedicationStatementServiceContext();
    const { getMedicationRequestDisplay } = useMedicationRequestServiceContext();
    const { getMedicationAdministrationDisplay } = useMedicationAdministrationServiceContext();
    const { getMedicationDispenseDisplay } = useMedicationDispenseServiceContext();
    const { getImmunizationDisplay } = useImmunizationServiceContext();
    const { getImmunizationEvaluationDisplay } = useImmunizationEvaluationServiceContext();
    const { getImmunizationRecommendationDisplay } = useImmunizationRecommendationServiceContext();
    const { getDeviceDisplay } = useDeviceServiceContext();
    const { getDeviceUseStatementDisplay } = useDeviceUseStatementServiceContext();
    const { getDeviceRequestDisplay } = useDeviceRequestServiceContext();
    const { getCarePlanDisplay } = useCarePlanServiceContext();
    const { getCareTeamDisplay } = useCareTeamServiceContext();
    const { getGoalDisplay } = useGoalServiceContext();
    const { getNutritionOrderDisplay } = useNutritionOrderServiceContext();
    const { getRiskAssessmentDisplay } = useRiskAssessmentServiceContext();
    const { getVisionPrescriptionDisplay } = useVisionPrescriptionServiceContext();
    const { getEncounterDisplay } = useEncounterServiceContext();
    const { getEpisodeOfCareDisplay } = useEpisodeOfCareServiceContext();
    const { getDocumentReferenceDisplay } = useDocumentReferenceServiceContext();
    const { getQuestionnaireResponseDisplay } = useQuestionnaireResponseServiceContext();
    const { getTaskDisplay } = useTaskServiceContext();
    const [selectedType, setSelectedType] = useState<string | undefined>();
    const [selectedItem, setSelectedItem] = useState<Resource | undefined>();
    const [showModal, setShowModal] = useState(false);
    const [showCreateModal, setShowCreateModal] = useState<boolean>(false);

    const getDisplayName = (resource: FhirResource): string => {
        if (!resource) return '';

        switch (resource.resourceType) {
            case 'Patient':
            case 'Practitioner':
                return formatFhirHumanName(resource.name) ?? `${resource.resourceType} ${resource.id}`;
            case 'RelatedPerson':
                return getRelatedPersonDisplay(resource);
            case 'Organization':
                return resource.name ?? `Organization ${resource.id}`;
            case 'Location':
                return getLocationDisplay(resource);
            case 'HealthcareService':
                return getHealthcareServiceDisplay(resource);
            case 'Questionnaire':
                return resource.title ?? `Questionnaire ${resource.id}`;
            case 'PractitionerRole':
                // format: "Dr. Name - Specialty at Organization"
                return getPractitionerRoleDisplay(resource);
            case 'FamilyMemberHistory':
                return getFamilyMemberHistoryDisplay(resource);
            case 'AllergyIntolerance':
                return getAllergyIntoleranceDisplay(resource);
            case 'Condition':
                return getConditionDisplay(resource);
            case 'Procedure':
                return getProcedureDisplay(resource);
            case 'AdverseEvent':
                return getAdverseEventDisplay(resource);
            case 'ClinicalImpression':
                return getClinicalImpressionDisplay(resource);
            case 'DetectedIssue':
                return getDetectedIssueDisplay(resource);
            case 'Observation':
                return getObservationDisplay(resource);
            case 'MedicationStatement':
                return getMedicationStatementDisplay(resource);
            case 'MedicationRequest':
                return getMedicationRequestDisplay(resource);
            case 'MedicationAdministration':
                return getMedicationAdministrationDisplay(resource);
            case 'MedicationDispense':
                return getMedicationDispenseDisplay(resource);
            case 'Immunization':
                return getImmunizationDisplay(resource);
            case 'ImmunizationEvaluation':
                return getImmunizationEvaluationDisplay(resource);
            case 'ImmunizationRecommendation':
                return getImmunizationRecommendationDisplay(resource);
            case 'Device':
                return getDeviceDisplay(resource);
            case 'DeviceUseStatement':
                return getDeviceUseStatementDisplay(resource);
            case 'DeviceRequest':
                return getDeviceRequestDisplay(resource);
            case 'CarePlan':
                return getCarePlanDisplay(resource);
            case 'CareTeam':
                return getCareTeamDisplay(resource);
            case 'Goal':
                return getGoalDisplay(resource);
            case 'NutritionOrder':
                return getNutritionOrderDisplay(resource);
            case 'RiskAssessment':
                return getRiskAssessmentDisplay(resource);
            case 'VisionPrescription':
                return getVisionPrescriptionDisplay(resource);
            case 'Encounter':
                return getEncounterDisplay(resource);
            case 'EpisodeOfCare':
                return getEpisodeOfCareDisplay(resource);
            case 'Task':
                return getTaskDisplay(resource);
            case 'QuestionnaireResponse':
                return getQuestionnaireResponseDisplay(resource);
            case 'DocumentReference':
                return getDocumentReferenceDisplay(resource);
            default:
                return `${resource.resourceType} ${resource.id}`;
        }
    };

    const getReferenceDisplayName = (reference: Reference): string => {
        if (!reference) return '';

        if (reference.display) return reference.display;

        if (reference.reference) {
            const [resourceType, id] = reference.reference.split('/');
            const resource = referenceList.find(r => r.id === id && r.resourceType === resourceType);

            if (resource) {
                return getDisplayName(resource);
            }
            return reference.reference;
        }

        return '';
    };

    const findResourceById = (id: string): FhirResource | undefined => {
        return referenceList.find(resource => resource.id === id);
    };

    const create = () => {
        setShowCreateModal(true);
    };

    const view = (customSelectValue: CustomSelectOption | undefined) => {
        if (customSelectValue?.key) {
            const resource = findResourceById(customSelectValue.key);

            if (resource) {
                setSelectedType(resource.resourceType);
                setSelectedItem(resource);
                setShowModal(true);
            }
        }
    };

    const closeModal = () => {
        setShowModal(false);
        setSelectedType(undefined);
        setSelectedItem(undefined);
    };

    const canCreateReference = () => {
        if ([USER_ROLES.PATIENT, USER_ROLES.RELATED_PERSON].includes(userRole as string)) {
            return ['FamilyMemberHistory', 'AllergyIntolerance', 'MedicationStatement', 'Condition', 'Observation'].includes(referenceType);
        } else {
            return !['Location', 'Questionnaire', 'QuestionnaireResponse', 'Practitioner'].includes(referenceType);
        }
    };

    return (
        <>
            <Controller key={context}
                        name={context}
                        control={control}
                        rules={{ required }}
                        render={({ field }) => {
                            if (multiple) {
                                const tokenValues: (string | TokenItem)[] = Array.isArray(field.value)
                                    ? field.value.map((ref: Reference) => {
                                        const displayName = getReferenceDisplayName(ref);
                                        return displayName || '';
                                    })
                                    : [];

                                const suggestions = referenceList.map(resource => getDisplayName(resource));

                                return (
                                    <FormTokenField __experimentalAutoSelectFirstMatch
                                                    __experimentalExpandOnFocus
                                                    __experimentalShowHowTo={false}
                                                    label={markedLabel}
                                                    value={tokenValues}
                                                    onChange={(tokens: (string | TokenItem)[]) => {
                                                        const references = tokens.map(token => {
                                                            const tokenStr = typeof token === 'string' ? token : token.value;
                                                            const resource = referenceList.find(r => getDisplayName(r) === tokenStr);

                                                            if (resource) {
                                                                return createReferenceObject(resource.resourceType, resource.id as string, getDisplayName(resource));
                                                            }

                                                            return null;
                                                        }).filter(Boolean) as Reference[];

                                                        field.onChange(references);
                                                    }}
                                                    suggestions={suggestions}
                                                    disabled={disabled}
                                                    placeholder={placeholder}
                                                    messages={{
                                                        added: 'Reference added.',
                                                        removed: 'Reference removed.',
                                                        remove: 'Remove reference',
                                                        __experimentalInvalid: 'Invalid reference.'
                                                    }}/>
                                );
                            } else {
                                let customSelectValue: CustomSelectOption | undefined;

                                if (field.value) {
                                    const referenceId = extractReferenceId(field.value);
                                    const resource = findResourceById(referenceId);

                                    if (resource) {
                                        customSelectValue = {
                                            key: resource.id as string,
                                            name: getDisplayName(resource)
                                        };
                                    } else if (field.value.display) {
                                        customSelectValue = {
                                            key: referenceId || '',
                                            name: field.value.display
                                        };
                                    }
                                } else {
                                    customSelectValue = {
                                        key: '',
                                        name: ''
                                    };
                                }

                                return (
                                    <Flex>
                                        <FlexBlock>
                                            <CustomSelectControl
                                                                 label={markedLabel}
                                                                 value={customSelectValue}
                                                                 options={[
                                                                     { key: '', name: '' },
                                                                     ...referenceList.map(resource => ({
                                                                         key: resource.id as string,
                                                                         name: getDisplayName(resource)
                                                                     }))
                                                                 ]}
                                                                 onChange={(newValue: { selectedItem: CustomSelectOption }) => {
                                                                     const resource = findResourceById(newValue.selectedItem.key);

                                                                     if (resource) {
                                                                         const reference = createReferenceObject(resource.resourceType, resource.id as string, getDisplayName(resource));

                                                                         field.onChange(reference);
                                                                     }
                                                                 }}
                                                                 placeholder={placeholder}
                                                                 disabled={disabled}/>
                                        </FlexBlock>
                                        {enableInlineActions && (
                                            <>
                                                {customSelectValue?.key && !['Questionnaire'].includes(referenceType) && (
                                                    <FlexItem style={{ marginTop: 24 }}>
                                                        <button type="button"
                                                                className="btn btn-blue-ghost"
                                                                onClick={() => view(customSelectValue)}
                                                                disabled={disabled}>
                                                            <ExternalLink className="w-4 h-4" />
                                                            View{" "}<span className="sr-only">{referenceType}</span>
                                                        </button>
                                                    </FlexItem>
                                                )}
                                                {referenceType && canCreateReference() && (
                                                    <FlexItem style={{ marginTop: 24 }}>
                                                        <button type="button"
                                                                className="btn btn-blue-ghost"
                                                                onClick={() => create()}
                                                                disabled={disabled}>
                                                            <Plus className="w-4 h-4" />
                                                            Create{" "}<span className="sr-only">new {referenceType}</span>
                                                        </button>
                                                    </FlexItem>
                                                )}
                                            </>
                                        )}
                                    </Flex>
                                );
                            }
                        }}/>

            {getNestedError(errors, context) && (
                <DismissibleAlert status="error">
                    {label} is required
                </DismissibleAlert>
            )}

            {/* LocationModal */}
            <LocationModal isOpen={showCreateModal && referenceType === 'Location'}
                           onClose={() => setShowCreateModal(false)}/>

            {/* HealthcareServiceModal */}
            <HealthcareServiceModal isOpen={showCreateModal && referenceType === 'HealthcareService'}
                                    onClose={() => setShowCreateModal(false)}/>

            {/* RelatedPersonModal */}
            <RelatedPersonModal isOpen={showCreateModal && referenceType === 'RelatedPerson'}
                                onClose={() => setShowCreateModal(false)}/>

            {/* FamilyMemberHistoryModal */}
            <FamilyMemberHistoryModal isOpen={showCreateModal && referenceType === 'FamilyMemberHistory'}
                                      onClose={() => setShowCreateModal(false)}/>

            {/* AllergyIntoleranceModal */}
            {showCreateModal && referenceType === 'AllergyIntolerance' && (
                <AllergyIntoleranceModal isOpen={true}
                                         onClose={() => setShowCreateModal(false)}/>
            )}

            {/* ConditionModal */}
            {showCreateModal && referenceType === 'Condition' && (
                <ConditionModal isOpen={showCreateModal && referenceType === 'Condition'}
                                onClose={() => setShowCreateModal(false)}/>
            )}

            {/* ProcedureModal */}
            {showCreateModal && referenceType === 'Procedure' && (
                <ProcedureModal isOpen={true}
                                onClose={() => setShowCreateModal(false)}/>
            )}

            {/* AdverseEventModal */}
            {showCreateModal && referenceType === 'AdverseEvent' && (
                <AdverseEventModal isOpen={true}
                                   onClose={() => setShowCreateModal(false)}/>
            )}

            {/* ClinicalImpressionModal */}
            <ClinicalImpressionModal isOpen={showCreateModal && referenceType === 'ClinicalImpression'}
                                     onClose={() => setShowCreateModal(false)}/>

            {/* DetectedIssueModal */}
            <DetectedIssueModal isOpen={showCreateModal && referenceType === 'DetectedIssue'}
                                onClose={() => setShowCreateModal(false)}/>

            {/* ObservationModal */}
            <ObservationModal isOpen={showCreateModal && referenceType === 'Observation'}
                              onClose={() => setShowCreateModal(false)}/>

            {/* MedicationStatementModal */}
            <MedicationStatementModal isOpen={showCreateModal && referenceType === 'MedicationStatement'}
                                      onClose={() => setShowCreateModal(false)}/>

            {/* MedicationRequestModal */}
            {showCreateModal && referenceType === 'MedicationRequest' && (
                <MedicationRequestModal isOpen={true}
                                        onClose={() => setShowCreateModal(false)}/>
            )}

            {/* MedicationAdministrationModal */}
            <MedicationAdministrationModal isOpen={showCreateModal && referenceType === 'MedicationAdministration'}
                                           onClose={() => setShowCreateModal(false)}/>

            {/* MedicationDispenseModal */}
            <MedicationDispenseModal isOpen={showCreateModal && referenceType === 'MedicationDispense'}
                                     onClose={() => setShowCreateModal(false)}/>

            {/* ImmunizationModal */}
            <ImmunizationModal isOpen={showCreateModal && referenceType === 'Immunization'}
                               onClose={() => setShowCreateModal(false)}/>

            {/* ImmunizationEvaluationModal */}
            <ImmunizationEvaluationModal isOpen={showCreateModal && referenceType === 'ImmunizationEvaluation'}
                                         onClose={() => setShowCreateModal(false)}/>

            {/* ImmunizationRecommendationModal */}
            <ImmunizationRecommendationModal isOpen={showCreateModal && referenceType === 'ImmunizationRecommendation'}
                                             onClose={() => setShowCreateModal(false)}/>

            {/* DeviceModal */}
            <DeviceModal isOpen={showCreateModal && referenceType === 'Device'}
                         onClose={() => setShowCreateModal(false)}/>

            {/* DeviceUseStatementModal */}
            <DeviceUseStatementModal isOpen={showCreateModal && referenceType === 'DeviceUseStatement'}
                                     onClose={() => setShowCreateModal(false)}/>

            {/* DeviceRequestModal */}
            {showCreateModal && referenceType === 'DeviceRequest' && (
                <DeviceRequestModal isOpen={true}
                                    onClose={() => setShowCreateModal(false)}/>
            )}

            {/* CarePlanModal */}
            {showCreateModal && referenceType === 'CarePlan' && (
                <CarePlanModal isOpen={true}
                               onClose={() => setShowCreateModal(false)}/>
            )}

            {/* CareTeamModal */}
            <CareTeamModal isOpen={showCreateModal && referenceType === 'CareTeam'}
                           onClose={() => setShowCreateModal(false)}/>

            {/* GoalModal */}
            <GoalModal isOpen={showCreateModal && referenceType === 'Goal'}
                       onClose={() => setShowCreateModal(false)}/>

            {/* NutritionOrderModal */}
            <NutritionOrderModal isOpen={showCreateModal && referenceType === 'NutritionOrder'}
                                 onClose={() => setShowCreateModal(false)}/>

            {/* RiskAssessmentModal */}
            {showCreateModal && referenceType === 'RiskAssessment' && (
                <RiskAssessmentModal isOpen={true}
                                     onClose={() => setShowCreateModal(false)}/>
            )}

            {/* VisionPrescriptionModal */}
            <VisionPrescriptionModal isOpen={showCreateModal && referenceType === 'VisionPrescription'}
                                     onClose={() => setShowCreateModal(false)}/>

            {/* EncounterModal */}
            <EncounterModal isOpen={showCreateModal && referenceType === 'Encounter'}
                            onClose={() => setShowCreateModal(false)}/>

            {/* EpisodeOfCareModal */}
            <EpisodeOfCareModal isOpen={showCreateModal && referenceType === 'EpisodeOfCare'}
                                onClose={() => setShowCreateModal(false)}/>

            {/* TaskModal */}
            {showCreateModal && referenceType === 'Task' && (
                <TaskModal isOpen={true}
                           onClose={() => setShowCreateModal(false)}/>
            )}

            {/* DocumentReferenceModal */}
            <DocumentReferenceModal isOpen={showCreateModal && referenceType === 'DocumentReference'}
                                    onClose={() => setShowCreateModal(false)}/>

            {/* FhirLocationDisplay */}
            <FhirLocationDisplay location={selectedItem as Location}
                                 isOpen={selectedType === 'Location' && showModal}
                                 onClose={closeModal}/>

            {/* FhirHealthcareServiceDisplay */}
            <FhirHealthcareServiceDisplay healthcareService={selectedItem as HealthcareService}
                                          isOpen={selectedType === 'HealthcareService' && showModal}
                                          onClose={closeModal}/>

            {/* FhirPractitionerDisplay */}
            <FhirPractitionerDisplay practitioner={selectedItem as Practitioner}
                                     isOpen={selectedType === 'Practitioner' && showModal}
                                     onClose={closeModal}/>

            {/* FhirRelatedPersonDisplay - mounted only when the selection IS one, because this
                display asks the identity endpoint for whatever id it is handed. */}
            {selectedType === 'RelatedPerson' && (
                <FhirRelatedPersonDisplay relatedPerson={selectedItem as RelatedPerson}
                                          isOpen={showModal}
                                          onClose={closeModal}/>
            )}

            {/* FhirFamilyMemberHistoryDisplay */}
            <FhirFamilyMemberHistoryDisplay familyMemberHistory={selectedItem as FamilyMemberHistory}
                                            isOpen={selectedType === 'FamilyMemberHistory' && showModal}
                                            onClose={closeModal}/>

            {/* FhirAllergyIntoleranceDisplay */}
            <FhirAllergyIntoleranceDisplay allergyIntolerance={selectedItem as AllergyIntolerance}
                                           isOpen={selectedType === 'AllergyIntolerance' && showModal}
                                           onClose={closeModal}/>

            {/* FhirConditionDisplay */}
            <FhirConditionDisplay condition={selectedItem as Condition}
                                  isOpen={selectedType === 'Condition' && showModal}
                                  onClose={closeModal}/>

            {/* FhirProcedureDisplay */}
            <FhirProcedureDisplay procedure={selectedItem as Procedure}
                                  isOpen={selectedType === 'Procedure' && showModal}
                                  onClose={closeModal}/>

            {/* FhirAdverseEventDisplay */}
            <FhirAdverseEventDisplay adverseEvent={selectedItem as AdverseEvent}
                                     isOpen={selectedType === 'AdverseEvent' && showModal}
                                     onClose={closeModal}/>

            {/* FhirClinicalImpressionDisplay */}
            <FhirClinicalImpressionDisplay clinicalImpression={selectedItem as ClinicalImpression}
                                           isOpen={selectedType === 'ClinicalImpression' && showModal}
                                           onClose={closeModal}/>

            {/* FhirDetectedIssueDisplay */}
            <FhirDetectedIssueDisplay detectedIssue={selectedItem as DetectedIssue}
                                      isOpen={selectedType === 'DetectedIssue' && showModal}
                                      onClose={closeModal}/>

            {/* These displays draw only a sheet's contents, so the sheet is ours to open. */}
            <Sheet
                open={showModal && SHEET_BODY_TYPES.has(selectedType ?? '')}
                onOpenChange={(open) => {
                    if (!open) closeModal();
                }}
            >
                <SheetContent className="ak-panel gap-0 sm:max-w-[700px] sm:min-w-[700px]">
                    {/* FhirObservationDisplay */}
                    <FhirObservationDisplay observation={selectedItem as Observation}
                                            isOpen={selectedType === 'Observation' && showModal}
                                            onClose={closeModal}
                                            showReportedSource={![USER_ROLES.PATIENT, USER_ROLES.RELATED_PERSON].includes(userRole as string)}/>
                    {/* FhirMedicationStatementDisplay */}
                    <FhirMedicationStatementDisplay medicationStatement={selectedItem as MedicationStatement}
                                                    isOpen={selectedType === 'MedicationStatement' && showModal}
                                                    onClose={closeModal}/>
                    {/* FhirMedicationRequestDisplay */}
                    <FhirMedicationRequestDisplay medicationRequest={selectedItem as MedicationRequest}
                                                  isOpen={selectedType === 'MedicationRequest' && showModal}
                                                  onClose={closeModal}/>
                    {/* FhirDeviceDisplay */}
                    <FhirDeviceDisplay device={selectedItem as Device}
                                       isOpen={selectedType === 'Device' && showModal}
                                       onClose={closeModal}/>
                    {/* FhirDeviceUseStatementDisplay */}
                    <FhirDeviceUseStatementDisplay deviceUseStatement={selectedItem as DeviceUseStatement}
                                                   isOpen={selectedType === 'DeviceUseStatement' && showModal}
                                                   onClose={closeModal}/>
                    {/* FhirDeviceRequestDisplay */}
                    <FhirDeviceRequestDisplay deviceRequest={selectedItem as DeviceRequest}
                                              isOpen={selectedType === 'DeviceRequest' && showModal}
                                              onClose={closeModal}/>
                    {/* FhirCarePlanDisplay */}
                    <FhirCarePlanDisplay carePlan={selectedItem as CarePlan}
                                         isOpen={selectedType === 'CarePlan' && showModal}
                                         onClose={closeModal}/>
                    {/* FhirCareTeamDisplay */}
                    <FhirCareTeamDisplay careTeam={selectedItem as CareTeam}
                                         isOpen={selectedType === 'CareTeam' && showModal}
                                         onClose={closeModal}/>
                    {/* FhirGoalDisplay */}
                    <FhirGoalDisplay goal={selectedItem as Goal}
                                     isOpen={selectedType === 'Goal' && showModal}
                                     onClose={closeModal}/>
                    {/* FhirNutritionOrderDisplay */}
                    <FhirNutritionOrderDisplay nutritionOrder={selectedItem as NutritionOrder}
                                               isOpen={selectedType === 'NutritionOrder' && showModal}
                                               onClose={closeModal}/>
                    {/* FhirRiskAssessmentDisplay */}
                    <FhirRiskAssessmentDisplay riskAssessment={selectedItem as RiskAssessment}
                                               isOpen={selectedType === 'RiskAssessment' && showModal}
                                               onClose={closeModal}/>
                    {/* FhirVisionPrescriptionDisplay */}
                    <FhirVisionPrescriptionDisplay visionPrescription={selectedItem as VisionPrescription}
                                                   isOpen={selectedType === 'VisionPrescription' && showModal}
                                                   onClose={closeModal}/>
                    {/* FhirTaskDisplay */}
                    <FhirTaskDisplay task={selectedItem as Task}
                                     isOpen={selectedType === 'Task' && showModal}
                                     onClose={closeModal}/>
                </SheetContent>
            </Sheet>

            {/* FhirMedicationAdministrationDisplay */}
            <FhirMedicationAdministrationDisplay medicationAdministration={selectedItem as MedicationAdministration}
                                                 isOpen={selectedType === 'MedicationAdministration' && showModal}
                                                 onClose={closeModal}/>
            {/* FhirMedicationDispenseDisplay */}
            <FhirMedicationDispenseDisplay medicationDispense={selectedItem as MedicationDispense}
                                           isOpen={selectedType === 'MedicationDispense' && showModal}
                                           onClose={closeModal}/>
            {/* FhirImmunizationDisplay */}
            <FhirImmunizationDisplay immunization={selectedItem as Immunization}
                                     isOpen={selectedType === 'Immunization' && showModal}
                                     onClose={closeModal}/>

            {/* FhirImmunizationEvaluationDisplay */}
            <FhirImmunizationEvaluationDisplay immunizationEvaluation={selectedItem as ImmunizationEvaluation}
                                               isOpen={selectedType === 'ImmunizationEvaluation' && showModal}
                                               onClose={closeModal}/>

            {/* FhirImmunizationRecommendationDisplay */}
            <FhirImmunizationRecommendationDisplay immunizationRecommendation={selectedItem as ImmunizationRecommendation}
                                                   isOpen={selectedType === 'ImmunizationRecommendation' && showModal}
                                                   onClose={closeModal}/>

            {/* FhirEncounterDisplay */}
            <FhirEncounterDisplay encounter={selectedItem as Encounter}
                                  isOpen={selectedType === 'Encounter' && showModal}
                                  onClose={closeModal}/>

            {/* FhirEpisodeOfCareDisplay */}
            <FhirEpisodeOfCareDisplay episodeOfCare={selectedItem as EpisodeOfCare}
                                      isOpen={selectedType === 'EpisodeOfCare' && showModal}
                                      onClose={closeModal}/>

            {/* FhirQuestionnaireResponseDisplay */}
            <FhirQuestionnaireResponseDisplay questionnaireResponse={selectedItem as QuestionnaireResponse}
                                              isOpen={selectedType === 'QuestionnaireResponse' && showModal}
                                              onClose={closeModal}/>

            {/* FhirDocumentReferenceDisplay */}
            <FhirDocumentReferenceDisplay documentReference={selectedItem as DocumentReference}
                                          isOpen={selectedType === 'DocumentReference' && showModal}
                                          onClose={closeModal}/>
        </>
    );
};

export default FhirReference;