import React, { useState, useEffect } from 'react';
import { TextareaControl } from "../ui/textarea-control";
import { Card, CardBody, CardHeader, CardDivider } from '../ui/wp-card';
import { Elevation } from '../ui/elevation';
import { InputControl } from '../ui/input-control';
import { Divider } from '../ui/divider';
import { DismissibleAlert } from '../ui/dismissible-alert';
import { Heading } from '../ui/heading';
import { Flex, FlexItem } from '../ui/flex';
import { Spacer } from '../ui/spacer';
import { TabPanel } from '../ui/tab-panel';
import { Disabled } from '../ui/disabled';
import { useFormContext, useFieldArray, Controller } from 'react-hook-form';
import { FhirResource } from 'fhir/r4';
import { PlusCircle, Trash2 } from 'lucide-react';
import {
    IValueSet,
    useAuthServiceContext,
    useValueSetServiceContext
} from '../../services';
import {
    FhirCode,
    FhirCodeableConcept,
    FhirPeriod,
    FhirRange,
    FhirReference,
    FhirReferenceCollection,
    TypeSelector,
    FhirValueSetSearch,
    FhirAnnotation
} from '../../components';
import {
    useFhirCarePlans,
    useFhirConditions,
    useFhirDevices,
    useFhirEncounters,
    useFhirLocations,
    useFhirMedicationAdministrations,
    useFhirObservations, useFhirPractitioners,
    useFhirProcedureBroadcast,
    useFhirProcedures,
    useFhirRelatedPersons
} from '../../hooks';

const PerformerActorReferences: React.FC<{ index: number; disabled: boolean; readonly: boolean; enableInlineActions: boolean; }> = ({ index, disabled, readonly = false, enableInlineActions = true }) => {
    const { control } = useFormContext();
    const itemReferenceFieldArray = useFieldArray({ control, name: `performer.${index}.actor` });

    const { practitionersList } = useFhirPractitioners();
    const { devicesList } = useFhirDevices();
    const { relatedPersonsList } = useFhirRelatedPersons();

    return (
        <FhirReferenceCollection label="The reference to the practitioner"
                                 references={itemReferenceFieldArray}
                                 context={`performer.${index}.actor`}
                                 referenceTypes={[
                                     { name: 'Practitioner', key: 'Practitioner' },
                                     { name: 'Patient', key: 'Patient' },
                                     { name: 'RelatedPerson', key: 'RelatedPerson' },
                                     { name: 'Device', key: 'Device' }
                                 ]}
                                 getReferenceList={(referenceType: string): FhirResource[] => {
                                     switch (referenceType) {
                                         case 'Practitioner':
                                             return practitionersList.map(p => p.practitioner);
                                         case 'RelatedPerson':
                                             return relatedPersonsList;
                                         case 'Device':
                                             return devicesList;
                                         default:
                                             return [];
                                     }
                                 }}
                                 required={true}
                                 disabled={disabled}
                                 readonly={readonly}
                                 multiple={false}
                                 enableInlineActions={enableInlineActions}/>
    );
};

interface FhirProcedureProps {
    elevated?: boolean;
    disabled?: boolean;
    enableInlineActions?: boolean;
}

export const FhirProcedure: React.FC<FhirProcedureProps> = ({ elevated = true, disabled = false, enableInlineActions = true }) => {
    const { userRole, USER_ROLES } = useAuthServiceContext();
    const { fetchValueSet, valueSetUrls } = useValueSetServiceContext();

    const [loading, setLoading] = useState(false);

    // value sets
    const [procedureCategory, setProcedureCategory] = useState<IValueSet[]>([]);
    const [procedureOutcome, setProcedureOutcome] = useState<IValueSet[]>([]);
    const [procedureFollowup, setProcedureFollowup] = useState<IValueSet[]>([]);
    const [eventStatus, setEventStatus] = useState<IValueSet[]>([]);

    const isPatient = [USER_ROLES.PATIENT, USER_ROLES.RELATED_PERSON].includes(userRole as string);
    const spacerMargin = '24px';

    useFhirProcedureBroadcast();
    const { proceduresList } = useFhirProcedures();
    const { locationsList } = useFhirLocations();
    const { encountersList } = useFhirEncounters();
    const { conditionsList } = useFhirConditions();
    const { devicesList } = useFhirDevices();
    const { observationsList } = useFhirObservations();
    const { carePlansList } = useFhirCarePlans();
    const { medicationAdministrationsList } = useFhirMedicationAdministrations();

    const { watch, control } = useFormContext();

    const performedType = watch('performedType');
    const reasonReferenceFieldArray = useFieldArray({ control, name: 'reasonReference' });
    const performerFieldArray = useFieldArray({ control, name: 'performer' });
    const usedReferenceFieldArray = useFieldArray({ control, name: 'usedReference' });
    const focalDeviceFieldArray = useFieldArray({ control, name: 'focalDevice' });
    const basedOnFieldArray = useFieldArray({ control, name: 'basedOn' });
    const partOfFieldArray = useFieldArray({ control, name: 'partOf' });

    useEffect(() => {
        const loadValueSets = async () => {
            setLoading(true);
            try {
                const [
                    procedureCategoryValueSet,
                    procedureOutcomeValueSet,
                    procedureFollowupValueSet,
                    eventStatusValueSet
                ] = await Promise.all([
                    fetchValueSet(valueSetUrls.procedureCategory),
                    fetchValueSet(valueSetUrls.procedureOutcome),
                    fetchValueSet(valueSetUrls.procedureFollowup),
                    fetchValueSet(valueSetUrls.eventStatus),
                ]);

                setProcedureCategory(procedureCategoryValueSet);
                setProcedureOutcome(procedureOutcomeValueSet);
                setProcedureFollowup(procedureFollowupValueSet);
                setEventStatus(eventStatusValueSet);
            } catch (err) {
                console.error('Error loading value sets:', err);
            } finally {
                setLoading(false);
            }
        };

        loadValueSets();
    }, [fetchValueSet, valueSetUrls]);

    const addPerformer = () => {
        performerFieldArray.append({
            function: null,
            actor: []
        });
    };

    const removePerformer = (index: number) => {
        performerFieldArray.remove(index);
    };

    const addFocalDevice = () => {
        focalDeviceFieldArray.append({
            action: null,
            manipulated: []
        });
    };

    const removeFocalDevice = (index: number) => {
        focalDeviceFieldArray.remove(index);
    };

    return (
        <Card style={elevated ? { boxShadow: 'none' } : {}}>
            {elevated && <Elevation value={5}/>}
            <CardHeader>
                <Heading level={5}>Details</Heading>
            </CardHeader>
            <Disabled isDisabled={isPatient}>
                <CardBody>
                    {/* code */}
                    <FhirValueSetSearch label="Identification of the procedure"
                                        context="code"
                                        valueSetUrl={valueSetUrls.procedureCode}
                                        placeholder="Search for procedures..."
                                        required={true}
                                        multiple={false}/>

                    <Spacer margin={spacerMargin}/>

                    {/* category */}
                    <FhirCodeableConcept label="Classification of the procedure"
                                         context="category"
                                         options={procedureCategory}
                                         loading={loading}
                                         disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* status */}
                    <FhirCode label="Status"
                              context="status"
                              options={eventStatus}
                              disabled={disabled}
                              loading={loading}
                              required={true}/>

                    <Spacer margin={spacerMargin}/>

                    {/* performedType */}
                    <TypeSelector label="When the procedure was performed"
                                  context="performedType"
                                  options={[
                                      { name: 'Date', key: 'dateTime' },
                                      { name: 'Period', key: 'period' },
                                      { name: 'String', key: 'string' },
                                      // { name: 'Age', key: 'age' },
                                      { name: 'Range', key: 'range' }
                                  ]}
                                  required={true}
                                  disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {performedType === 'dateTime' && (
                        <>
                            {/* performedDateTime */}
                            {/* The ANSWER is what is required, not the question. The selector above used to
                                be the only required control here, so the form insisted you choose "Date"
                                and then let you save with the date empty - a decision demanded of the user
                                that bought nothing. */}
                            <Controller key="performedDateTime"
                                        name="performedDateTime"
                                        control={control}
                                        disabled={disabled}
                                        rules={{ required: true }}
                                        render={({ field }) => (
                                            <InputControl
                                                          {...field}
                                                          label="Performed Date *"
                                                          type="datetime-local"/>
                                        )}/>

                            <Spacer margin={spacerMargin}/>
                        </>
                    )}

                    {performedType === 'period' && (
                        <>
                            {/* performedPeriod */}
                            <FhirPeriod label="Performed Period"
                                        context="performedPeriod"
                                        disabled={disabled}
                                        readonly={isPatient}/>

                            <Spacer margin={spacerMargin}/>
                        </>
                    )}

                    {performedType === 'string' && (
                        <>
                            {/* performedString */}
                            <Controller key="performedString"
                                        name="performedString"
                                        control={control}
                                        disabled={disabled}
                                        rules={{ required: true }}
                                        render={({ field }) => (
                                            <TextareaControl
                                                             value={field.value}
                                                             onChange={field.onChange}
                                                             label="Performed Description *"
                                                             placeholder="Describe when the procedure was performed"
                                                             rows={3}/>
                                        )}/>

                            <Spacer margin={spacerMargin}/>
                        </>
                    )}

                    {/* The 'age' branch rendered nothing at all, and its option is commented out of the
                        selector above, so it was unreachable and empty in both directions.

                        The 'period' and 'range' branches still accept an empty value: FhirPeriod and
                        FhirRange take no `required` prop, and adding one reaches every call site of two
                        shared datatype components. The two ordinary branches refuse now, which is where
                        procedures are actually recorded. */}

                    {performedType === 'range' && (
                        <>
                            {/* performedRange */}
                            <FhirRange label="Performed Range"
                                       context="performedRange"
                                       disabled={disabled}/>

                            <Spacer margin={spacerMargin}/>
                        </>
                    )}

                    {/* bodySite */}
                    <FhirValueSetSearch label="Target body sites"
                                        context="bodySite"
                                        valueSetUrl={valueSetUrls.bodySite}
                                        placeholder="Search for body sites..."
                                        multiple={true}
                                        disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* outcome */}
                    <FhirCodeableConcept label="The result of procedure"
                                         context="outcome"
                                         options={procedureOutcome}
                                         loading={loading}
                                         disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* followUp */}
                    <FhirCodeableConcept label="Instructions for follow up"
                                         context="followUp"
                                         options={procedureFollowup}
                                         multiple={true}
                                         loading={loading}
                                         disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* encounter */}
                    <FhirReference label="Encounter created as part of"
                                   context="encounter"
                                   referenceType="Encounter"
                                   referenceList={encountersList}
                                   enableInlineActions={enableInlineActions}
                                   required={false}
                                   disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* location */}
                    <FhirReference label="Where the procedure happened"
                                   context="location"
                                   referenceType="Location"
                                   referenceList={locationsList}
                                   enableInlineActions={enableInlineActions}
                                   required={false}
                                   disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>
                </CardBody>
            </Disabled>
            <CardDivider/>
            <CardBody>
                <TabPanel initialTabName="reason"
                          tabs={[
                              { name: 'reason', title: 'Reason' },
                              { name: 'performers', title: 'Performers' },
                              { name: 'complications', title: 'Complications' },
                              { name: 'used', title: 'Items Used' },
                              { name: 'focalDevice', title: 'Focal Device' },
                              { name: 'basedOn', title: 'Based On' },
                              { name: 'partOf', title: 'Part Of' },
                              { name: 'notes', title: 'Notes' }
                          ]}>
                    {(tab) => {
                        // reason
                        if (tab.name === 'reason') {
                            return (
                                <Disabled isDisabled={isPatient}>
                                    <div style={{ paddingTop: '16px' }}>
                                        <Spacer margin={spacerMargin} />

                                        {/* reasonCode */}
                                        <FhirValueSetSearch label="Coded reason procedure performed"
                                                            context="reasonCode"
                                                            valueSetUrl={valueSetUrls.procedureReason}
                                                            placeholder="Search for reasons..."
                                                            multiple={true}
                                                            disabled={disabled}/>

                                        <Spacer margin={spacerMargin}/>

                                        {/* reasonReference */}
                                        <FhirReferenceCollection label="The justification that the procedure was performed"
                                                                 references={reasonReferenceFieldArray}
                                                                 context="reasonReference"
                                                                 referenceTypes={[
                                                                     { name: 'Condition', key: 'Condition' },
                                                                     { name: 'Observation', key: 'Observation' },
                                                                     { name: 'Procedure', key: 'Procedure' },
                                                                 ]}
                                                                 getReferenceList={(referenceType: string): FhirResource[] => {
                                                                     switch (referenceType) {
                                                                         case 'Condition':
                                                                             return conditionsList;
                                                                         case 'Observation':
                                                                             return observationsList;
                                                                         case 'Procedure':
                                                                             return proceduresList;
                                                                         default:
                                                                             return [];
                                                                     }
                                                                 }}
                                                                 multiple={true}
                                                                 required={false}
                                                                 disabled={disabled}
                                                                 readonly={isPatient}
                                                                 enableInlineActions={enableInlineActions}/>

                                        <Spacer margin={spacerMargin}/>
                                    </div>
                                </Disabled>
                            );
                        }

                        // performers
                        if (tab.name === 'performers') {
                            return (
                                <Disabled isDisabled={isPatient}>
                                    <div style={{ paddingTop: '16px' }}>
                                        {performerFieldArray.fields.length === 0 && (
                                            <>
                                                <Flex>
                                                    <FlexItem>
                                                        {!isPatient && (
                                                            <button type="button"
                                                                    className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                                                    onClick={addPerformer}
                                                                    disabled={disabled}>
                                                                <PlusCircle className="w-4 h-4" />
                                                                Add Performer
                                                            </button>
                                                        )}
                                                    </FlexItem>
                                                </Flex>
                                                <Spacer margin="8"/>

                                                <DismissibleAlert status="info">
                                                    No performers added yet.
                                                </DismissibleAlert>

                                                <Spacer margin={spacerMargin}/>
                                            </>
                                        )}

                                        {performerFieldArray.fields.map((field, index) => (
                                            <React.Fragment key={field.id}>
                                                <Card>
                                                    <CardHeader>
                                                        <Flex align="center" justify="space-between">
                                                            <FlexItem>
                                                                <h4>Performer {index + 1}</h4>
                                                            </FlexItem>
                                                            <FlexItem>
                                                                {!isPatient && (
                                                                    <button type="button"
                                                                            className="btn btn-red-ghost"
                                                                            title="Remove performer"
                                                                            aria-label="Remove performer"
                                                                            onClick={() => removePerformer(index)}
                                                                            disabled={disabled}>
                                                                        <Trash2 className="w-4 h-4" />
                                                                    </button>
                                                                )}
                                                            </FlexItem>
                                                        </Flex>
                                                    </CardHeader>
                                                    <CardBody>
                                                        <Spacer margin={spacerMargin}/>

                                                        {/* performerType */}
                                                        <FhirValueSetSearch label="	Type of performance"
                                                                            context={`performer.${index}.function`}
                                                                            valueSetUrl={valueSetUrls.performerRole}
                                                                            multiple={false}
                                                                            placeholder="Search for roles..."
                                                                            required={false}
                                                                            disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* performer */}
                                                        <PerformerActorReferences index={index}
                                                                                  disabled={disabled}
                                                                                  readonly={isPatient}
                                                                                  enableInlineActions={enableInlineActions}/>

                                                        <Spacer margin={spacerMargin}/>
                                                    </CardBody>
                                                </Card>
                                                <Spacer margin={spacerMargin} />
                                            </React.Fragment>
                                        ))}

                                        {!isPatient && performerFieldArray.fields.length > 0 && (
                                            <Flex justify="center">
                                                <FlexItem>
                                                    <button type="button"
                                                            className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                                            onClick={addPerformer}
                                                            disabled={disabled}>
                                                        <PlusCircle className="w-4 h-4" />
                                                        Add Performer
                                                    </button>
                                                </FlexItem>
                                            </Flex>
                                        )}
                                    </div>
                                </Disabled>
                            );
                        }

                        // complications
                        if (tab.name === 'complications') {
                            return (
                                <Disabled isDisabled={isPatient}>
                                    <div style={{ paddingTop: '16px' }}>
                                        <Spacer margin={spacerMargin} />

                                        {/* complication */}
                                        <FhirValueSetSearch label="Complication following the procedure"
                                                            context="complication"
                                                            valueSetUrl={valueSetUrls.conditionCode}
                                                            placeholder="Search for conditions..."
                                                            multiple={true}
                                                            disabled={disabled}/>

                                        <Spacer margin={spacerMargin}/>

                                        {/* complicationDetail */}
                                        <FhirReference label="A condition that is a result of the procedure"
                                                       context="complicationDetail"
                                                       referenceType="Condition"
                                                       referenceList={conditionsList}
                                                       enableInlineActions={enableInlineActions}
                                                       multiple={true}
                                                       required={false}
                                                       disabled={disabled}/>

                                        <Spacer margin={spacerMargin}/>
                                    </div>
                                </Disabled>
                            );
                        }

                        // used
                        if (tab.name === 'used') {
                            return (
                                <Disabled isDisabled={isPatient}>
                                    <div style={{ paddingTop: '16px' }}>
                                        <Spacer margin={spacerMargin} />

                                        {/* usedCode */}
                                        <FhirValueSetSearch label="Coded items used during the procedure"
                                                            context="usedCode"
                                                            valueSetUrl={valueSetUrls.deviceKind}
                                                            placeholder="Search for devices..."
                                                            multiple={true}
                                                            disabled={disabled}/>

                                        <Spacer margin={spacerMargin}/>

                                        {/* usedReference */}

                                        <FhirReferenceCollection label="Items used during procedure"
                                                                 references={usedReferenceFieldArray}
                                                                 context="usedReference"
                                                                 referenceTypes={[
                                                                     { name: 'Device', key: 'Device' }
                                                                 ]}
                                                                 getReferenceList={(referenceType: string): FhirResource[] => {
                                                                     switch (referenceType) {
                                                                         case 'Device':
                                                                             return devicesList;
                                                                         default:
                                                                             return [];
                                                                     }
                                                                 }}
                                                                 multiple={true}
                                                                 required={false}
                                                                 disabled={disabled}
                                                                 readonly={isPatient}
                                                                 enableInlineActions={enableInlineActions}/>

                                        <Spacer margin={spacerMargin}/>
                                    </div>
                                </Disabled>
                            );
                        }

                        // focalDevice
                        if (tab.name === 'focalDevice') {
                            return (
                                <Disabled isDisabled={isPatient}>
                                    <div style={{ paddingTop: '16px' }}>
                                        {focalDeviceFieldArray.fields.length === 0 && (
                                            <>
                                                <Flex>
                                                    <FlexItem>
                                                        <Heading level={5}>Manipulated, implanted, or removed device</Heading>
                                                    </FlexItem>
                                                    <FlexItem>
                                                        {!isPatient && (
                                                            <button type="button"
                                                                    className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                                                    onClick={addFocalDevice}
                                                                    disabled={disabled}>
                                                                <PlusCircle className="w-4 h-4" />
                                                                Add Focal Device
                                                            </button>
                                                        )}
                                                    </FlexItem>
                                                </Flex>
                                                <Divider margin="2"/>
                                                <Spacer margin="8"/>

                                                <DismissibleAlert status="info">
                                                    No focal device added yet.
                                                </DismissibleAlert>

                                                <Spacer margin={spacerMargin}/>
                                            </>
                                        )}

                                        {focalDeviceFieldArray.fields.map((field, index) => (
                                            <React.Fragment key={field.id}>
                                                <Card>
                                                    <CardHeader>
                                                        <Flex align="center" justify="space-between">
                                                            <FlexItem>
                                                                <h4>Focal Device {index + 1}</h4>
                                                            </FlexItem>
                                                            <FlexItem>
                                                                {!isPatient && (
                                                                    <button type="button"
                                                                            className="btn btn-red-ghost"
                                                                            title="Remove Focal Device"
                                                                            aria-label="Remove Focal Device"
                                                                            onClick={() => removeFocalDevice(index)}
                                                                            disabled={disabled}>
                                                                        <Trash2 className="w-4 h-4" />
                                                                    </button>
                                                                )}
                                                            </FlexItem>
                                                        </Flex>
                                                    </CardHeader>
                                                    <CardBody>
                                                        <Spacer margin={spacerMargin}/>

                                                        {/* focalDevice.action */}
                                                        <FhirValueSetSearch label="Kind of change to device"
                                                                            context={`focalDevice.${index}.action`}
                                                                            valueSetUrl={valueSetUrls.deviceAction}
                                                                            multiple={false}
                                                                            placeholder="Search for actions..."
                                                                            required={false}
                                                                            disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* focalDevice.manipulated */}
                                                        <FhirReference label="Device that was changed"
                                                                       context={`focalDevice.${index}.manipulated`}
                                                                       referenceType="Device"
                                                                       referenceList={devicesList}
                                                                       enableInlineActions={enableInlineActions}
                                                                       required={true}
                                                                       disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>
                                                    </CardBody>
                                                </Card>
                                                <Spacer margin={spacerMargin} />
                                            </React.Fragment>
                                        ))}

                                        {!isPatient && focalDeviceFieldArray.fields.length > 0 && (
                                            <Flex justify="center">
                                                <FlexItem>
                                                    <button type="button"
                                                            className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                                            onClick={addFocalDevice}
                                                            disabled={disabled}>
                                                        <PlusCircle className="w-4 h-4" />
                                                        Add Focal Device
                                                    </button>
                                                </FlexItem>
                                            </Flex>
                                        )}
                                    </div>
                                </Disabled>
                            );
                        }

                        // basedOn
                        if (tab.name === 'basedOn') {
                            return (
                                <Disabled isDisabled={isPatient}>
                                    <div style={{ paddingTop: '16px' }}>
                                        <Spacer margin={spacerMargin}/>

                                        {/* basedOn */}
                                        <FhirReferenceCollection label="A request for this procedure"
                                                                 references={basedOnFieldArray}
                                                                 context="basedOn"
                                                                 referenceTypes={[
                                                                     { name: 'CarePlan', key: 'CarePlan' }
                                                                 ]}
                                                                 getReferenceList={(referenceType: string): FhirResource[] => {
                                                                     switch (referenceType) {
                                                                         case 'CarePlan':
                                                                             return carePlansList;
                                                                         default:
                                                                             return [];
                                                                     }
                                                                 }}
                                                                 required={false}
                                                                 disabled={disabled}
                                                                 readonly={isPatient}
                                                                 enableInlineActions={enableInlineActions}/>

                                        <Spacer margin={spacerMargin}/>
                                    </div>
                                </Disabled>
                            );
                        }

                        // partOf
                        if (tab.name === 'partOf')  {
                            return (
                                <Disabled isDisabled={isPatient}>
                                    <div style={{ paddingTop: '16px' }}>
                                        <Spacer margin={spacerMargin}/>

                                        {/* partOf */}
                                        <FhirReferenceCollection label="Part of referenced event"
                                                                 references={partOfFieldArray}
                                                                 context="partOf"
                                                                 referenceTypes={[
                                                                     { name: 'Procedure', key: 'Procedure' },
                                                                     { name: 'Observation', key: 'Observation' },
                                                                     { name: 'MedicationAdministration', key: 'MedicationAdministration' }
                                                                 ]}
                                                                 getReferenceList={(referenceType: string): FhirResource[] => {
                                                                     switch (referenceType) {
                                                                         case 'Procedure':
                                                                             return proceduresList;
                                                                         case 'Observation':
                                                                             return observationsList;
                                                                         case 'MedicationAdministration':
                                                                             return medicationAdministrationsList;
                                                                         default:
                                                                             return [];
                                                                     }
                                                                 }}
                                                                 required={false}
                                                                 disabled={disabled}
                                                                 readonly={isPatient}
                                                                 enableInlineActions={enableInlineActions}/>

                                        <Spacer margin={spacerMargin}/>
                                    </div>
                                </Disabled>
                            );
                        }

                        // notes
                        if (tab.name === 'notes') {
                            return (
                                <Disabled isDisabled={isPatient}>
                                    <div style={{ paddingTop: '16px' }}>
                                        <Spacer margin={spacerMargin}/>

                                        {/* note */}
                                        <FhirAnnotation label="Additional Notes"
                                                        context={`note`}
                                                        disabled={disabled}
                                                        readonly={isPatient}/>

                                        <Spacer margin={spacerMargin}/>
                                    </div>
                                </Disabled>
                            );
                        }
                    }}
                </TabPanel>
            </CardBody>
        </Card>
    );
};