import React, { useState, useEffect } from 'react';
import { TextareaControl } from "../ui/textarea-control";
import { Card, CardHeader, CardBody, 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, Controller, useFieldArray } from 'react-hook-form';
import {
    IValueSet,
    useAuthServiceContext,
    useValueSetServiceContext
} from '../../services';
import {
    FhirAnnotation,
    FhirCode,
    FhirCodeableConcept,
    FhirPeriod,
    FhirQuantity,
    FhirReference,
    FhirReferenceCollection,
    FhirTiming,
    FhirValueSetSearch,
    TypeSelector
} from '../../components';
import {
    useFhirAppointments,
    useFhirCarePlanBroadcast,
    useFhirCarePlans,
    useFhirCareTeams,
    useFhirConditions,
    useFhirDeviceRequests,
    useFhirDevices,
    useFhirEncounters,
    useFhirGoals,
    useFhirHealthcareServices,
    useFhirLocations,
    useFhirMedicationRequests,
    useFhirNutritionOrders,
    useFhirObservations,
    useFhirPractitioners,
    useFhirRelatedPersons,
    useFhirVisionPrescriptions
} from '../../hooks';
import { FhirResource } from 'fhir/r4';
import { PlusCircle, Trash2 } from 'lucide-react';
// - WordPress's ToggleControl, swapped for the ui/* adapter. Same props, same JSX;
// only `__nextHasNoMarginBottom` is dropped, which means nothing outside WordPress.
import { ToggleControl } from '../ui/toggle-control';

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

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

    const { appointmentsList } = useFhirAppointments();
    const { deviceRequestsList } = useFhirDeviceRequests();
    const { medicationRequestsList } = useFhirMedicationRequests();
    const { nutritionOrdersList } = useFhirNutritionOrders();
    const { visionPrescriptionsList } = useFhirVisionPrescriptions();

    return (
        <FhirReferenceCollection label="Activity details defined in specific resource"
                                 references={itemReferenceFieldArray}
                                 context={`activity.${index}.reference`}
                                 referenceTypes={[
                                     { name: 'Appointment', key: 'Appointment' },
                                     // { name: 'CommunicationRequest', key: 'CommunicationRequest' },
                                     { name: 'DeviceRequest', key: 'DeviceRequest' },
                                     { name: 'MedicationRequest', key: 'MedicationRequest' },
                                     { name: 'NutritionOrder', key: 'NutritionOrder' },
                                     { name: 'VisionPrescription', key: 'VisionPrescription' }
                                 ]}
                                 getReferenceList={(referenceType: string): FhirResource[] => {
                                     switch (referenceType) {
                                         case 'Appointment':
                                             return appointmentsList;
                                         case 'DeviceRequest':
                                             return deviceRequestsList;
                                         case 'MedicationRequest':
                                             return medicationRequestsList;
                                         case 'NutritionOrder':
                                             return nutritionOrdersList;
                                         case 'VisionPrescription':
                                             return visionPrescriptionsList;
                                         default:
                                             return [];
                                     }
                                 }}
                                 required={true}
                                 disabled={disabled}
                                 readonly={readonly}
                                 multiple={false}
                                 enableInlineActions={enableInlineActions}/>
    );
};

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

    const { conditionsList } = useFhirConditions();
    const { observationsList } = useFhirObservations();

    return (
        <FhirReferenceCollection label="Why activity is needed"
                                 references={itemReferenceFieldArray}
                                 context={`activity.${index}.detail.reasonReference`}
                                 referenceTypes={[
                                     { name: 'Condition', key: 'Condition' },
                                     { name: 'Observation', key: 'Observation' }
                                 ]}
                                 getReferenceList={(referenceType: string): FhirResource[] => {
                                     switch (referenceType) {
                                         case 'Condition':
                                             return conditionsList;
                                         case 'Observation':
                                             return observationsList;
                                         default:
                                             return [];
                                     }
                                 }}
                                 required={false}
                                 disabled={disabled}
                                 readonly={readonly}
                                 enableInlineActions={enableInlineActions}/>
    );
};

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

    const { practitionersList } = useFhirPractitioners();
    const { relatedPersonsList } = useFhirRelatedPersons();
    const { careTeamsList } = useFhirCareTeams();
    const { healthcareServicesList } = useFhirHealthcareServices();
    const { devicesList } = useFhirDevices();

    return (
        <FhirReferenceCollection label="Who will be responsible?"
                                 references={itemReferenceFieldArray}
                                 context={`activity.${index}.detail.performer`}
                                 referenceTypes={[
                                     { name: 'Practitioner', key: 'Practitioner' },
                                     { name: 'RelatedPerson', key: 'RelatedPerson' },
                                     { name: 'Patient', key: 'Patient' },
                                     { name: 'CareTeam', key: 'CareTeam' },
                                     { name: 'HealthcareService', key: 'HealthcareService' },
                                     { name: 'Device', key: 'Device' }
                                 ]}
                                 getReferenceList={(referenceType: string): FhirResource[] => {
                                     switch (referenceType) {
                                         case 'Practitioner':
                                             return practitionersList.map(p => p.practitioner);
                                         case 'RelatedPerson':
                                             return relatedPersonsList;
                                         case 'CareTeam':
                                             return careTeamsList;
                                         case 'HealthcareService':
                                             return healthcareServicesList;
                                         case 'Device':
                                             return devicesList;
                                         default:
                                             return [];
                                     }
                                 }}
                                 required={false}
                                 disabled={disabled}
                                 readonly={readonly}
                                 enableInlineActions={enableInlineActions}/>
    );
};

export const FhirCarePlan: React.FC<FhirCarePlanProps> = ({ elevated = true, disabled = false, enableInlineActions = true }) => {
    const { control, watch } = useFormContext();
    const { userRole, USER_ROLES } = useAuthServiceContext();
    const { fetchValueSet, valueSetUrls } = useValueSetServiceContext();

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

    // value sets
    const [requestStatus, setRequestStatus] = useState<IValueSet[]>([]);
    const [carePlanIntent, setCarePlanIntent] = useState<IValueSet[]>([]);
    const [carePlanCategory, setCarePlanCategory] = useState<IValueSet[]>([]);
    const [carePlanActivityOutcome, setCarePlanActivityOutcome] = useState<IValueSet[]>([]);
    const [carePlanActivityKind, setCarePlanActivityKind] = useState<IValueSet[]>([]);
    const [carePlanActivityStatus, setCarePlanActivityStatus] = useState<IValueSet[]>([]);

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

    useFhirCarePlanBroadcast();
    const { carePlansList} = useFhirCarePlans();
    const { locationsList } = useFhirLocations();
    const { encountersList } = useFhirEncounters();
    const { conditionsList } = useFhirConditions();
    const { goalsList } = useFhirGoals();

    const activityFieldArray = useFieldArray({ control, name: 'activity' });

    useEffect(() => {
        const loadValueSets = async () => {
            setLoading(true);
            try {
                const [
                    requestStatusValueSet,
                    carePlanIntentValueSet,
                    carePlanCategoryValueSet,
                    carePlanActivityOutcomeValueSet,
                    carePlanActivityKindValueSet,
                    carePlanActivityStatusValueSet,
                ] = await Promise.all([
                    fetchValueSet(valueSetUrls.requestStatus),
                    fetchValueSet(valueSetUrls.carePlanIntent),
                    fetchValueSet(valueSetUrls.carePlanCategory),
                    fetchValueSet(valueSetUrls.carePlanActivityOutcome),
                    fetchValueSet(valueSetUrls.carePlanActivityKind),
                    fetchValueSet(valueSetUrls.carePlanActivityStatus),
                ]);

                setRequestStatus(requestStatusValueSet);
                setCarePlanIntent(carePlanIntentValueSet);
                setCarePlanCategory(carePlanCategoryValueSet);
                setCarePlanActivityOutcome(carePlanActivityOutcomeValueSet);
                setCarePlanActivityKind(carePlanActivityKindValueSet);
                setCarePlanActivityStatus(carePlanActivityStatusValueSet);
            } catch (err) {
                console.error('Error loading value sets:', err);
            } finally {
                setLoading(false);
            }
        };

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

    const addActivity = () => {
        activityFieldArray.append({
            outcomeCodeableConcept: [],
            outcomeReference: [],
            progress: [],
            reference: null,
            detail: {
                status: '',
                kind: '',
                code: null,
                reasonCode: [],
                reasonReference: [],
                goal: [],
                statusReason: null,
                doNotPerform: false,
                scheduledString: '',
                scheduledTiming: {},
                location: null,
                performer: [],
                productCodeableConcept: null,
                productReference: null,
                dailyAmount: null,
                quantity: null,
                description: ''
            }
        });
    };

    const removeActivity = (index: number) => {
        activityFieldArray.remove(index);
    };

    return (
        <Card style={elevated ? { boxShadow: 'none' } : {}}>
            {elevated && <Elevation value={5}/>}
            <CardHeader>
                <Heading level={5}>Details</Heading>
            </CardHeader>
            <Disabled isDisabled={isPatient}>
                <CardBody>
                    {/* title */}
                    <Controller key="title"
                                name="title"
                                control={control}
                                disabled={disabled}
                                render={({ field }) => (
                                    <InputControl
                                                  {...field}
                                                  label="Title"
                                                  help="Human-friendly name for the care plan"
                                                  placeholder="Title of the care plan"/>
                                )}/>

                    <Spacer margin={spacerMargin}/>

                    {/* basedOn */}
                    <FhirReference label="Fulfills CarePlan"
                                   context="basedOn"
                                   referenceType="CarePlan"
                                   referenceList={carePlansList}
                                   enableInlineActions={enableInlineActions}
                                   multiple={true}
                                   required={false}
                                   disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* replaces */}
                    <FhirReference label="CarePlan replaced by this CarePlan"
                                   context="replaces"
                                   referenceType="CarePlan"
                                   referenceList={carePlansList}
                                   enableInlineActions={enableInlineActions}
                                   multiple={true}
                                   required={false}
                                   disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* partOf */}
                    <FhirReference label="Part of referenced CarePlan"
                                   context="partOf"
                                   referenceType="CarePlan"
                                   referenceList={carePlansList}
                                   enableInlineActions={enableInlineActions}
                                   multiple={true}
                                   required={false}
                                   disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

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

                    <Spacer margin={spacerMargin}/>

                    {/* intent */}
                    <FhirCode label="Intent"
                              context="intent"
                              options={carePlanIntent}
                              required={true}
                              loading={loading}
                              disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* description */}
                    <Controller key="description"
                                name="description"
                                control={control}
                                disabled={disabled}
                                render={({ field }) => (
                                    <TextareaControl
                                                     label="Description"
                                                     value={field.value}
                                                     onChange={field.onChange}
                                                     placeholder="Summary of nature of plan"
                                                     rows={4}/>
                                )}/>

                    <Spacer margin={spacerMargin}/>

                    {/* category */}
                    <FhirCodeableConcept label="Type of plan"
                                         context="category"
                                         options={carePlanCategory}
                                         disabled={disabled}
                                         loading={loading}
                                         multiple={true}/>

                    <Spacer margin={spacerMargin}/>

                    {/* created */}
                    <Controller key="created"
                                name="created"
                                control={control}
                                disabled={disabled}
                                render={({ field }) => (
                                    <InputControl
                                                  {...field}
                                                  label="Date record was first recorded"
                                                  type="datetime-local"/>
                                )}/>

                    <Spacer margin={spacerMargin}/>

                    {/* period */}
                    <FhirPeriod label="Time period plan covers"
                                context="period"
                                disabled={disabled}
                                readonly={isPatient}/>

                    <Spacer margin={spacerMargin}/>

                    {/* addresses */}
                    <FhirReference label="Health issues this plan addresses"
                                   context="addresses"
                                   referenceType="Condition"
                                   referenceList={conditionsList}
                                   enableInlineActions={enableInlineActions}
                                   multiple={true}
                                   required={false}
                                   disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* goal */}
                    <FhirReference label="Desired outcome of plan"
                                   context="goal"
                                   referenceType="Goal"
                                   referenceList={goalsList}
                                   enableInlineActions={enableInlineActions}
                                   multiple={true}
                                   required={false}
                                   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}/>
                </CardBody>
            </Disabled>
            <CardDivider/>
            <CardBody>
                <TabPanel initialTabName="activities"
                          tabs={[
                              { name: 'activities', title: 'Activities' },
                              { name: 'notes', title: 'Notes' }
                          ]}>
                    {(tab) => {
                        // activities
                        if (tab.name === 'activities') {
                            return (
                                <Disabled isDisabled={isPatient}>
                                    <div style={{ paddingTop: '16px' }}>
                                        <Spacer margin={spacerMargin}/>

                                        {activityFieldArray.fields.length === 0 && (
                                            <>
                                                <Flex>
                                                    <FlexItem>
                                                        <Heading level={5}>Activities</Heading>
                                                    </FlexItem>
                                                    <FlexItem>
                                                        {!isPatient && (
                                                            <button
                                                                type="button"
                                                                className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                                                onClick={addActivity}
                                                                disabled={disabled}
                                                            >
                                                                <PlusCircle />
                                                                Add Activity
                                                            </button>
                                                        )}
                                                    </FlexItem>
                                                </Flex>
                                                <Divider margin="2"/>
                                                <Spacer margin="8"/>

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

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

                                        {activityFieldArray.fields.map((field, index) => (
                                            <React.Fragment key={field.id}>
                                                <Card>
                                                    <CardHeader>
                                                        <Flex align="center" justify="space-between">
                                                            <FlexItem>
                                                                <h4>Activity {index + 1}</h4>
                                                            </FlexItem>
                                                            <FlexItem>
                                                                {!isPatient && (
                                                                    <button
                                                                        type="button"
                                                                        className="btn btn-red-ghost"
                                                                        title="Remove activity"
                                                                        aria-label="Remove activity"
                                                                        onClick={() => removeActivity(index)}
                                                                        disabled={disabled}
                                                                    >
                                                                        <Trash2 />
                                                                    </button>
                                                                )}
                                                            </FlexItem>
                                                        </Flex>
                                                    </CardHeader>
                                                    <CardBody>
                                                        {/* activity.outcomeCodeableConcept */}
                                                        <FhirCodeableConcept label="Results of the activity"
                                                                             context={`activity.${index}.outcomeCodeableConcept`}
                                                                             options={carePlanActivityOutcome}
                                                                             multiple={true}
                                                                             loading={loading}
                                                                             disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* activity.reference */}
                                                        {/*<ActivityReference index={index} disabled={submitting}/>*/}

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

                                                        {/* activity.progress */}
                                                        <FhirAnnotation label="Comments about the activity status/progress"
                                                                        context={`activity.${index}.progress`}
                                                                        disabled={disabled}
                                                                        readonly={isPatient}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        <Heading level={5}>Activity Detail</Heading>
                                                        <Divider margin="2"/>
                                                        <Spacer margin={spacerMargin}/>

                                                        {/* detail.kind */}
                                                        <FhirCode label="Kind"
                                                                  context={`activity.${index}.detail.kind`}
                                                                  options={carePlanActivityKind}
                                                                  loading={loading}
                                                                  disabled={disabled} />

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* detail.status */}
                                                        <FhirCode label="Status"
                                                                  context={`activity.${index}.detail.status`}
                                                                  options={carePlanActivityStatus}
                                                                  required={true}
                                                                  loading={loading}
                                                                  disabled={disabled} />

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* detail.statusReason */}
                                                        {/*<FhirCodeableConcept label="Reason for current status"*/}
                                                        {/*                     context={`activity.${index}.detail.statusReason`}*/}
                                                        {/*                     options={reactionEventSeverity}*/}
                                                        {/*                     disabled={submitting}/>*/}

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

                                                        {/* detail.code */}
                                                        <FhirValueSetSearch label="Detail type of activity"
                                                                            context={`activity.${index}.detail.code`}
                                                                            valueSetUrl={valueSetUrls.procedureCode}
                                                                            placeholder="Search for procedure codes..."
                                                                            multiple={false}
                                                                            disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* detail.doNotPerform */}
                                                        <Controller key={`activity.${index}.detail.doNotPerform`}
                                                                    name={`activity.${index}.detail.doNotPerform`}
                                                                    control={control}
                                                                    disabled={disabled}
                                                                    render={({ field }) => (
                                                                        <ToggleControl
                                                                                       label="Do Not Perform"
                                                                                       checked={field.value}
                                                                                       onChange={field.onChange}/>
                                                                    )}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* detail.productCodeableConcept */}
                                                        <FhirValueSetSearch label="What is to be administered/supplied"
                                                                            context={`activity.${index}.detail.productCodeableConcept`}
                                                                            multiple={false}
                                                                            valueSetUrl={valueSetUrls.medicationCodes}
                                                                            placeholder="Search for medications..."
                                                                            disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* detail.reasonCode */}
                                                        <FhirValueSetSearch label="Why activity should be done or why activity was prohibited"
                                                                            context={`activity.${index}.detail.reasonCode`}
                                                                            valueSetUrl={valueSetUrls.clinicalFindings}
                                                                            placeholder="Search for clinical findings..."
                                                                            multiple={true}
                                                                            disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* reasonReference */}
                                                        <ActivityDetailReasonReferences index={index}
                                                                                        disabled={disabled}
                                                                                        readonly={isPatient}
                                                                                        enableInlineActions={enableInlineActions}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* detail.dailyAmount */}
                                                        <FhirQuantity label="How to consume/day?"
                                                                      context={`activity.${index}.detail.dailyAmount`}
                                                                      isSimpleQuantity={true}
                                                                      disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* detail.quantity */}
                                                        <FhirQuantity label="How much to administer/supply/consume"
                                                                      context={`activity.${index}.detail.quantity`}
                                                                      isSimpleQuantity={true}
                                                                      disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* detail.description */}
                                                        <Controller key={`activity.${index}.detail.description`}
                                                                    name={`activity.${index}.detail.description`}
                                                                    control={control}
                                                                    disabled={disabled}
                                                                    render={({ field }) => (
                                                                        <TextareaControl
                                                                                         label="Description"
                                                                                         value={field.value}
                                                                                         onChange={field.onChange}
                                                                                         placeholder="Extra info describing activity to perform"
                                                                                         rows={3}/>
                                                                    )}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* detail.scheduled */}
                                                        <TypeSelector label="When activity is to occur"
                                                                      context={`activity.${index}.detail.scheduled`}
                                                                      options={[
                                                                          { name: 'Timing', key: 'timing' },
                                                                          { name: 'Period', key: 'period' }
                                                                      ]}
                                                                      required={false}
                                                                      disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {watch(`activity.${index}.detail.scheduled`) === 'timing' && (
                                                            <>
                                                                {/* detail.scheduledTiming */}
                                                                <FhirTiming context={`activity.${index}.detail.scheduledTiming`}
                                                                            disabled={disabled}/>

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

                                                        {watch(`activity.${index}.detail.scheduled`) === 'period' && (
                                                            <>
                                                                {/* detail.scheduledPeriod */}
                                                                <FhirPeriod label="Scheduled Period"
                                                                            context={`activity.${index}.detail.scheduledPeriod`}
                                                                            disabled={disabled}
                                                                            readonly={isPatient}/>

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

                                                        {/* detail.goal */}
                                                        <FhirReference label="Goals this activity relates to"
                                                                       context={`activity.${index}.detail.goal`}
                                                                       referenceType="Goal"
                                                                       referenceList={goalsList}
                                                                       enableInlineActions={enableInlineActions}
                                                                       multiple={true}
                                                                       required={false}
                                                                       disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* detail.location */}
                                                        <FhirReference label="Where it should happen"
                                                                       context={`activity.${index}.detail.location`}
                                                                       referenceType="Location"
                                                                       referenceList={locationsList}
                                                                       enableInlineActions={enableInlineActions}
                                                                       required={false}
                                                                       disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        <ActivityDetailPerformers index={index}
                                                                                  disabled={disabled}
                                                                                  readonly={isPatient}
                                                                                  enableInlineActions={enableInlineActions}/>
                                                        <Spacer margin={spacerMargin}/>
                                                    </CardBody>
                                                </Card>
                                                <Spacer margin={spacerMargin}/>
                                            </React.Fragment>
                                        ))}

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

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

                                        {/* note */}
                                        <FhirAnnotation label="Comments about the plan"
                                                        context={`note`}
                                                        disabled={disabled}
                                                        readonly={isPatient}/>

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

export default FhirCarePlan;