import React, { useState, useEffect } from 'react';
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,
    FhirQuantity,
    FhirReference,
    FhirReferenceCollection
} from '../../components';
import {
    useFhirConditions,
    useFhirEncounters,
    useFhirImmunizationBroadcast,
    useFhirImmunizations,
    useFhirLocations,
    useFhirObservations
} 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 FhirImmunizationProps {
    elevated?: boolean;
    disabled?: boolean;
    enableInlineActions?: boolean;
}

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` });

    return (
        <FhirReferenceCollection label="Who performed event"
                                 references={itemReferenceFieldArray}
                                 context={`performer.${index}.actor`}
                                 referenceTypes={[
                                     { name: 'PractitionerRole', key: 'PractitionerRole' }
                                 ]}
                                 getReferenceList={(referenceType: string): FhirResource[] => {
                                     switch (referenceType) {
                                         default:
                                             return [];
                                     }
                                 }}
                                 required={true}
                                 disabled={disabled}
                                 readonly={readonly}
                                 multiple={false}
                                 enableInlineActions={enableInlineActions}/>
    );
};

export const FhirImmunization: React.FC<FhirImmunizationProps> = ({ 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 [immunizationStatus, setImmunizationStatus] = useState<IValueSet[]>([]);
    const [immunizationStatusReason, setImmunizationStatusReason] = useState<IValueSet[]>([]);
    const [vaccineCode, setVaccineCode] = useState<IValueSet[]>([]);
    const [usCoreVaccineCode, setUsCoreVaccineCode] = useState<IValueSet[]>([]);
    const [immunizationOrigin, setImmunizationOrigin] = useState<IValueSet[]>([]);
    const [immunizationSite, setImmunizationSite] = useState<IValueSet[]>([]);
    const [immunizationRoute, setImmunizationRoute] = useState<IValueSet[]>([]);
    const [immunizationFunction, setImmunizationFunction] = useState<IValueSet[]>([]);
    const [immunizationReason, setImmunizationReason] = useState<IValueSet[]>([]);
    const [immunizationSubpotentReason, setImmunizationSubpotentReason] = useState<IValueSet[]>([]);
    const [immunizationProgramEligibility, setImmunizationProgramEligibility] = useState<IValueSet[]>([]);
    const [immunizationFundingSource, setImmunizationFundingSource] = useState<IValueSet[]>([]);
    const [immunizationTargetDisease, setImmunizationTargetDisease] = useState<IValueSet[]>([]);
    const [mvxManufacturer, setMvxManufacturer] = useState<IValueSet[]>([]);

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

    useFhirImmunizations();
    useFhirImmunizationBroadcast();
    const { locationsList } = useFhirLocations();
    const { encountersList } = useFhirEncounters();
    const { conditionsList } = useFhirConditions();
    const { observationsList } = useFhirObservations();

    const performerFieldArray = useFieldArray({ control, name: 'performer' });
    const reactionFieldArray = useFieldArray({ control, name: 'reaction' });
    const protocolAppliedFieldArray = useFieldArray({ control, name: 'protocolApplied' });
    const reasonReferenceFieldArray = useFieldArray({ control, name: 'reasonReference' });
    const educationFieldArray = useFieldArray({ control, name: 'education' });

    useEffect(() => {
        const loadValueSets = async () => {
            setLoading(true);
            try {
                const [
                    immunizationStatusValueSet,
                    immunizationStatusReasonValueSet,
                    vaccineCodeValueSet,
                    usCoreVaccineCodeValueSet,
                    immunizationOriginValueSet,
                    immunizationSiteValueSet,
                    immunizationRouteValueSet,
                    immunizationFunctionValueSet,
                    immunizationReasonValueSet,
                    immunizationSubpotentReasonValueSet,
                    immunizationProgramEligibilityValueSet,
                    immunizationFundingSourceValueSet,
                    immunizationTargetDiseaseValueSet,
                    mvxManufacturerValueSet
                ] = await Promise.all([
                    fetchValueSet(valueSetUrls.immunizationStatus),
                    fetchValueSet(valueSetUrls.immunizationStatusReason),
                    fetchValueSet(valueSetUrls.vaccineCode),
                    fetchValueSet(valueSetUrls.usCoreVaccineCode),
                    fetchValueSet(valueSetUrls.immunizationOrigin),
                    fetchValueSet(valueSetUrls.immunizationSite),
                    fetchValueSet(valueSetUrls.immunizationRoute),
                    fetchValueSet(valueSetUrls.immunizationFunction),
                    fetchValueSet(valueSetUrls.immunizationReason),
                    fetchValueSet(valueSetUrls.immunizationSubpotentReason),
                    fetchValueSet(valueSetUrls.immunizationProgramEligibility),
                    fetchValueSet(valueSetUrls.immunizationFundingSource),
                    fetchValueSet(valueSetUrls.immunizationTargetDisease),
                    fetchValueSet(valueSetUrls.mvxManufacturer)
                ]);

                setImmunizationStatus(immunizationStatusValueSet);
                setImmunizationStatusReason(immunizationStatusReasonValueSet);
                setVaccineCode(vaccineCodeValueSet);
                setUsCoreVaccineCode(usCoreVaccineCodeValueSet);
                setImmunizationOrigin(immunizationOriginValueSet);
                setImmunizationSite(immunizationSiteValueSet);
                setImmunizationRoute(immunizationRouteValueSet);
                setImmunizationFunction(immunizationFunctionValueSet);
                setImmunizationReason(immunizationReasonValueSet);
                setImmunizationSubpotentReason(immunizationSubpotentReasonValueSet);
                setImmunizationProgramEligibility(immunizationProgramEligibilityValueSet);
                setImmunizationFundingSource(immunizationFundingSourceValueSet);
                setImmunizationTargetDisease(immunizationTargetDiseaseValueSet);
                setMvxManufacturer(mvxManufacturerValueSet);
            } catch (err) {
                console.error('Error loading value sets:', err);
            } finally {
                setLoading(false);
            }
        };

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

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

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

    const addReaction = () => {
        reactionFieldArray.append({
            date: '',
            detail: null,
            reported: false
        });
    };

    const removeReaction = (index: number) => {
        reactionFieldArray.remove(index);
    };

    const addProtocolApplied = () => {
        protocolAppliedFieldArray.append({
            series: '',
            authority: null,
            targetDisease: [],
            doseNumberPositiveInt: null,
            doseNumberString: '',
            seriesDosesPositiveInt: null,
            seriesDosesString: ''
        });
    };

    const removeProtocolApplied = (index: number) => {
        protocolAppliedFieldArray.remove(index);
    };

    const addEducation = () => {
        educationFieldArray.append({
            documentType: '',
            reference: '',
            publicationDate: '',
            presentationDate: ''
        });
    };

    const removeEducation = (index: number) => {
        educationFieldArray.remove(index);
    };

    return (
        <Card style={elevated ? { boxShadow: 'none' } : {}}>
            {elevated && <Elevation value={5}/>}
            <CardHeader>
                <Heading level={5}>Details</Heading>
            </CardHeader>
            <Disabled isDisabled={isPatient}>
                <CardBody>
                    {/* vaccineCode */}
                    <FhirCodeableConcept label="Vaccine product administered"
                                         context="vaccineCode"
                                         options={usCoreVaccineCode}
                                         disabled={disabled}
                                         loading={loading}
                                         combobox={true}
                                         required={true}/>

                    <Spacer margin={spacerMargin}/>

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

                    <Spacer margin={spacerMargin}/>

                    {watch('status') && watch('status') === 'not-done' && (
                        <>
                            {/* statusReason */}
                            <FhirCodeableConcept label="Reason not done"
                                                 context="statusReason"
                                                 options={immunizationStatusReason}
                                                 loading={loading}
                                                 disabled={disabled}/>

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

                    {/* lotNumber */}
                    <Controller key="lotNumber"
                                name="lotNumber"
                                control={control}
                                disabled={disabled}
                                render={({ field }) => (
                                    <InputControl
                                                  {...field}
                                                  label="Vaccine lot number"
                                                  placeholder="Lot number"/>
                                )}/>

                    <Spacer margin={spacerMargin}/>

                    {/* manufacturer - an MVX code, stored as manufacturer.identifier */}
                    <FhirCodeableConcept label="Manufacturer"
                                         context="manufacturer"
                                         options={mvxManufacturer}
                                         disabled={disabled}
                                         loading={loading}
                                         combobox={true}
                                         multiple={false}/>
                    <Spacer margin={spacerMargin}/>
                    {/* expirationDate */}
                    <Controller key="expirationDate"
                                name="expirationDate"
                                control={control}
                                disabled={disabled}
                                render={({ field }) => (
                                    <InputControl
                                                  {...field}
                                                  label="Vaccine expiration date"
                                                  type="date"/>
                                )}/>

                    <Spacer margin={spacerMargin}/>

                    {/* occurrenceDateTime */}
                    <Controller key="occurrenceDateTime"
                                name="occurrenceDateTime"
                                control={control}
                                disabled={disabled}
                                rules={{ required: true }}
                                render={({ field, fieldState }) => (
                                    <>
                                        <InputControl
                                                      {...field}
                                                      label="Vaccine administration date *"
                                                      type="datetime-local"/>

                                        {fieldState.error && (
                                            <DismissibleAlert status="error">
                                                Vaccine administration date is required
                                            </DismissibleAlert>
                                        )}
                                    </>
                                )}/>

                    <Spacer margin={spacerMargin}/>

                    {/* recorded */}
                    <Controller key="recorded"
                                name="recorded"
                                control={control}
                                disabled={disabled}
                                render={({ field }) => (
                                    <InputControl
                                                  {...field}
                                                  label="When the immunization was first captured in the subject's record"
                                                  type="datetime-local"/>
                                )}/>

                    <Spacer margin={spacerMargin}/>

                    {/* primarySource */}
                    <Controller key="primarySource"
                                name="primarySource"
                                control={control}
                                disabled={disabled}
                                render={({ field }) => (
                                    <ToggleControl 
                                                   label="Primary Source"
                                                   help="Information from person who administered vaccine"
                                                   checked={field.value}
                                                   onChange={field.onChange}/>
                                )}/>

                    <Spacer margin={spacerMargin}/>

                    {watch('primarySource') === false && (
                        <>
                            {/* reportOrigin */}
                            <FhirCodeableConcept label="Source of a secondarily reported record"
                                                 context="reportOrigin"
                                                 options={immunizationOrigin}
                                                 loading={loading}
                                                 disabled={disabled}/>

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

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

                    <Spacer margin={spacerMargin}/>

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

                    <Spacer margin={spacerMargin}/>
                </CardBody>
            </Disabled>
            <CardDivider/>
            <CardBody>
                <TabPanel initialTabName="administration"
                          tabs={[
                              { name: 'administration', title: 'Administration' },
                              { name: 'protocol', title: 'Protocol' },
                              { name: 'reasons', title: 'Reasons' },
                              { name: 'reactions', title: 'Reactions' },
                              { name: 'performers', title: 'Performers' },
                              { name: 'education', title: 'Education' },
                              { name: 'notes', title: 'Notes' }
                          ]}>
                    {(tab) => {
                        // administration
                        if (tab.name === 'administration') {
                            return (
                                <Disabled isDisabled={isPatient}>
                                    <div style={{ paddingTop: '16px' }}>
                                        <Spacer margin={spacerMargin}/>

                                        {/* site */}
                                        <FhirCodeableConcept label="Body site vaccine was administered"
                                                             context="site"
                                                             options={immunizationSite}
                                                             loading={loading}
                                                             disabled={disabled}/>

                                        <Spacer margin={spacerMargin}/>

                                        {/* route */}
                                        <FhirCodeableConcept label="How vaccine entered body"
                                                             context="route"
                                                             options={immunizationRoute}
                                                             loading={loading}
                                                             disabled={disabled}/>

                                        <Spacer margin={spacerMargin}/>

                                        {/* doseQuantity */}
                                        <FhirQuantity label="Dose Quantity"
                                                      context="doseQuantity"
                                                      isSimpleQuantity={true}
                                                      disabled={disabled}/>

                                        <Spacer margin={spacerMargin}/>

                                        {/* isSubpotent */}
                                        <Controller key="isSubpotent"
                                                    name="isSubpotent"
                                                    control={control}
                                                    disabled={disabled}
                                                    render={({ field }) => (
                                                        <ToggleControl 
                                                                       label="Subpotent Dose"
                                                                       help="Dose is subpotent or below the recommended amount"
                                                                       checked={field.value}
                                                                       onChange={field.onChange}/>
                                                    )}/>

                                        <Spacer margin={spacerMargin}/>

                                        {watch('isSubpotent') && (
                                            <>
                                                {/* subpotentReason */}
                                                <FhirCodeableConcept label="Reason for being subpotent"
                                                                     context="subpotentReason"
                                                                     options={immunizationSubpotentReason}
                                                                     multiple={true}
                                                                     loading={loading}
                                                                     disabled={disabled}/>

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

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

                                        {protocolAppliedFieldArray.fields.length === 0 && (
                                            <>
                                                <Flex>
                                                    <FlexItem>
                                                        <Heading level={5}>Protocol followed by the provider</Heading>
                                                    </FlexItem>
                                                    <FlexItem>
                                                        {!isPatient && (
                                                            <button type="button"
                                                                    className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                                                    onClick={addProtocolApplied}
                                                                    disabled={disabled}>
                                                                <PlusCircle className="w-4 h-4" />
                                                                Add Protocol
                                                            </button>
                                                        )}
                                                    </FlexItem>
                                                </Flex>
                                                <Divider margin="2"/>
                                                <Spacer margin="8"/>

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

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

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

                                                    <CardBody>
                                                        {/* series */}
                                                        <Controller key={`protocolApplied.${index}.series`}
                                                                    name={`protocolApplied.${index}.series`}
                                                                    control={control}
                                                                    disabled={disabled}
                                                                    render={({ field }) => (
                                                                        <InputControl
                                                                                      {...field}
                                                                                      label="Name of vaccine series"
                                                                                      placeholder="Series"/>
                                                                    )}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* targetDisease */}
                                                        <FhirCodeableConcept label="Vaccine preventatable disease being targetted"
                                                                             context={`protocolApplied.${index}.targetDisease`}
                                                                             options={immunizationTargetDisease}
                                                                             disabled={disabled}
                                                                             loading={loading}
                                                                             multiple={true}
                                                                             required={true}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* doseNumberPositiveInt */}
                                                        <Controller key={`protocolApplied.${index}.doseNumberPositiveInt`}
                                                                    name={`protocolApplied.${index}.doseNumberPositiveInt`}
                                                                    control={control}
                                                                    rules={{ required: true }}
                                                                    disabled={disabled}
                                                                    render={({ field, fieldState }) => (
                                                                        <>
                                                                            <InputControl
                                                                                          {...field}
                                                                                          label="Dose number within series"
                                                                                          type="number"
                                                                                          min="1"
                                                                                          onChange={(value) => field.onChange(parseInt(value) || null)}/>

                                                                            {fieldState.error && (
                                                                                <DismissibleAlert status="error">
                                                                                    Dose number within series is required
                                                                                </DismissibleAlert>
                                                                            )}
                                                                        </>
                                                                    )}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* seriesDosesPositiveInt */}
                                                        <Controller key={`protocolApplied.${index}.seriesDosesPositiveInt`}
                                                                    name={`protocolApplied.${index}.seriesDosesPositiveInt`}
                                                                    control={control}
                                                                    disabled={disabled}
                                                                    render={({ field }) => (
                                                                        <InputControl
                                                                                      {...field}
                                                                                      label="Recommended number of doses for immunity"
                                                                                      type="number"
                                                                                      min="1"
                                                                                      onChange={(value) => field.onChange(parseInt(value) || null)}/>
                                                                    )}/>
                                                    </CardBody>
                                                </Card>
                                                <Spacer margin={spacerMargin}/>
                                            </React.Fragment>
                                        ))}

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

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

                                        {/* reasonCode */}
                                        <FhirCodeableConcept label="Why immunization occurred"
                                                             context={`reasonCode`}
                                                             options={immunizationReason}
                                                             multiple={true}
                                                             loading={loading}
                                                             disabled={disabled}/>

                                        <Spacer margin={spacerMargin}/>

                                        {/* programEligibility */}
                                        <FhirCodeableConcept label="Patient eligibility for a vaccination program"
                                                             context={`programEligibility`}
                                                             options={immunizationProgramEligibility}
                                                             multiple={true}
                                                             loading={loading}
                                                             disabled={disabled}/>

                                        <Spacer margin={spacerMargin}/>

                                        {/* fundingSource */}
                                        <FhirCodeableConcept label="Funding source for the vaccine"
                                                             context={`fundingSource`}
                                                             options={immunizationFundingSource}
                                                             loading={loading}
                                                             disabled={disabled}/>

                                        <Spacer margin={spacerMargin}/>

                                        {/* reasonReference */}
                                        <FhirReferenceCollection label="Why immunization occurred"
                                                                 references={reasonReferenceFieldArray}
                                                                 context="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={isPatient}
                                                                 enableInlineActions={enableInlineActions}/>

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

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

                                        {reactionFieldArray.fields.length === 0 && (
                                            <>
                                                <Flex>
                                                    <FlexItem>
                                                        <Heading level={5}>Reactions</Heading>
                                                    </FlexItem>
                                                    <FlexItem>
                                                        {!isPatient && (
                                                            <button type="button"
                                                                    className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                                                    onClick={addReaction}
                                                                    disabled={disabled}>
                                                                <PlusCircle className="w-4 h-4" />
                                                                Add Reaction
                                                            </button>
                                                        )}
                                                    </FlexItem>
                                                </Flex>
                                                <Divider margin="2"/>
                                                <Spacer margin="8"/>

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

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

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

                                                    <CardBody>
                                                        {/* reaction.date */}
                                                        <Controller key={`reaction.${index}.date`}
                                                                    name={`reaction.${index}.date`}
                                                                    control={control}
                                                                    disabled={disabled}
                                                                    render={({ field }) => (
                                                                        <InputControl
                                                                                      {...field}
                                                                                      label="Date"
                                                                                      type="datetime-local"/>
                                                                    )}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* reaction.detail */}
                                                        <FhirReference label="Additional information on reaction"
                                                                       context={`reaction.${index}.detail`}
                                                                       referenceType="Observation"
                                                                       referenceList={observationsList}
                                                                       enableInlineActions={enableInlineActions}
                                                                       required={false}
                                                                       disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* reaction.reported */}
                                                        <Controller key={`reaction.${index}.reported`}
                                                                    name={`reaction.${index}.reported`}
                                                                    control={control}
                                                                    disabled={disabled}
                                                                    render={({ field }) => (
                                                                        <ToggleControl 
                                                                                       label="Reported"
                                                                                       checked={field.value}
                                                                                       onChange={field.onChange}/>
                                                                    )}/>

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

                                        {!isPatient && reactionFieldArray.fields.length > 0 && (
                                            <Flex justify="center">
                                                <FlexItem>
                                                    <button type="button"
                                                            className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                                            onClick={addReaction}
                                                            disabled={disabled}>
                                                        <PlusCircle className="w-4 h-4" />
                                                        Add Reaction
                                                    </button>
                                                </FlexItem>
                                            </Flex>
                                        )}
                                    </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}/>

                                                        {/* performer.function */}
                                                        <FhirCodeableConcept label="What type of performance was done"
                                                                             context={`performer.${index}.function`}
                                                                             options={immunizationFunction}
                                                                             loading={loading}
                                                                             disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* performer.actor */}
                                                        <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>
                            );
                        }

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

                                        {educationFieldArray.fields.length === 0 && (
                                            <>
                                                <Flex>
                                                    <FlexItem>
                                                        <Heading level={5}>Educational material presented to patient</Heading>
                                                    </FlexItem>
                                                    <FlexItem>
                                                        {!isPatient && (
                                                            <button type="button"
                                                                    className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                                                    onClick={addEducation}
                                                                    disabled={disabled}>
                                                                <PlusCircle className="w-4 h-4" />
                                                                Add Education
                                                            </button>
                                                        )}
                                                    </FlexItem>
                                                </Flex>
                                                <Divider margin="2"/>
                                                <Spacer margin="8"/>

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

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

                                        {educationFieldArray.fields.map((field, index) => (
                                            <React.Fragment key={field.id}>
                                                <Card>
                                                    <CardHeader>
                                                        <Flex align="center" justify="space-between">
                                                            <FlexItem>
                                                                <h4>Educational material presented to patient {index + 1}</h4>
                                                            </FlexItem>
                                                            <FlexItem>
                                                                {!isPatient && (
                                                                    <button type="button"
                                                                            className="btn btn-red-ghost"
                                                                            title="Remove education"
                                                                            aria-label="Remove education"
                                                                            onClick={() => removeEducation(index)}
                                                                            disabled={disabled}>
                                                                        <Trash2 className="w-4 h-4" />
                                                                    </button>
                                                                )}
                                                            </FlexItem>
                                                        </Flex>
                                                    </CardHeader>

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

                                                        {/* education.documentType */}
                                                        <Controller key={`education.${index}.documentType`}
                                                                    name={`education.${index}.documentType`}
                                                                    control={control}
                                                                    disabled={disabled}
                                                                    render={({ field }) => (
                                                                        <InputControl
                                                                                      {...field}
                                                                                      label="Type of educational material"
                                                                                      placeholder="e.g., VIS (Vaccine Information Statement)"/>
                                                                    )}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* education.reference */}
                                                        <Controller key={`education.${index}.reference`}
                                                                    name={`education.${index}.reference`}
                                                                    control={control}
                                                                    disabled={disabled}
                                                                    render={({ field }) => (
                                                                        <InputControl
                                                                                      {...field}
                                                                                      label="Reference to educational material"
                                                                                      placeholder="URL or reference to the educational material"/>
                                                                    )}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* education.publicationDate */}
                                                        <Controller key={`education.${index}.publicationDate`}
                                                                    name={`education.${index}.publicationDate`}
                                                                    control={control}
                                                                    disabled={disabled}
                                                                    render={({ field }) => (
                                                                        <InputControl
                                                                                      {...field}
                                                                                      label="Educational material publication date"
                                                                                      type="datetime-local"/>
                                                                    )}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* education.presentationDate */}
                                                        <Controller key={`education.${index}.presentationDate`}
                                                                    name={`education.${index}.presentationDate`}
                                                                    control={control}
                                                                    disabled={disabled}
                                                                    render={({ field }) => (
                                                                        <InputControl
                                                                                      {...field}
                                                                                      label="Educational material presentation date"
                                                                                      type="datetime-local"/>
                                                                    )}/>

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

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

                                        <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 immunization notes"
                                                        context={`note`}
                                                        disabled={disabled}
                                                        readonly={isPatient}/>

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

export default FhirImmunization;