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 { Text } from '../ui/text';
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,
    FhirRatio,
    FhirReference,
    FhirTiming,
    FhirValueSetSearch,
    TypeSelector
} from '../../components';
import {
    useFhirAllergyIntolerances,
    useFhirEncounters,
    useFhirNutritionOrderBroadcast,
    useFhirNutritionOrders
} from '../../hooks';
import { PlusCircle, Trash2 } from 'lucide-react';

interface SupplementScheduleProps {
    index: number;
    disabled?: boolean;
    readonly?: boolean;
}

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

const SupplementSchedule: React.FC<SupplementScheduleProps> = ({ index, disabled = false, readonly = false }) => {
    const { control } = useFormContext();
    const scheduleFieldArray = useFieldArray({ control, name: `supplement.${index}.schedule` });

    return (
        <>
            {scheduleFieldArray.fields.length === 0 && (
                <>
                    <Flex>
                        <FlexItem>
                            {!readonly && (
                                <button type="button"
                                        className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                        onClick={() => scheduleFieldArray.append({})}
                                        disabled={disabled}>
                                    <PlusCircle className="w-4 h-4" />
                                    Add Schedule
                                </button>
                            )}
                        </FlexItem>
                    </Flex>
                    <Spacer margin="8"/>

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

                    <Spacer margin="12px"/>
                </>
            )}

            {scheduleFieldArray.fields.map((scheduleField, scheduleIndex) => (
                <React.Fragment key={scheduleField.id}>
                    <Card size="small">
                        <CardHeader>
                            <Flex align="center" justify="space-between">
                                <FlexItem>
                                    <Text size="14px" weight="600">Schedule {scheduleIndex + 1}</Text>
                                </FlexItem>
                                <FlexItem>
                                    {!readonly && (
                                        <button type="button"
                                                className="btn btn-red-ghost-sm"
                                                title="Remove schedule"
                                                aria-label="Remove schedule"
                                                onClick={() => scheduleFieldArray.remove(scheduleIndex)}
                                                disabled={disabled}>
                                            <Trash2 className="w-4 h-4" />
                                        </button>
                                    )}
                                </FlexItem>
                            </Flex>
                        </CardHeader>
                        <CardBody>
                            <FhirTiming context={`supplement.${index}.schedule.${scheduleIndex}`}
                                        disabled={disabled}/>
                        </CardBody>
                    </Card>
                    <Spacer margin="12px"/>
                </React.Fragment>
            ))}

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

export const FhirNutritionOrder: React.FC<FhirNutritionOrderProps> = ({ 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 [requestIntent, setRequestIntent] = useState<IValueSet[]>([]);
    const [encounterDiet, setEncounterDiet] = useState<IValueSet[]>([]);
    const [dietType, setDietType] = useState<IValueSet[]>([]);
    const [nutrientCode, setNutrientCode] = useState<IValueSet[]>([]);
    const [textureCode, setTextureCode] = useState<IValueSet[]>([]);
    const [modifiedFoodtype, setModifiedFoodtype] = useState<IValueSet[]>([]);
    const [consistencyType, setConsistencyType] = useState<IValueSet[]>([]);
    const [supplementType, setSupplementType] = useState<IValueSet[]>([]);
    const [entformulaType, setEntformulaType] = useState<IValueSet[]>([]);
    const [entformulaAdditive, setEntformulaAdditive] = useState<IValueSet[]>([]);
    const [enteralRoute, setEnteralRoute] = useState<IValueSet[]>([]);

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

    useFhirNutritionOrders();
    useFhirNutritionOrderBroadcast();
    const { encountersList } = useFhirEncounters();
    const { allergyIntolerancesList } = useFhirAllergyIntolerances();

    const oralDietScheduleFieldArray = useFieldArray({ control, name: 'oralDiet.schedule' });
    const oralDietNutrientFieldArray = useFieldArray({ control, name: 'oralDiet.nutrient' });
    const oralDietTextureFieldArray = useFieldArray({ control, name: 'oralDiet.texture' });
    const supplementFieldArray = useFieldArray({ control, name: 'supplement' });
    const enteralFormulaAdministrationFieldArray = useFieldArray({ control, name: 'enteralFormula.administration' });

    useEffect(() => {
        const loadValueSets = async () => {
            setLoading(true);
            try {
                const [
                    requestStatusValueSet,
                    requestIntentValueSet,
                    encounterDietValueSet,
                    dietTypeValueSet,
                    nutrientCodeValueSet,
                    textureCodeValueSet,
                    modifiedFoodtypeValueSet,
                    consistencyTypeValueSet,
                    supplementTypeValueSet,
                    entformulaTypeValueSet,
                    entformulaAdditiveValueSet,
                    enteralRouteValueSet,
                ] = await Promise.all([
                    fetchValueSet(valueSetUrls.requestStatus),
                    fetchValueSet(valueSetUrls.requestIntent),
                    fetchValueSet(valueSetUrls.encounterDiet),
                    fetchValueSet(valueSetUrls.dietType),
                    fetchValueSet(valueSetUrls.nutrientCode),
                    fetchValueSet(valueSetUrls.textureCode),
                    fetchValueSet(valueSetUrls.modifiedFoodtype),
                    fetchValueSet(valueSetUrls.consistencyType),
                    fetchValueSet(valueSetUrls.supplementType),
                    fetchValueSet(valueSetUrls.entformulaType),
                    fetchValueSet(valueSetUrls.entformulaAdditive),
                    fetchValueSet(valueSetUrls.enteralRoute),
                ]);

                setRequestStatus(requestStatusValueSet);
                setRequestIntent(requestIntentValueSet);
                setEncounterDiet(encounterDietValueSet);
                setDietType(dietTypeValueSet);
                setNutrientCode(nutrientCodeValueSet);
                setTextureCode(textureCodeValueSet);
                setModifiedFoodtype(modifiedFoodtypeValueSet);
                setConsistencyType(consistencyTypeValueSet);
                setSupplementType(supplementTypeValueSet);
                setEntformulaType(entformulaTypeValueSet);
                setEntformulaAdditive(entformulaAdditiveValueSet);
                setEnteralRoute(enteralRouteValueSet);
            } catch (err) {
                console.error('Error loading value sets:', err);
            } finally {
                setLoading(false);
            }
        };

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

    const addOralDietNutrient = () => {
        oralDietNutrientFieldArray.append({
            modifier: null,
            amount: null
        });
    };

    const removeOralDietNutrient = (index: number) => {
        oralDietNutrientFieldArray.remove(index);
    };

    const addOralDietTexture = () => {
        oralDietTextureFieldArray.append({
            modifier: null,
            foodType: null
        });
    };

    const removeOralDietTexture = (index: number) => {
        oralDietTextureFieldArray.remove(index);
    };

    const addOralDietSchedule = () => {
        oralDietScheduleFieldArray.append({});
    };

    const removeOralDietSchedule = (index: number) => {
        oralDietScheduleFieldArray.remove(index);
    };

    const addSupplement = () => {
        supplementFieldArray.append({
            type: null,
            productName: '',
            schedule: [],
            quantity: null,
            instruction: ''
        });
    };

    const removeSupplement = (index: number) => {
        supplementFieldArray.remove(index);
    };

    const addEnteralFormulaAdministration = () => {
        enteralFormulaAdministrationFieldArray.append({
            schedule: null,
            quantity: null,
            rate: null
        });
    };

    const removeEnteralFormulaAdministration = (index: number) => {
        enteralFormulaAdministrationFieldArray.remove(index);
    };

    return (
        <Card style={elevated ? { boxShadow: 'none' } : {}}>
            {elevated && <Elevation value={5}/>}
            <CardHeader>
                <Heading level={5}>Details</Heading>
            </CardHeader>
            <Disabled isDisabled={isPatient}>
                <CardBody>
                    {/* status */}
                    <FhirCode label="Status"
                              context="status"
                              options={requestStatus}
                              required={true}
                              loading={loading}
                              disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

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

                    <Spacer margin={spacerMargin}/>

                    {/* dateTime */}
                    <Controller key="dateTime"
                                name="dateTime"
                                control={control}
                                disabled={disabled}
                                rules={{ required: true }}
                                render={({ field, fieldState }) => (
                                    <>
                                        <InputControl
                                                      {...field}
                                                      label="When the nutrition order was requested *"
                                                      type="datetime-local"/>

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

                    <Spacer margin={spacerMargin}/>

                    {/* allergyIntolerance */}
                    <FhirReference label="List of the patient's food and nutrition-related allergies and intolerances"
                                   context="allergyIntolerance"
                                   referenceType="AllergyIntolerance"
                                   referenceList={allergyIntolerancesList}
                                   enableInlineActions={enableInlineActions}
                                   multiple={true}
                                   required={false}
                                   disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* encounter */}
                    <FhirReference label="The encounter associated with this nutrition order"
                                   context="encounter"
                                   referenceType="Encounter"
                                   referenceList={encountersList}
                                   enableInlineActions={enableInlineActions}
                                   required={false}
                                   disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>
                </CardBody>
            </Disabled>
            <CardDivider/>
            <CardBody>
                <TabPanel initialTabName="oralDiet"
                          tabs={[
                              { name: 'oralDiet', title: 'Oral Diet' },
                              { name: 'supplement', title: 'Supplements' },
                              { name: 'enteralFormula', title: 'Enteral Formula' },
                              { name: 'preferences', title: 'Preferences' },
                              { name: 'notes', title: 'Notes' }
                          ]}>
                    {(tab) => {
                        // oralDiet
                        if (tab.name === 'oralDiet') {
                            return (
                                <Disabled isDisabled={isPatient}>
                                    <div style={{ paddingTop: '16px' }}>
                                        <Spacer margin={spacerMargin}/>

                                        {/* oralDiet.type */}
                                        <FhirCodeableConcept label="Type of oral diet or diet restrictions that describe what can be consumed orally"
                                                             context="oralDiet.type"
                                                             options={dietType}
                                                             disabled={disabled}
                                                             loading={loading}
                                                             multiple={true}
                                                             required={false}/>

                                        <Spacer margin={spacerMargin}/>

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

                                        {oralDietNutrientFieldArray.fields.length === 0 && (
                                            <>
                                                <Flex>
                                                    <FlexItem>
                                                        {!isPatient && (
                                                            <button type="button"
                                                                    className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                                                    onClick={addOralDietNutrient}
                                                                    disabled={disabled}>
                                                                <PlusCircle className="w-4 h-4" />
                                                                Add Nutrient
                                                            </button>
                                                        )}
                                                    </FlexItem>
                                                </Flex>
                                                <Spacer margin="8"/>

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

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

                                        {oralDietNutrientFieldArray.fields.map((field, index) => (
                                            <React.Fragment key={field.id}>
                                                <Card>
                                                    <CardHeader>
                                                        <Flex align="center" justify="space-between">
                                                            <FlexItem>
                                                                <h4>Nutrient {index + 1}</h4>
                                                            </FlexItem>
                                                            <FlexItem>
                                                                {!isPatient && (
                                                                    <button type="button"
                                                                            className="btn btn-red-ghost"
                                                                            title="Remove nutrient"
                                                                            aria-label="Remove nutrient"
                                                                            onClick={() => removeOralDietNutrient(index)}
                                                                            disabled={disabled}>
                                                                        <Trash2 className="w-4 h-4" />
                                                                    </button>
                                                                )}
                                                            </FlexItem>
                                                        </Flex>
                                                    </CardHeader>
                                                    <CardBody>
                                                        {/* oralDiet.nutrient.modifier */}
                                                        <FhirCodeableConcept label="Modifier"
                                                                             context={`oralDiet.nutrient.${index}.modifier`}
                                                                             options={nutrientCode}
                                                                             loading={loading}
                                                                             disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* oralDiet.nutrient.amount */}
                                                        <FhirQuantity label="Amount"
                                                                      context={`oralDiet.nutrient.${index}.amount`}
                                                                      isSimpleQuantity={true}
                                                                      disabled={disabled}/>

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

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

                                        <Spacer margin={spacerMargin}/>

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

                                        {oralDietTextureFieldArray.fields.length === 0 && (
                                            <>
                                                <Flex>
                                                    <FlexItem>
                                                        {!isPatient && (
                                                            <button type="button"
                                                                    className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                                                    onClick={addOralDietTexture}
                                                                    disabled={disabled}>
                                                                <PlusCircle className="w-4 h-4" />
                                                                Add Texture
                                                            </button>
                                                        )}
                                                    </FlexItem>
                                                </Flex>
                                                <Spacer margin="8"/>

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

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

                                        {oralDietTextureFieldArray.fields.map((field, index) => (
                                            <React.Fragment key={field.id}>
                                                <Card>
                                                    <CardHeader>
                                                        <Flex align="center" justify="space-between">
                                                            <FlexItem>
                                                                <h4>Texture {index + 1}</h4>
                                                            </FlexItem>
                                                            <FlexItem>
                                                                {!isPatient && (
                                                                    <button type="button"
                                                                            className="btn btn-red-ghost"
                                                                            title="Remove texture"
                                                                            aria-label="Remove texture"
                                                                            onClick={() => removeOralDietTexture(index)}
                                                                            disabled={disabled}>
                                                                        <Trash2 className="w-4 h-4" />
                                                                    </button>
                                                                )}
                                                            </FlexItem>
                                                        </Flex>
                                                    </CardHeader>
                                                    <CardBody>
                                                        {/* oralDiet.texture.modifier */}
                                                        <FhirCodeableConcept label="Modifier"
                                                                             context={`oralDiet.texture.${index}.modifier`}
                                                                             options={textureCode}
                                                                             loading={loading}
                                                                             disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* oralDiet.texture.foodType */}
                                                        <FhirCodeableConcept label="Food Type"
                                                                             context={`oralDiet.texture.${index}.foodType`}
                                                                             options={modifiedFoodtype}
                                                                             loading={loading}
                                                                             disabled={disabled}/>

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

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

                                        <Spacer margin={spacerMargin}/>

                                        {/* oralDiet.fluidConsistencyType */}
                                        <FhirCodeableConcept label="The required consistency of fluids and liquids provided to the patient"
                                                             context="oralDiet.fluidConsistencyType"
                                                             options={consistencyType}
                                                             loading={loading}
                                                             disabled={disabled}
                                                             multiple={true}/>

                                        <Spacer margin={spacerMargin}/>

                                        {/* oralDiet.instruction */}
                                        <Controller name="oralDiet.instruction"
                                                    control={control}
                                                    disabled={disabled}
                                                    render={({ field }) => (
                                                        <TextareaControl
                                                                         label="Instructions"
                                                                         value={field.value}
                                                                         onChange={field.onChange}
                                                                         placeholder="Instructions or additional information about the oral diet"
                                                                         rows={4}/>
                                                    )}/>

                                        <Spacer margin={spacerMargin}/>

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

                                        {oralDietScheduleFieldArray.fields.length === 0 && (
                                            <>
                                                <Flex>
                                                    <FlexItem>
                                                        {!isPatient && (
                                                            <button type="button"
                                                                    className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                                                    onClick={addOralDietSchedule}
                                                                    disabled={disabled}>
                                                                <PlusCircle className="w-4 h-4" />
                                                                Add Schedule
                                                            </button>
                                                        )}
                                                    </FlexItem>
                                                </Flex>
                                                <Spacer margin="8"/>

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

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

                                        {oralDietScheduleFieldArray.fields.map((field, index) => (
                                            <React.Fragment key={field.id}>
                                                <Card>
                                                    <CardHeader>
                                                        <Flex align="center" justify="space-between">
                                                            <FlexItem>
                                                                <h4>Schedule {index + 1}</h4>
                                                            </FlexItem>
                                                            <FlexItem>
                                                                {/* The WordPress label here read "Remove texture" — a copy-paste mislabel;
                                                                    this removes a SCHEDULE. Corrected during the conversion, because
                                                                    `label` becomes the aria-label and the wrong word would otherwise
                                                                    reach screen readers. */}
                                                                {!isPatient && (
                                                                    <button type="button"
                                                                            className="btn btn-red-ghost"
                                                                            title="Remove schedule"
                                                                            aria-label="Remove schedule"
                                                                            onClick={() => removeOralDietSchedule(index)}
                                                                            disabled={disabled}>
                                                                        <Trash2 className="w-4 h-4" />
                                                                    </button>
                                                                )}
                                                            </FlexItem>
                                                        </Flex>
                                                    </CardHeader>
                                                    <CardBody>
                                                        <Spacer margin={spacerMargin}/>

                                                        {/* oralDiet.schedule */}
                                                        <FhirTiming context={`oralDiet.schedule.${index}`}
                                                                    disabled={disabled}/>

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

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

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

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

                                        {supplementFieldArray.fields.length === 0 && (
                                            <>
                                                <Flex>
                                                    <FlexItem>
                                                        {!isPatient && (
                                                            <button type="button"
                                                                    className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                                                    onClick={addSupplement}
                                                                    disabled={disabled}>
                                                                <PlusCircle className="w-4 h-4" />
                                                                Add Supplement
                                                            </button>
                                                        )}
                                                    </FlexItem>
                                                </Flex>
                                                <Spacer margin="8"/>

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

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

                                        {supplementFieldArray.fields.map((field, index) => (
                                            <React.Fragment key={field.id}>
                                                <Card>
                                                    <CardHeader>
                                                        <Flex align="center" justify="space-between">
                                                            <FlexItem>
                                                                <h4>Supplement {index + 1}</h4>
                                                            </FlexItem>
                                                            <FlexItem>
                                                                {!isPatient && (
                                                                    <button type="button"
                                                                            className="btn btn-red-ghost"
                                                                            title="Remove supplement"
                                                                            aria-label="Remove supplement"
                                                                            onClick={() => removeSupplement(index)}
                                                                            disabled={disabled}>
                                                                        <Trash2 className="w-4 h-4" />
                                                                    </button>
                                                                )}
                                                            </FlexItem>
                                                        </Flex>
                                                    </CardHeader>
                                                    <CardBody>
                                                        {/* supplement.type */}
                                                        <FhirCodeableConcept label="Type"
                                                                             context={`supplement.${index}.type`}
                                                                             options={supplementType}
                                                                             disabled={disabled}
                                                                             loading={loading}
                                                                             required={true}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* supplement.productName */}
                                                        <Controller key={`supplement.${index}.productName`}
                                                                    name={`supplement.${index}.productName`}
                                                                    control={control}
                                                                    disabled={disabled}
                                                                    render={({ field }) => (
                                                                        <InputControl
                                                                                      {...field}
                                                                                      label="Product Name"
                                                                                      help="	Product or brand name of the nutritional supplement"
                                                                                      placeholder="Name of the product"/>
                                                                    )}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* supplement.quantity */}
                                                        <FhirQuantity label="Amount of the nutritional supplement"
                                                                      context={`supplement.${index}.quantity`}
                                                                      isSimpleQuantity={true}
                                                                      disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* supplement.instruction */}
                                                        <Controller key={`supplement.${index}.instruction`}
                                                                    name={`supplement.${index}.instruction`}
                                                                    control={control}
                                                                    disabled={disabled}
                                                                    render={({ field }) => (
                                                                        <TextareaControl
                                                                                         label="Instructions"
                                                                                         value={field.value}
                                                                                         onChange={field.onChange}
                                                                                         placeholder="Instructions or additional information about the oral supplement"
                                                                                         rows={4}/>
                                                                    )}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* supplement.schedule */}
                                                        <Heading level={5}>Schedule</Heading>
                                                        <Divider margin="1"/>
                                                        <Spacer margin="12px"/>

                                                        <SupplementSchedule index={index}
                                                                            disabled={disabled}
                                                                            readonly={isPatient}/>

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

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

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

                                        {/* enteralFormula.baseFormulaType */}
                                        <FhirCodeableConcept label="Type of enteral or infant formula"
                                                             context="enteralFormula.baseFormulaType"
                                                             options={entformulaType}
                                                             loading={loading}
                                                             disabled={disabled}/>

                                        <Spacer margin={spacerMargin}/>

                                        {/* enteralFormula.baseFormulaProductName */}
                                        <Controller key="enteralFormula.baseFormulaProductName"
                                                    name="enteralFormula.baseFormulaProductName"
                                                    control={control}
                                                    disabled={disabled}
                                                    render={({ field }) => (
                                                        <InputControl
                                                                      {...field}
                                                                      label="Base Formula Product Name"
                                                                      help="Product or brand name of the enteral or infant formula"
                                                                      placeholder="Name of the base formula product"/>
                                                    )}/>

                                        <Spacer margin={spacerMargin}/>

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

                                        {/* enteralFormula.additiveType */}
                                        <FhirCodeableConcept label="Type of modular component to add to the feeding"
                                                             context="enteralFormula.additiveType"
                                                             options={entformulaAdditive}
                                                             loading={loading}
                                                             disabled={disabled}/>

                                        <Spacer margin={spacerMargin}/>

                                        {/* enteralFormula.additiveProductName */}
                                        <Controller key="enteralFormula.additiveProductName"
                                                    name="enteralFormula.additiveProductName"
                                                    control={control}
                                                    disabled={disabled}
                                                    render={({ field }) => (
                                                        <InputControl
                                                                      {...field}
                                                                      label="Additive Product Name"
                                                                      help="Product or brand name of the modular additive"
                                                                      placeholder="Name of the additive product"/>
                                                    )}/>

                                        <Spacer margin={spacerMargin}/>

                                        {/* enteralFormula.caloricDensity */}
                                        <FhirQuantity label="Caloric Density"
                                                      context={`enteralFormula.caloricDensity`}
                                                      isSimpleQuantity={true}
                                                      disabled={disabled}/>

                                        <Spacer margin={spacerMargin}/>

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

                                        {/* enteralFormula.routeofAdministration */}
                                        <FhirCodeableConcept label="How the formula should enter the patient's gastrointestinal tract"
                                                             context="enteralFormula.routeofAdministration"
                                                             options={enteralRoute}
                                                             loading={loading}
                                                             disabled={disabled}/>

                                        <Spacer margin={spacerMargin}/>

                                        {/* enteralFormula.maxVolumeToDeliver */}
                                        <FhirQuantity label="Upper limit on formula volume per unit of time"
                                                      context={`enteralFormula.maxVolumeToDeliver`}
                                                      isSimpleQuantity={true}
                                                      disabled={disabled}/>

                                        <Spacer margin={spacerMargin}/>

                                        <Heading level={5}>Administration Instructions</Heading>
                                        <Divider margin="2"/>
                                        <Spacer margin={spacerMargin}/>

                                        {/* enteralFormula.administrationInstruction */}
                                        <Controller key="enteralFormula.administrationInstruction"
                                                    name="enteralFormula.administrationInstruction"
                                                    control={control}
                                                    disabled={disabled}
                                                    render={({ field }) => (
                                                        <TextareaControl
                                                                         label="Administration Instructions"
                                                                         value={field.value}
                                                                         onChange={field.onChange}
                                                                         placeholder="Formula feeding instructions expressed as text"
                                                                         rows={4}/>
                                                    )}/>

                                        <Spacer margin={spacerMargin}/>

                                        <Heading level={5}>Administration Details</Heading>
                                        <Divider margin="2"/>
                                        <Spacer margin={spacerMargin}/>

                                        {enteralFormulaAdministrationFieldArray.fields.length === 0 && (
                                            <>
                                                <Flex>
                                                    <FlexItem>
                                                        {!isPatient && (
                                                            <button type="button"
                                                                    className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                                                    onClick={addEnteralFormulaAdministration}
                                                                    disabled={disabled}>
                                                                <PlusCircle className="w-4 h-4" />
                                                                Add Administration
                                                            </button>
                                                        )}
                                                    </FlexItem>
                                                </Flex>
                                                <Spacer margin="8"/>

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

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

                                        {enteralFormulaAdministrationFieldArray.fields.map((field, index) => (
                                            <React.Fragment key={field.id}>
                                                <Card>
                                                    <CardHeader>
                                                        <Flex align="center" justify="space-between">
                                                            <FlexItem>
                                                                <h4>Administration {index + 1}</h4>
                                                            </FlexItem>
                                                            <FlexItem>
                                                                {!isPatient && (
                                                                    <button type="button"
                                                                            className="btn btn-red-ghost"
                                                                            title="Remove administration"
                                                                            aria-label="Remove administration"
                                                                            onClick={() => removeEnteralFormulaAdministration(index)}
                                                                            disabled={disabled}>
                                                                        <Trash2 className="w-4 h-4" />
                                                                    </button>
                                                                )}
                                                            </FlexItem>
                                                        </Flex>
                                                    </CardHeader>
                                                    <CardBody>
                                                        {/* enteralFormula.administration.schedule */}
                                                        <FhirTiming label="Schedule"
                                                                    context={`enteralFormula.administration.${index}.schedule`}
                                                                    disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* enteralFormula.administration.quantity */}
                                                        <FhirQuantity label="The volume of formula to provide"
                                                                      context={`enteralFormula.administration.${index}.quantity`}
                                                                      isSimpleQuantity={true}
                                                                      disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* occurrence */}
                                                        <TypeSelector label="Speed with which the formula is provided per period of time"
                                                                      context={`enteralFormula.administration.${index}.rate`}
                                                                      options={[
                                                                          { name: 'Quantity', key: 'quantity' },
                                                                          { name: 'Ratio', key: 'ratio' }
                                                                      ]}
                                                                      required={false}
                                                                      disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {watch(`enteralFormula.administration.${index}.rate`) === 'quantity' && (
                                                            <>
                                                                {/* enteralFormula.administration.rateQuantity */}
                                                                <FhirQuantity label="Rate Quantity"
                                                                              context={`enteralFormula.administration.${index}.rateQuantity`}
                                                                              isSimpleQuantity={true}
                                                                              disabled={disabled}/>

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

                                                        {watch(`enteralFormula.administration.${index}.rate`) === 'ratio' && (
                                                            <>
                                                                {/* enteralFormula.administration.rateRatio */}
                                                                <FhirRatio label="Rate Ratio"
                                                                           context={`enteralFormula.administration.${index}.rateRatio`}
                                                                           disabled={disabled}/>

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

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

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

                                        {/* foodPreferenceModifier */}
                                        <FhirCodeableConcept label="Order-specific modifier about the type of food that should be given"
                                                             context="foodPreferenceModifier"
                                                             options={encounterDiet}
                                                             disabled={disabled}
                                                             loading={loading}
                                                             multiple={true}
                                                             required={false}/>

                                        <Spacer margin={spacerMargin}/>

                                        {/* excludeFoodModifier */}
                                        <FhirValueSetSearch label="Order-specific modifier about the type of food that should NOT be given"
                                                            context="excludeFoodModifier"
                                                            valueSetUrl={valueSetUrls.foodType}
                                                            multiple={true}
                                                            placeholder="Search for foods..."
                                                            disabled={disabled}/>

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

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

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

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

export default FhirNutritionOrder;