import React, { useState, useEffect } from 'react';
import { TextareaControl } from "../ui/textarea-control";
import { CustomSelectControl } from "../ui/custom-select-control";
import type { CustomSelectOption } from "../ui/custom-select-control";
import { Card, CardHeader, CardBody, CardDivider } from '../ui/wp-card';
import { Elevation } from '../ui/elevation';
import { InputControl } from '../ui/input-control';
import { Divider } from '../ui/divider';
import { DismissibleAlert } from '../ui/dismissible-alert';
import { Heading } from '../ui/heading';
import { Flex, FlexItem } from '../ui/flex';
import { Spacer } from '../ui/spacer';
import { TabPanel } from '../ui/tab-panel';
import { Disabled } from '../ui/disabled';
import { DropdownMenu, DropdownMenuGroup, DropdownMenuItem } from '../ui/dropdown-menu';
import { useFormContext, Controller, useFieldArray } from 'react-hook-form';
import { IValueSet, useValueSetServiceContext } from '../../services';
import { unitIsMutableFor } from '../../utils/observations/unitIsMutableFor';
import { categoryIsMutableFor } from '../../utils/observations/categoryIsMutableFor';
import {
    FhirAnnotation,
    FhirCode,
    FhirCodeableConcept,
    FhirPeriod,
    FhirQuantity,
    FhirRange,
    FhirRatio,
    FhirReference,
    FhirReferenceCollection,
    FhirTiming,
    FhirValueSetSearch,
    TypeSelector
} from '../../components';
import {
    useFhirCarePlans,
    useFhirCareTeams,
    useFhirDeviceRequests,
    useFhirDevices,
    useFhirEncounters,
    useFhirImmunizationRecommendations,
    useFhirImmunizations,
    useFhirMedicationAdministrations,
    useFhirMedicationDispenses,
    useFhirMedicationRequests,
    useFhirMedicationStatements,
    useFhirNutritionOrders,
    useFhirObservationBroadcast,
    useFhirObservations, useFhirPractitioners,
    useFhirProcedures,
    useFhirRelatedPersons
} from '../../hooks';
import { PlusCircle, Trash2 } from 'lucide-react';
import { ChartBar } from 'lucide-react';
import { FhirResource } from 'fhir/r4';
// - 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 FhirObservationProps {
    isNew: boolean;
    observationProfile: string | undefined;
    onObservationProfileSelect: (observationProfile: string) => void;
    elevated?: boolean;
    disabled?: boolean;
    enableInlineActions?: boolean;
}

export const FhirObservation: React.FC<FhirObservationProps> = ({ isNew, observationProfile, onObservationProfileSelect, elevated = true, disabled = false, enableInlineActions = true }) => {
    const { control, watch, getValues } = useFormContext();
    const { fetchValueSet, valueSetUrls } = useValueSetServiceContext();

    const [loading, setLoading] = useState(false);
    const [showValue, setShowValue] = useState<boolean>(true);
    const [showComponents, setShowComponents] = useState<boolean>(true);
    const [initialTabName, setInitialTabName] = useState<'value' | 'components'>('value');
    const [showObservationCode, setShowObservationCode] = useState<boolean>(false);
    const [isCategoryMutable, setIsCategoryMutable] = useState<boolean>(false);
    const [isQuantityMutable, setIsQuantityMutable] = useState<boolean>(false);
    const [isQuantityRequired, setIsQuantityRequired] = useState<boolean>(false);
    const [observationCodes, setObservationCodes] = useState<IValueSet[] | undefined>([]);
    const [showComponentCode, setShowComponentCode] = useState<boolean>(false);
    const [componentCodes, setComponentCodes] = useState<IValueSet[]>([]);
    const [quantityUnits, setQuantityUnits] = useState<IValueSet[] | undefined>([]);
    const [valueLabel, setValueLabel] = useState<string>('Value');
    const [valueOptions, setValueOptions] = useState<IValueSet[] | undefined>([]);
    const [componentOptions, setComponentOptions] = useState<IValueSet[] | undefined>([]);

    // value sets
    const [observationStatus, setObservationStatus] = useState<IValueSet[]>([]);
    const [observationCategory, setObservationCategory] = useState<IValueSet[]>([]);
    const [dataAbsentReason, setDataAbsentReason] = useState<IValueSet[]>([]);
    const [observationInterpretation, setObservationInterpretation] = useState<IValueSet[]>([]);
    const [referencerangeMeaning, setReferencerangeMeaning] = useState<IValueSet[]>([]);
    const [ucumVitalsCommon, setUcumVitalsCommon] = useState<IValueSet[]>([]);
    const [ucumBodylength, setUcumBodylength] = useState<IValueSet[]>([]);
    const [ucumBodytemp, setUcumBodytemp] = useState<IValueSet[]>([]);
    const [ucumBodyweight, setUcumBodyweight] = useState<IValueSet[]>([]);
    const [usCoreObservationAdiDocumentationOptions, setUsCoreObservationAdiDocumentationOptions] = useState<IValueSet[]>([]);
    const [usCoreClinicalResultObservationCategory, setUsCoreClinicalResultObservationCategory] = useState<IValueSet[]>([]);
    const [usCoreLaboratoryTestCodes, setUsCoreLaboratoryTestCodes] = useState<IValueSet[]>([]);
    const [usCoreObservationOccupationOptions, setUsCoreObservationOccupationOptions] = useState<IValueSet[]>([]);
    const [usCoreObservationPregnancyintentOptions, setUsCoreObservationPregnancyintentOptions] = useState<IValueSet[]>([]);
    const [usCoreObservationPregnancystatusOptions, setUsCoreObservationPregnancystatusOptions] = useState<IValueSet[]>([]);
    const [usCoreScreeningAssessmentObservationCategory, setUsCoreScreeningAssessmentObservationCategory] = useState<IValueSet[]>([]);
    const [usCoreObservationScreeningAssessmentCodes, setUsCoreObservationScreeningAssessmentCodes] = useState<IValueSet[]>([]);
    const [usCoreObservationSexualOrientationOptions, setUsCoreObservationSexualOrientationOptions] = useState<IValueSet[]>([]);
    const [usCoreSimpleObservationCategory, setUsCoreSimpleObservationCategory] = useState<IValueSet[]>([]);
    const [usCoreSmokingstatusCodes, setUsCoreSmokingstatusCodes] = useState<IValueSet[]>([]);
    const [unitsOfMeasureCaseSensitive, setUnitsOfMeasureCaseSensitive] = useState<IValueSet[]>([]);
    const [usCoreSmokingstatusOptions, setUsCoreSmokingstatusOptions] = useState<IValueSet[]>([]);
    const [usCoreVitalSignsCodes, setUsCoreVitalSignsCodes] = useState<IValueSet[]>([]);

    const spacerMargin = '24px';

    useFhirObservations();
    useFhirObservationBroadcast();
    const { practitionersList } = useFhirPractitioners();
    const { devicesList } = useFhirDevices();
    const { encountersList } = useFhirEncounters();
    const { careTeamsList } = useFhirCareTeams();
    const { relatedPersonsList } = useFhirRelatedPersons();
    const { medicationAdministrationsList } = useFhirMedicationAdministrations();
    const { medicationDispensesList } = useFhirMedicationDispenses();
    const { medicationStatementsList } = useFhirMedicationStatements();
    const { proceduresList } = useFhirProcedures();
    const { immunizationsList } = useFhirImmunizations();
    const { carePlansList } = useFhirCarePlans();
    const { deviceRequestsList } = useFhirDeviceRequests();
    const { immunizationRecommendationsList } = useFhirImmunizationRecommendations();
    const { medicationRequestsList } = useFhirMedicationRequests();
    const { nutritionOrdersList } = useFhirNutritionOrders();

    const effectiveType = watch('effectiveType');
    const valueType = watch('valueType');
    const referenceRangeFieldArray = useFieldArray({ control, name: 'referenceRange' });
    const componentFieldArray = useFieldArray({ control, name: 'component' });
    const performerFieldArray = useFieldArray({ control, name: 'performer' });
    const basedOnFieldArray = useFieldArray({ control, name: 'basedOn' });
    const partOfFieldArray = useFieldArray({ control, name: 'partOf' });

    useEffect(() => {
        const loadValueSets = async () => {
            setLoading(true);
            try {
                const [
                    observationStatusValueSet,
                    observationCategoryValueSet,
                    dataAbsentReasonValueSet,
                    observationInterpretationValueSet,
                    referencerangeMeaningValueSet,
                    ucumVitalsCommonValueSet,
                    ucumBodylengthValueSet,
                    ucumBodytempValueSet,
                    ucumBodyweightValueSet,
                    usCoreObservationAdiDocumentationOptionsValueSet,
                    usCoreClinicalResultObservationCategoryValueSet,
                    // usCoreLaboratoryTestCodesValueSet,
                    // usCoreObservationOccupationOptionsValueSet,
                    usCoreObservationPregnancyintentOptionsValueSet,
                    usCoreObservationPregnancystatusOptionsValueSet,
                    // usCoreScreeningAssessmentObservationCategoryValueSet,
                    usCoreObservationScreeningAssessmentCodesValueSet,
                    usCoreObservationSexualOrientationOptionsValueSet,
                    usCoreSimpleObservationCategoryValueSet,
                    usCoreSmokingstatusCodesValueSet,
                    // unitsOfMeasureCaseSensitiveValueSet,
                    usCoreSmokingstatusOptionsValueSet,
                    usCoreVitalSignsCodesValueSet
                ] = await Promise.all([
                    fetchValueSet(valueSetUrls.observationStatus),
                    fetchValueSet(valueSetUrls.observationCategory),
                    fetchValueSet(valueSetUrls.dataAbsentReason),
                    fetchValueSet(valueSetUrls.observationInterpretation),
                    fetchValueSet(valueSetUrls.referencerangeMeaning),
                    fetchValueSet(valueSetUrls.ucumVitalsCommon),
                    fetchValueSet(valueSetUrls.ucumBodylength),
                    fetchValueSet(valueSetUrls.ucumBodytemp),
                    fetchValueSet(valueSetUrls.ucumBodyweight),
                    fetchValueSet(valueSetUrls.usCoreObservationAdiDocumentationOptions),
                    fetchValueSet(valueSetUrls.usCoreClinicalResultObservationCategory),
                    // fetchValueSet(valueSetUrls.usCoreLaboratoryTestCodes),
                    // fetchValueSet(valueSetUrls.usCoreObservationOccupationOptions2),
                    fetchValueSet(valueSetUrls.usCoreObservationPregnancyintentOptions),
                    fetchValueSet(valueSetUrls.usCoreObservationPregnancystatusOptions),
                    // fetchValueSet(valueSetUrls.usCoreScreeningAssessmentObservationCategory),
                    fetchValueSet(valueSetUrls.usCoreObservationScreeningAssessmentCodes),
                    fetchValueSet(valueSetUrls.usCoreObservationSexualOrientationOptions),
                    fetchValueSet(valueSetUrls.usCoreSimpleObservationCategory),
                    fetchValueSet(valueSetUrls.usCoreSmokingstatusCodes),
                    // fetchValueSet(valueSetUrls.unitsOfMeasureCaseSensitive),
                    fetchValueSet(valueSetUrls.usCoreSmokingstatusOptions),
                    fetchValueSet(valueSetUrls.usCoreVitalSignsCodes)
                ]);

                setObservationStatus(observationStatusValueSet);
                setObservationCategory(observationCategoryValueSet);
                setDataAbsentReason(dataAbsentReasonValueSet);
                setObservationInterpretation(observationInterpretationValueSet);
                setReferencerangeMeaning(referencerangeMeaningValueSet);
                setUcumVitalsCommon(ucumVitalsCommonValueSet);
                setUcumBodylength(ucumBodylengthValueSet);
                setUcumBodytemp(ucumBodytempValueSet);
                setUcumBodyweight(ucumBodyweightValueSet);
                setUsCoreObservationAdiDocumentationOptions(usCoreObservationAdiDocumentationOptionsValueSet);
                setUsCoreClinicalResultObservationCategory(usCoreClinicalResultObservationCategoryValueSet);
                // setUsCoreLaboratoryTestCodes(usCoreLaboratoryTestCodesValueSet);
                // setUsCoreObservationOccupationOptions(usCoreObservationOccupationOptionsValueSet);
                setUsCoreObservationPregnancyintentOptions(usCoreObservationPregnancyintentOptionsValueSet);
                setUsCoreObservationPregnancystatusOptions(usCoreObservationPregnancystatusOptionsValueSet);
                // setUsCoreScreeningAssessmentObservationCategory(usCoreScreeningAssessmentObservationCategoryValueSet);
                setUsCoreObservationScreeningAssessmentCodes(usCoreObservationScreeningAssessmentCodesValueSet);
                setUsCoreObservationSexualOrientationOptions(usCoreObservationSexualOrientationOptionsValueSet);
                setUsCoreSimpleObservationCategory(usCoreSimpleObservationCategoryValueSet);
                setUsCoreSmokingstatusCodes(usCoreSmokingstatusCodesValueSet);
                // setUnitsOfMeasureCaseSensitive(unitsOfMeasureCaseSensitiveValueSet);
                setUsCoreSmokingstatusOptions(usCoreSmokingstatusOptionsValueSet);
                setUsCoreVitalSignsCodes(usCoreVitalSignsCodesValueSet);
            } catch (err) {
                console.error('Error loading value sets:', err);
            } finally {
                setLoading(false);
            }
        };

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

    useEffect(() => {
        // One statement rather than a setter in each of twenty-four branches, which is how the
        // chain lost it twice. The rule is a table now, and it has a test.
        setIsQuantityMutable(unitIsMutableFor(observationProfile));
        setIsCategoryMutable(categoryIsMutableFor(observationProfile));
        // Every flag below is set back to the value it was declared with, so a branch only has to name
        // what it changes. Without this a branch that sets three of the eight keeps the other five from
        // whichever profile rendered last, and a profile with no branch at all keeps all eight.
        setInitialTabName('value');
        setValueLabel('Value');
        setShowValue(true);
        setShowComponents(true);
        setShowObservationCode(false);
        setIsQuantityRequired(false);
        setQuantityUnits([]);
        setShowComponentCode(false);
        setObservationCodes([]);
        setValueOptions([]);
        setComponentOptions([]);
        if (observationProfile === 'us-core-average-blood-pressure') {
            // us-core-average-blood-pressure
            setInitialTabName('components');
            setShowValue(false);
            setShowComponents(true);
            setIsQuantityRequired(true);
            setShowObservationCode(false);
            setQuantityUnits(undefined);
            setShowComponentCode(false);
        } else if (observationProfile === 'us-core-care-experience-preference') {
            // us-core-care-experience-preference
            setInitialTabName('value');
            setValueLabel('Care experience preference');
            setShowValue(true);
            setShowComponents(false);
            setIsQuantityRequired(true);
            setShowObservationCode(false);
            setQuantityUnits(undefined);
            setShowComponentCode(false);
        } else if (observationProfile === 'us-core-observation-adi-documentation') {
            // us-core-observation-adi-documentation
            setInitialTabName('value');
            setValueLabel('Advance healthcare directive completed');
            setShowValue(true);
            setShowComponents(false);
            setIsQuantityRequired(true);
            setShowObservationCode(false);
            setQuantityUnits(undefined);
            setShowComponentCode(false);
            setValueOptions(usCoreObservationAdiDocumentationOptions);
        } else if (observationProfile === 'us-core-observation-lab') {
            // us-core-observation-lab
            setInitialTabName('value');
            setValueLabel('Result Value');
            setShowValue(true);
            setShowComponents(false);
            setIsQuantityRequired(true);
            setShowObservationCode(true);
            setQuantityUnits(undefined);
            setShowComponentCode(true);
            setValueOptions(undefined);
        } else if (observationProfile === 'us-core-observation-occupation') {
            // us-core-observation-occupation
            setInitialTabName('components');
            setValueLabel('History of Occupation')
            setShowValue(true);
            setShowComponents(true);
            setIsQuantityRequired(false);
            setShowObservationCode(false);
            setQuantityUnits(undefined);
            setShowComponentCode(false);
            setValueOptions(undefined);
            setComponentOptions(undefined);
        } else if (observationProfile === 'us-core-observation-pregnancyintent') {
            // us-core-observation-pregnancyintent
            setInitialTabName('value');
            setValueLabel('Pregnancy intention in the next year - Reported');
            setShowValue(true);
            setShowComponents(false);
            setIsQuantityRequired(false);
            setShowObservationCode(false);
            setQuantityUnits(undefined);
            setShowComponentCode(false);
            setValueOptions(usCoreObservationPregnancyintentOptions);
        } else if (observationProfile === 'us-core-observation-pregnancystatus') {
            // us-core-observation-pregnancystatus
            setInitialTabName('value');
            setValueLabel('Pregnancy status');
            setShowValue(true);
            setShowComponents(false);
            setIsQuantityRequired(false);
            setShowObservationCode(false);
            setQuantityUnits(undefined);
            setShowComponentCode(false);
            setValueOptions(usCoreObservationPregnancystatusOptions);
        } else if (observationProfile === 'us-core-observation-screening-assessment') {
            // us-core-observation-screening-assessment
            setInitialTabName('value');
            setValueLabel('Actual result');
            setShowValue(true);
            setShowComponents(false);
            setIsQuantityRequired(true);
            setShowObservationCode(true);
            setObservationCodes(undefined);
            setQuantityUnits(undefined);
            setShowComponentCode(false);
            setValueOptions(undefined);
        } else if (observationProfile === 'us-core-observation-sexual-orientation') {
            // us-core-observation-sexual-orientation
            setInitialTabName('value');
            setValueLabel('Sexual orientation');
            setShowValue(true);
            setShowComponents(false);
            setShowObservationCode(false);
            setIsQuantityRequired(false);
            setQuantityUnits(undefined);
            setShowComponentCode(false);
            setValueOptions(usCoreObservationSexualOrientationOptions);
        } else if (observationProfile === 'us-core-smokingstatus') {
            // us-core-smokingstatus
            setInitialTabName('value');
            setValueLabel('Smoking Status');
            setShowValue(true);
            setShowComponents(false);
            setIsQuantityRequired(false);
            setShowObservationCode(true);
            setObservationCodes(usCoreSmokingstatusCodes);
            setQuantityUnits(undefined);
            setShowComponentCode(false);
            setValueOptions(usCoreSmokingstatusOptions);
        } else if (observationProfile === 'us-core-treatment-intervention-preference') {
            // us-core-treatment-intervention-preference
            setInitialTabName('value');
            setValueLabel('Actual result');
            setShowValue(true);
            setShowComponents(false);
            setIsQuantityRequired(true);
            setShowObservationCode(false);
            setObservationCodes(undefined);
            setQuantityUnits(undefined);
            setShowComponentCode(false);
            setValueOptions(undefined);
        } else if (observationProfile === 'us-core-vital-signs') {
            // us-core-vital-signs
            setInitialTabName('value');
            setShowValue(true);
            setShowComponents(true);
            setShowObservationCode(true);
            setQuantityUnits(ucumVitalsCommon);
            setShowComponentCode(true);
        } else if (observationProfile === 'pediatric-bmi-for-age') {
            // pediatric-bmi-for-age
            setInitialTabName('value');
            setValueLabel('Body mass index (BMI) [Percentile] Per age and sex');
            setShowValue(true);
            setShowComponents(false);
            setShowObservationCode(false);
            setIsQuantityRequired(true);
            setQuantityUnits(undefined);
            setShowComponentCode(false);
        } else if (observationProfile === 'pediatric-weight-for-height') {
            // pediatric-weight-for-height
            setInitialTabName('value');
            setValueLabel('Weight-for-length Per age and sex');
            setShowValue(true);
            setShowComponents(false);
            setShowObservationCode(false);
            setIsQuantityRequired(true);
            setQuantityUnits(undefined);
            setShowComponentCode(false);
        } else if (observationProfile === 'us-core-blood-pressure') {
            // us-core-blood-pressure
            setInitialTabName('components');
            setShowValue(false);
            setShowComponents(true);
            setShowObservationCode(false);
            setIsQuantityRequired(true);
            setQuantityUnits(undefined);
            setShowComponentCode(false);
        } else if (observationProfile === 'us-core-bmi') {
            // us-core-bmi
            setInitialTabName('value');
            setValueLabel('Body mass index (BMI) [Ratio]');
            setShowValue(true);
            setShowComponents(false);
            setShowObservationCode(false);
            setIsQuantityRequired(true);
            setQuantityUnits(undefined);
            setShowComponentCode(false);
        } else if (observationProfile === 'us-core-body-height') {
            // us-core-body-height
            setInitialTabName('value');
            setValueLabel('Body height');
            setShowValue(true);
            setShowComponents(false);
            setShowObservationCode(false);
            setIsQuantityRequired(true);
            setQuantityUnits(ucumBodylength);
            setShowComponentCode(false);
        } else if (observationProfile === 'us-core-body-temperature') {
            // us-core-body-temperature
            setInitialTabName('value');
            setValueLabel('Body temperature');
            setShowValue(true);
            setShowComponents(false);
            setShowObservationCode(false);
            setIsQuantityRequired(true);
            setQuantityUnits(ucumBodytemp);
            setShowComponentCode(false);
        } else if (observationProfile === 'us-core-body-weight') {
            // us-core-body-weight
            setInitialTabName('value');
            setValueLabel('Body weight');
            setShowValue(true);
            setShowComponents(false);
            setShowObservationCode(false);
            setIsQuantityRequired(true);
            setQuantityUnits(ucumBodyweight);
            setShowComponentCode(false);
        } else if (observationProfile === 'us-core-head-circumference') {
            // us-core-head-circumference
            setInitialTabName('value');
            setValueLabel('Head Occipital-frontal circumference');
            setShowValue(true);
            setShowComponents(false);
            setShowObservationCode(false);
            setIsQuantityRequired(true);
            setQuantityUnits(ucumBodylength);
            setShowComponentCode(false);
        } else if (observationProfile === 'us-core-heart-rate') {
            // us-core-heart-rate
            setInitialTabName('value');
            setValueLabel('Heart rate');
            setShowValue(true);
            setShowComponents(false);
            setShowObservationCode(false);
            setIsQuantityRequired(true);
            setQuantityUnits(undefined);
            setShowComponentCode(false);
        } else if (observationProfile === 'us-core-pulse-oximetry') {
            // us-core-pulse-oximetry
            setInitialTabName('value');
            setShowValue(true);
            setShowComponents(true);
        } else if (observationProfile === 'us-core-respiratory-rate') {
            // us-core-respiratory-rate
            setInitialTabName('value');
            setValueLabel('Respiratory rate');
            setShowValue(true);
            setShowComponents(false);
            setShowObservationCode(false);
            setIsQuantityRequired(true);
            setQuantityUnits(undefined);
            setShowComponentCode(false);
        } else if (observationProfile === 'head-occipital-frontal-circumference-percentile') {
            // head-occipital-frontal-circumference-percentile
            setInitialTabName('value');
            setValueLabel('Head Occipital-frontal circumference Percentile');
            setShowValue(true);
            setShowComponents(false);
            setIsQuantityRequired(true);
            setShowObservationCode(false);
            setIsQuantityRequired(true);
            setQuantityUnits(undefined);
            setShowComponentCode(false);
        } else {
            // NO PROFILE, AND THAT IS THE ORDINARY CASE: 19 of 4,160 stored observations carry one.
            // Without this branch the chain above simply does not run, isQuantityMutable keeps its
            // initial false, and the Unit box renders disabled and empty - so a result stored with
            // no unit could never be given one. The profile picker is isNew-only, so there is no
            // other way in either. Units stay undefined, which is what makes FhirQuantity offer the
            // UCUM search rather than a published list.
            setQuantityUnits(undefined);
        }
    }, [
        observationProfile,
        usCoreObservationAdiDocumentationOptions,
        usCoreObservationPregnancyintentOptions,
        usCoreObservationPregnancystatusOptions,
        usCoreObservationSexualOrientationOptions,
        usCoreSmokingstatusCodes,
        usCoreSmokingstatusOptions,
        ucumVitalsCommon,
        ucumBodylength,
        ucumBodytemp,
        ucumBodyweight
    ]);

    const addReferenceRange = () => {
        referenceRangeFieldArray.append({
            low: {
                value: 0,
                unit: '',
                system: '',
                code: ''
            },
            high: {
                value: 0,
                unit: '',
                system: '',
                code: ''
            },
            type: null,
            appliesTo: [],
            age: null,
            text: ''
        });
    };

    const removeReferenceRange = (index: number) => {
        referenceRangeFieldArray.remove(index);
    };

    const addComponent = () => {
        componentFieldArray.append({
            code: null,
            valueType: '',
            valueQuantity: {
                value: null,
                unit: '',
                system: '',
                code: ''
            },
            valueCodeableConcept: null,
            valueString: '',
            valueBoolean: false,
            valueInteger: 0,
            valueRange: {
                low: {
                    value: 0
                },
                high: {
                    value: 0
                }
            },
            valueRatio: {
                numerator: {
                    value: 0
                },
                denominator: {
                    value: 0
                }
            },
            valueSampledData: null,
            valueTime: '',
            valueDateTime: '',
            valuePeriod: {
                start: '',
                end: ''
            },
            dataAbsentReason: null,
            interpretation: [],
            referenceRange: []
        });
    };

    const removeComponent = (index: number) => {
        componentFieldArray.remove(index);
    };

    const getSelectedObservationProfile = () => {
        switch (observationProfile) {
            case 'us-core-average-blood-pressure':
                return 'Average Blood Pressure';
            case 'us-core-care-experience-preference':
                return 'Care Experience Preference';
            case 'us-core-observation-adi-documentation':
                return 'Observation ADI Documentation';
            case 'us-core-observation-pregnancyintent':
                return 'Observation Pregnancy Intent';
            case 'us-core-observation-pregnancystatus':
                return 'Observation Pregnancy Status';
            case 'us-core-observation-screening-assessment':
                return 'Observation Screening Assessment';
            case 'us-core-observation-sexual-orientation':
                return 'Observation Sexual Orientation';
            case 'us-core-smokingstatus':
                return 'Smoking Status Observation';
            case 'us-core-treatment-intervention-preference':
                return 'Treatment Intervention Preference';
            case 'pediatric-bmi-for-age':
                return 'Pediatric BMI for Age Observation';
            case 'pediatric-weight-for-height':
                return 'Pediatric Weight for Height Observation';
            case 'us-core-blood-pressure':
                return 'Blood Pressure';
            case 'us-core-bmi':
                return 'BMI';
            case 'us-core-body-height':
                return 'Body Height';
            case 'us-core-body-temperature':
                return 'Body Temperature';
            case 'us-core-body-weight':
                return 'Body Weight';
            case 'us-core-head-circumference':
                return 'Head Circumference';
            case 'us-core-heart-rate':
                return 'Heart Rate';
            case 'us-core-respiratory-rate':
                return 'Respiratory Rate';
            case 'head-occipital-frontal-circumference-percentile':
                return 'Pediatric Head Occipital Frontal Circumference Percentile';
        }

        return '';
    };

    return (
        <Card style={elevated ? { boxShadow: 'none' } : {}}>
            {elevated && <Elevation value={5}/>}
            <CardHeader>
                <Flex>
                    <FlexItem>
                        <Heading level={5}>Details
                            {observationProfile && (`: ${getSelectedObservationProfile()}`)}
                        </Heading>
                    </FlexItem>
                    <FlexItem>
                        {isNew && (
                            <DropdownMenu icon={<ChartBar className="size-4" aria-hidden="true"/>}
                                          text={`${observationProfile ? 'Change' : 'Select'} observation profile`}
                                          label={`${observationProfile ? 'Change' : 'Select'} observation profile`}>
                                        <DropdownMenuGroup label="Observation profiles">
                                            <DropdownMenuItem onSelect={() => onObservationProfileSelect('us-core-average-blood-pressure')}>
                                                Average Blood Pressure
                                            </DropdownMenuItem>
                                            <DropdownMenuItem onSelect={() => onObservationProfileSelect('us-core-care-experience-preference')}>
                                                Care Experience Preference
                                            </DropdownMenuItem>
                                            <DropdownMenuItem onSelect={() => onObservationProfileSelect('us-core-observation-adi-documentation')}>
                                                Observation ADI Documentation
                                            </DropdownMenuItem>
                                            {/*<MenuItem onClick={() => {*/}
                                            {/*    setObservationProfile('us-core-observation-occupation');*/}
                                            {/*    onClose();*/}
                                            {/*}}>*/}
                                            {/*    Observation Occupation*/}
                                            {/*</MenuItem>*/}
                                            <DropdownMenuItem onSelect={() => onObservationProfileSelect('us-core-observation-pregnancyintent')}>
                                                Observation Pregnancy Intent
                                            </DropdownMenuItem>
                                            <DropdownMenuItem onSelect={() => onObservationProfileSelect('us-core-observation-pregnancystatus')}>
                                                Observation Pregnancy Status
                                            </DropdownMenuItem>
                                            <DropdownMenuItem onSelect={() => onObservationProfileSelect('us-core-observation-screening-assessment')}>
                                                Observation Screening Assessment
                                            </DropdownMenuItem>
                                            <DropdownMenuItem onSelect={() => onObservationProfileSelect('us-core-observation-sexual-orientation')}>
                                                Observation Sexual Orientation
                                            </DropdownMenuItem>
                                            {/*<MenuItem onClick={() => {*/}
                                            {/*    setObservationProfile('us-core-simple-observation');*/}
                                            {/*    onClose();*/}
                                            {/*}}>*/}
                                            {/*    Simple Observation*/}
                                            {/*</MenuItem>*/}
                                            <DropdownMenuItem onSelect={() => onObservationProfileSelect('us-core-smokingstatus')}>
                                                Smoking Status Observation
                                            </DropdownMenuItem>
                                            <DropdownMenuItem onSelect={() => onObservationProfileSelect('us-core-treatment-intervention-preference')}>
                                                Treatment Intervention Preference
                                            </DropdownMenuItem>
                                        </DropdownMenuGroup>
                                        {/*<MenuGroup label="Clinical Result">*/}
                                        {/*    <MenuItem onClick={() => {*/}
                                        {/*        setObservationProfile('us-core-observation-lab');*/}
                                        {/*        onClose();*/}
                                        {/*    }}>*/}
                                        {/*        Laboratory Result Observation*/}
                                        {/*    </MenuItem>*/}
                                        {/*</MenuGroup>*/}
                                        <DropdownMenuGroup label="Vital signs">
                                            <DropdownMenuItem onSelect={() => onObservationProfileSelect('pediatric-bmi-for-age')}>
                                                Pediatric BMI for Age Observation
                                            </DropdownMenuItem>
                                            <DropdownMenuItem onSelect={() => onObservationProfileSelect('pediatric-weight-for-height')}>
                                                Pediatric Weight for Height Observation
                                            </DropdownMenuItem>
                                            <DropdownMenuItem onSelect={() => onObservationProfileSelect('us-core-blood-pressure')}>
                                                Blood Pressure
                                            </DropdownMenuItem>
                                            <DropdownMenuItem onSelect={() => onObservationProfileSelect('us-core-bmi')}>
                                                BMI
                                            </DropdownMenuItem>
                                            <DropdownMenuItem onSelect={() => onObservationProfileSelect('us-core-body-height')}>
                                                Body Height
                                            </DropdownMenuItem>
                                            <DropdownMenuItem onSelect={() => onObservationProfileSelect('us-core-body-temperature')}>
                                                Body Temperature
                                            </DropdownMenuItem>
                                            <DropdownMenuItem onSelect={() => onObservationProfileSelect('us-core-body-weight')}>
                                                Body Weight
                                            </DropdownMenuItem>
                                            <DropdownMenuItem onSelect={() => onObservationProfileSelect('us-core-head-circumference')}>
                                                Head Circumference
                                            </DropdownMenuItem>
                                            <DropdownMenuItem onSelect={() => onObservationProfileSelect('us-core-heart-rate')}>
                                                Heart Rate
                                            </DropdownMenuItem>
                                            {/*<MenuItem onClick={() => {*/}
                                            {/*    setObservationProfile('us-core-pulse-oximetry');*/}
                                            {/*    onClose();*/}
                                            {/*}}>*/}
                                            {/*    Pulse Oximetry*/}
                                            {/*</MenuItem>*/}
                                            <DropdownMenuItem onSelect={() => onObservationProfileSelect('us-core-respiratory-rate')}>
                                                Respiratory Rate
                                            </DropdownMenuItem>
                                            <DropdownMenuItem onSelect={() => onObservationProfileSelect('head-occipital-frontal-circumference-percentile')}>
                                                Pediatric Head Occipital Frontal Circumference Percentile
                                            </DropdownMenuItem>
                                            {/*<MenuItem onClick={() => {*/}
                                            {/*    setObservationProfile('us-core-vital-signs');*/}
                                            {/*    onClose();*/}
                                            {/*}}>*/}
                                            {/*    Other Vital Sign*/}
                                            {/*</MenuItem>*/}
                                        </DropdownMenuGroup>
                            </DropdownMenu>
                        )}
                    </FlexItem>
                </Flex>
            </CardHeader>
            {!observationProfile && (
                <CardBody style={{ minHeight: 400 }}>
                    <Spacer margin={spacerMargin}/>

                    <DismissibleAlert status="info">
                        No observation profile selected.
                    </DismissibleAlert>

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

            {(isNew && observationProfile || !isNew) && (
                <>
                    <CardBody>
                        {/* status */}
                        <FhirCode label="Status"
                                  context="status"
                                  options={observationStatus}
                                  required={true}
                                  loading={loading}
                                  disabled={disabled}/>

                        <Spacer margin={spacerMargin}/>

                        {/* code */}
                        {showObservationCode && (
                            <>
                                {observationProfile === 'us-core-observation-lab' ? (
                                    <FhirValueSetSearch label="Laboratory Test Name"
                                                        context="code"
                                                        valueSetUrl={valueSetUrls.usCoreLaboratoryTestCodes}
                                                        placeholder="Search for laboratory test codes..."
                                                        required={true}
                                                        disabled={disabled}
                                                        multiple={false}/>
                                ) : observationProfile === 'us-core-observation-screening-assessment' ? (
                                    <FhirValueSetSearch label="Screening and Assessment Survey Code"
                                                        context="code"
                                                        valueSetUrl={valueSetUrls.usCoreObservationScreeningAssessmentCodes}
                                                        placeholder="Search for observations..."
                                                        required={true}
                                                        disabled={disabled}
                                                        multiple={false}/>
                                ) : (
                                    <FhirCodeableConcept label="Type of observation (code / type)"
                                                         context="code"
                                                         options={observationCodes}
                                                         disabled={disabled}
                                                         loading={loading}
                                                         required={true}/>
                                )}

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

                        <Disabled isDisabled={!isCategoryMutable}>
                            {/* category */}
                            <FhirCodeableConcept label={`Classification of type of observation ${isCategoryMutable ? '' : '(Read Only)'}`}
                                                 context="category"
                                                 options={observationCategory}
                                                 multiple={true}
                                                 required={true}
                                                 loading={loading}
                                                 disabled={disabled}/>
                        </Disabled>

                        <Spacer margin={spacerMargin}/>

                        {/* doseType */}
                        <TypeSelector label="Clinically relevant time/time-period for observation"
                                      context="effectiveType"
                                      options={[
                                          { name: 'Date', key: 'dateTime' },
                                          { name: 'Period', key: 'period' },
                                          { name: 'Timing', key: 'timing' },
                                          // { name: 'Instant', key: 'instant' }
                                      ]}
                                      required={false}
                                      disabled={disabled}/>

                        <Spacer margin={spacerMargin}/>

                        {effectiveType === 'dateTime' && (
                            <>
                                {/* effectiveDateTime */}
                                <Controller key="effectiveDateTime"
                                            name="effectiveDateTime"
                                            control={control}
                                            disabled={disabled}
                                            render={({ field }) => (
                                                <InputControl
                                                              {...field}
                                                              label="Clinically relevant date for observation"
                                                              type="datetime-local"/>
                                            )}/>

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

                        {effectiveType === 'period' && (
                            <>
                                {/* effectivePeriod */}
                                <FhirPeriod label="Clinically relevant period for observation"
                                            context="effectivePeriod"
                                            disabled={disabled}/>

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

                        {effectiveType === 'timing' && (
                            <>
                                {/* effectiveTiming */}
                                <FhirTiming context="effectiveTiming"
                                            disabled={disabled}/>

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

                        {effectiveType === 'instant' && (
                            <>
                                {/* effectiveInstant */}
                                <Controller key="effectiveInstant"
                                            name="effectiveInstant"
                                            control={control}
                                            disabled={disabled}
                                            render={({ field }) => (
                                                <InputControl
                                                              {...field}
                                                              label="Effective Instant"
                                                              type="datetime-local"/>
                                            )}/>

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

                        {/* issued */}
                        <Controller key="issued"
                                    name="issued"
                                    control={control}
                                    disabled={disabled}
                                    render={({ field }) => (
                                        <InputControl
                                                      {...field}
                                                      label="Date/Time this version was made available"
                                                      type="datetime-local"/>
                                    )}/>

                        <Spacer margin={spacerMargin}/>

                        {/* encounter */}
                        <FhirReference label="Healthcare event during which this observation is made"
                                       context="encounter"
                                       referenceType="Encounter"
                                       referenceList={encountersList}
                                       enableInlineActions={enableInlineActions}
                                       required={false}
                                       disabled={disabled}/>

                        <Spacer margin={spacerMargin}/>
                    </CardBody>
                    <CardDivider/>
                    <CardBody>
                        <TabPanel initialTabName={initialTabName}
                                  tabs={[
                                      { name: 'value', title: 'Value', disabled: !showValue },
                                      { name: 'components', title: 'Components', disabled: !showComponents },
                                      // { name: 'referenceRanges', title: 'Reference Ranges' },
                                      { name: 'details', title: 'Details' },
                                      { name: 'performers', title: 'Performers' },
                                      { name: 'basedOn', title: 'Based On' },
                                      { name: 'partOf', title: 'Part Of' },
                                      { name: 'notes', title: 'Notes' }
                                  ]}>
                            {(tab) => {
                                // value
                                if (tab.name === 'value') {
                                    return (
                                        <div style={{ paddingTop: '16px' }}>
                                            <Spacer margin={spacerMargin}/>
                                            {/*<Heading level={5}>Observation Value</Heading>*/}
                                            {/*<Divider margin="2"/>*/}
                                            {/*<Spacer margin={spacerMargin}/>*/}

                                            {/* valueType */}
                                            {!valueType && (
                                                <>
                                                    <Controller key="valueType"
                                                                name="valueType"
                                                                control={control}
                                                                render={({ field }) => (
                                                                    <CustomSelectControl
                                                                                         label="Value Type"
                                                                                         options={[
                                                                                             { name: '', key: null },
                                                                                             { name: 'Quantity', key: 'quantity' },
                                                                                             { name: 'Codeable Concept', key: 'codeableConcept' },
                                                                                             { name: 'String', key: 'string' },
                                                                                             { name: 'Boolean', key: 'boolean' },
                                                                                             { name: 'Integer', key: 'integer' },
                                                                                             { name: 'Range', key: 'range' },
                                                                                             { name: 'Ratio', key: 'ratio' },
                                                                                             { name: 'Time', key: 'time' },
                                                                                             { name: 'DateTime', key: 'dateTime' },
                                                                                             { name: 'Period', key: 'period' }
                                                                                         ]}
                                                                                         value={field.value}
                                                                                         onChange={(newValue: {
                                                                                             selectedItem: CustomSelectOption
                                                                                         }) => {
                                                                                             field.onChange(newValue.selectedItem.key);
                                                                                         }}/>
                                                                )}/>

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

                                            {valueType === 'quantity' && (
                                                <>
                                                    {/* valueQuantity */}
                                                    <FhirQuantity label={valueLabel}
                                                                  context="valueQuantity"
                                                                  isUnitMutable={isQuantityMutable}
                                                                  units={quantityUnits}
                                                                  required={isQuantityRequired}
                                                                  disabled={disabled}/>
                                                    <Spacer margin={spacerMargin}/>
                                                </>
                                            )}

                                            {valueType === 'codeableConcept' && (
                                                <>
                                                    {/* valueCodeableConcept */}
                                                    <FhirCodeableConcept label={valueLabel}
                                                                         context="valueCodeableConcept"
                                                                         options={valueOptions}
                                                                         disabled={disabled}
                                                                         loading={loading}
                                                                         combobox={true}
                                                                         required={true}/>

                                                    <Spacer margin={spacerMargin}/>

                                                    {/*<FhirValueSetSearch label="Value Codeable Concept"*/}
                                                    {/*                    context="valueCodeableConcept"*/}
                                                    {/*                    valueSetUrl={valueSetUrls.observationValues}*/}
                                                    {/*                    placeholder="Search for observation values..."*/}
                                                    {/*                    multiple={false}/>*/}
                                                </>
                                            )}

                                            {valueType === 'string' && (
                                                <>
                                                    <Controller key="valueString"
                                                                name="valueString"
                                                                control={control}
                                                                disabled={disabled}
                                                                render={({ field }) => (
                                                                    <TextareaControl
                                                                                     label="Value String"
                                                                                     value={field.value}
                                                                                     onChange={field.onChange}
                                                                                     rows={3}/>
                                                                )}/>
                                                    <Spacer margin={spacerMargin}/>
                                                </>
                                            )}

                                            {valueType === 'boolean' && (
                                                <>
                                                    <Controller key="valueBoolean"
                                                                name="valueBoolean"
                                                                control={control}
                                                                disabled={disabled}
                                                                render={({ field }) => (
                                                                    <ToggleControl
                                                                                   label="Value Boolean"
                                                                                   checked={field.value}
                                                                                   onChange={field.onChange}/>
                                                                )}/>
                                                    <Spacer margin={spacerMargin}/>
                                                </>
                                            )}

                                            {valueType === 'integer' && (
                                                <>
                                                    <Controller key="valueInteger"
                                                                name="valueInteger"
                                                                control={control}
                                                                disabled={disabled}
                                                                render={({ field }) => (
                                                                    <InputControl
                                                                                  {...field}
                                                                                  label="Value Integer"
                                                                                  type="number"
                                                                                  onChange={(value) => field.onChange(parseInt(value))}/>
                                                                )}/>
                                                    <Spacer margin={spacerMargin}/>
                                                </>
                                            )}

                                            {valueType === 'range' && (
                                                <>
                                                    <FhirRange label="Value Range"
                                                               context="valueRange"
                                                               disabled={disabled}/>
                                                    <Spacer margin={spacerMargin}/>
                                                </>
                                            )}

                                            {valueType === 'ratio' && (
                                                <>
                                                    <FhirRatio label="Value Ratio"
                                                               context="valueRatio"
                                                               disabled={disabled}/>
                                                    <Spacer margin={spacerMargin}/>
                                                </>
                                            )}

                                            {valueType === 'time' && (
                                                <>
                                                    <Controller key="valueTime"
                                                                name="valueTime"
                                                                control={control}
                                                                disabled={disabled}
                                                                render={({ field }) => (
                                                                    <InputControl
                                                                                  {...field}
                                                                                  label="Value Time"
                                                                                  type="time"/>
                                                                )}/>
                                                    <Spacer margin={spacerMargin}/>
                                                </>
                                            )}

                                            {valueType === 'dateTime' && (
                                                <>
                                                    <Controller key="valueDateTime"
                                                                name="valueDateTime"
                                                                control={control}
                                                                disabled={disabled}
                                                                render={({ field }) => (
                                                                    <InputControl
                                                                                  {...field}
                                                                                  label="Value DateTime"
                                                                                  type="datetime-local"/>
                                                                )}/>
                                                    <Spacer margin={spacerMargin}/>
                                                </>
                                            )}

                                            {valueType === 'period' && (
                                                <>
                                                    <FhirPeriod label="Value Period"
                                                                context="valuePeriod"
                                                                disabled={disabled}/>
                                                    <Spacer margin={spacerMargin}/>
                                                </>
                                            )}

                                            {/* dataAbsentReason */}
                                            <FhirCodeableConcept label="Why the result is missing"
                                                                 context="dataAbsentReason"
                                                                 options={dataAbsentReason}
                                                                 loading={loading}
                                                                 disabled={disabled}/>

                                            <Spacer margin={spacerMargin}/>

                                            {/* interpretation */}
                                            <FhirCodeableConcept label="Interpretation"
                                                                 context="interpretation"
                                                                 options={observationInterpretation}
                                                                 disabled={disabled}
                                                                 loading={loading}
                                                                 multiple={true}
                                                                 required={false}/>

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

                                // components
                                if (tab.name === 'components') {
                                    return (
                                        <div style={{ paddingTop: '16px' }}>
                                            {/*<Spacer margin={spacerMargin}/>*/}
                                            {/*<Heading level={5}>Component results</Heading>*/}
                                            {/*<Divider margin="2"/>*/}
                                            <Spacer margin={spacerMargin}/>

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

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

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

                                            {componentFieldArray.fields.map((field, index) => (
                                                <React.Fragment key={field.id}>
                                                    <Card>
                                                        <CardHeader>
                                                            <Flex align="center" justify="space-between">
                                                                <FlexItem>
                                                                    {/*<h4>Component {index + 1}</h4>*/}
                                                                    <h4>{getValues(`component.${index}.code`)?.display}</h4>
                                                                </FlexItem>
                                                                {false && (
                                                                    <FlexItem>
                                                                        <button type="button"
                                                                                className="btn btn-red-ghost"
                                                                                title="Remove component"
                                                                                aria-label="Remove component"
                                                                                onClick={() => removeComponent(index)}
                                                                                disabled={disabled}>
                                                                            <Trash2 className="w-4 h-4" />
                                                                        </button>
                                                                    </FlexItem>
                                                                )}
                                                            </Flex>
                                                        </CardHeader>
                                                        <CardBody>
                                                            <Spacer margin={spacerMargin}/>
                                                            {/*<ItemGroup isBordered isSeparated isRounded size='large'>*/}
                                                            {/*    <Item>*/}
                                                            {/*        <Flex justify='space-between'>*/}
                                                            {/*            <FlexItem>*/}
                                                            {/*                <Heading level={5}>Code:</Heading>*/}
                                                            {/*            </FlexItem>*/}
                                                            {/*            <FlexItem>*/}
                                                            {/*                <Heading level={5}>{getValues(`component.${index}.code`).display}</Heading>*/}
                                                            {/*            </FlexItem>*/}
                                                            {/*        </Flex>*/}
                                                            {/*    </Item>*/}
                                                            {/*</ItemGroup>*/}

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

                                                            {/* code */}
                                                            {showComponentCode && (
                                                                <>
                                                                    <FhirValueSetSearch label="Component Code"
                                                                                        context={`component.${index}.code`}
                                                                                        valueSetUrl={valueSetUrls.usCoreVitalSignsCodes}
                                                                                        placeholder="Search for observation codes..."
                                                                                        disabled={disabled}
                                                                                        required={true}
                                                                                        multiple={false}/>

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

                                                            {/* valueType */}
                                                            {false && (
                                                                <>
                                                                    <Controller key={`component.${index}.valueType`}
                                                                                name={`component.${index}.valueType`}
                                                                                control={control}
                                                                                render={({ field }) => (
                                                                                    <CustomSelectControl
                                                                                        label="Value Type"
                                                                                        options={[
                                                                                            { name: '', key: null },
                                                                                            {
                                                                                                name: 'Quantity',
                                                                                                key: 'quantity'
                                                                                            },
                                                                                            {
                                                                                                name: 'Codeable Concept',
                                                                                                key: 'codeableConcept'
                                                                                            },
                                                                                            {
                                                                                                name: 'String',
                                                                                                key: 'string'
                                                                                            },
                                                                                            {
                                                                                                name: 'Boolean',
                                                                                                key: 'boolean'
                                                                                            },
                                                                                            {
                                                                                                name: 'Integer',
                                                                                                key: 'integer'
                                                                                            },
                                                                                            {
                                                                                                name: 'Range',
                                                                                                key: 'range'
                                                                                            },
                                                                                            {
                                                                                                name: 'Ratio',
                                                                                                key: 'ratio'
                                                                                            },
                                                                                            {
                                                                                                name: 'Time',
                                                                                                key: 'time'
                                                                                            },
                                                                                            {
                                                                                                name: 'DateTime',
                                                                                                key: 'dateTime'
                                                                                            },
                                                                                            {
                                                                                                name: 'Period',
                                                                                                key: 'period'
                                                                                            }
                                                                                        ]}
                                                                                        value={field.value}
                                                                                        onChange={(newValue: {
                                                                                            selectedItem: CustomSelectOption
                                                                                        }) => {
                                                                                            field.onChange(newValue.selectedItem.key);
                                                                                        }}/>
                                                                                )}/>

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

                                                            {watch(`component.${index}.valueType`) === 'quantity' && (
                                                                <>
                                                                    {/* valueQuantity */}
                                                                    <FhirQuantity label="Value Quantity"
                                                                                  context={`component.${index}.valueQuantity`}
                                                                                  isUnitMutable={isQuantityMutable}
                                                                                  units={quantityUnits}
                                                                                  required={isQuantityRequired}
                                                                                  disabled={disabled}/>
                                                                    <Spacer margin={spacerMargin}/>
                                                                </>
                                                            )}

                                                            {watch(`component.${index}.valueType`) === 'codeableConcept' && (
                                                                <>
                                                                    <FhirValueSetSearch label="Value Codeable Concept"
                                                                                        context={`component.${index}.valueCodeableConcept`}
                                                                                        valueSetUrl={valueSetUrls.observationValues}
                                                                                        placeholder="Search for observation values..."
                                                                                        disabled={disabled}
                                                                                        multiple={false}/>
                                                                    <Spacer margin={spacerMargin}/>
                                                                </>
                                                            )}

                                                            {watch(`component.${index}.valueType`) === 'string' && (
                                                                <>
                                                                    <Controller key={`component.${index}.valueString`}
                                                                                name={`component.${index}.valueString`}
                                                                                control={control}
                                                                                disabled={disabled}
                                                                                render={({ field }) => (
                                                                                    <TextareaControl
                                                                                                     label="Value String"
                                                                                                     value={field.value}
                                                                                                     onChange={field.onChange}
                                                                                                     rows={3}/>
                                                                                )}/>
                                                                    <Spacer margin={spacerMargin}/>
                                                                </>
                                                            )}

                                                            {watch(`component.${index}.valueType`) === 'boolean' && (
                                                                <>
                                                                    <Controller key={`component.${index}.valueBoolean`}
                                                                                name={`component.${index}.valueBoolean`}
                                                                                control={control}
                                                                                disabled={disabled}
                                                                                render={({ field }) => (
                                                                                    <ToggleControl
                                                                                                   label="Value Boolean"
                                                                                                   checked={field.value}
                                                                                                   onChange={field.onChange}/>
                                                                                )}/>
                                                                    <Spacer margin={spacerMargin}/>
                                                                </>
                                                            )}

                                                            {watch(`component.${index}.valueType`) === 'integer' && (
                                                                <>
                                                                    <Controller key={`component.${index}.valueInteger`}
                                                                                name={`component.${index}.valueInteger`}
                                                                                control={control}
                                                                                disabled={disabled}
                                                                                render={({ field }) => (
                                                                                    <InputControl
                                                                                                  {...field}
                                                                                                  label="Value Integer"
                                                                                                  type="number"
                                                                                                  onChange={(value) => field.onChange(parseInt(value))}/>
                                                                                )}/>
                                                                    <Spacer margin={spacerMargin}/>
                                                                </>
                                                            )}

                                                            {watch(`component.${index}.valueType`) === 'range' && (
                                                                <>
                                                                    <FhirRange label="Value Range"
                                                                               context={`component.${index}.valueRange`}
                                                                               disabled={disabled}/>
                                                                    <Spacer margin={spacerMargin}/>
                                                                </>
                                                            )}

                                                            {watch(`component.${index}.valueType`) === 'ratio' && (
                                                                <>
                                                                    <FhirRatio label="Value Ratio"
                                                                               context={`component.${index}.valueRatio`}
                                                                               disabled={disabled}/>
                                                                    <Spacer margin={spacerMargin}/>
                                                                </>
                                                            )}

                                                            {/* component.dataAbsentReason */}
                                                            <FhirCodeableConcept label="Why the component result is missing"
                                                                                 context={`component.${index}.dataAbsentReason`}
                                                                                 options={dataAbsentReason}
                                                                                 loading={loading}
                                                                                 disabled={disabled}/>

                                                            <Spacer margin={spacerMargin}/>

                                                            {/* component.interpretation */}
                                                            <FhirCodeableConcept label="Interpretation"
                                                                                 context={`component.${index}.interpretation`}
                                                                                 options={observationInterpretation}
                                                                                 disabled={disabled}
                                                                                 loading={loading}
                                                                                 multiple={true}
                                                                                 required={false}/>

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

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

                                // referenceRanges
                                if (tab.name === 'referenceRanges') {
                                    return (
                                        <div style={{ paddingTop: '16px' }}>
                                            <Heading level={5}>Reference Ranges</Heading>
                                            <Divider margin="2"/>
                                            <Spacer margin={spacerMargin}/>

                                            {referenceRangeFieldArray.fields.length === 0 && (
                                                <>
                                                    <Flex>
                                                        <FlexItem>
                                                            <button type="button"
                                                                    className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                                                    onClick={addReferenceRange}
                                                                    disabled={disabled}>
                                                                <PlusCircle className="w-4 h-4" />
                                                                Add Reference Range
                                                            </button>
                                                        </FlexItem>
                                                    </Flex>
                                                    <Spacer margin="8"/>

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

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

                                            {referenceRangeFieldArray.fields.map((field, index) => (
                                                <React.Fragment key={field.id}>
                                                    <Card>
                                                        <CardHeader>
                                                            <Flex align="center" justify="space-between">
                                                                <FlexItem>
                                                                    <h4>Reference Range {index + 1}</h4>
                                                                </FlexItem>
                                                                <FlexItem>
                                                                    <button type="button"
                                                                            className="btn btn-red-ghost"
                                                                            title="Remove reference range"
                                                                            aria-label="Remove reference range"
                                                                            onClick={() => removeReferenceRange(index)}
                                                                            disabled={disabled}>
                                                                        <Trash2 className="w-4 h-4" />
                                                                    </button>
                                                                </FlexItem>
                                                            </Flex>
                                                        </CardHeader>
                                                        <CardBody>
                                                            {/* low */}
                                                            <FhirQuantity label="Low Value"
                                                                          context={`referenceRange.${index}.low`}
                                                                          disabled={disabled}/>

                                                            <Spacer margin={spacerMargin}/>

                                                            {/* high */}
                                                            <FhirQuantity label="High Value"
                                                                          context={`referenceRange.${index}.high`}
                                                                          disabled={disabled}/>

                                                            <Spacer margin={spacerMargin}/>

                                                            {/* type */}
                                                            <FhirCodeableConcept label="Type"
                                                                                 context={`referenceRange.${index}.type`}
                                                                                 options={referencerangeMeaning}
                                                                                 loading={loading}
                                                                                 disabled={disabled}/>

                                                            <Spacer margin={spacerMargin}/>

                                                            {/* appliesTo */}
                                                            <FhirValueSetSearch label="Reference range population"
                                                                                context={`referenceRange.${index}.appliesTo`}
                                                                                valueSetUrl={valueSetUrls.referencerangeAppliesto}
                                                                                multiple={true}
                                                                                disabled={disabled}
                                                                                placeholder="Search for populations..."
                                                                                required={false}/>

                                                            <Spacer margin={spacerMargin}/>

                                                            {/* text */}
                                                            <Controller key={`referenceRange.${index}.text`}
                                                                        name={`referenceRange.${index}.text`}
                                                                        control={control}
                                                                        disabled={disabled}
                                                                        render={({ field }) => (
                                                                            <TextareaControl
                                                                                             label="Text"
                                                                                             value={field.value}
                                                                                             onChange={field.onChange}
                                                                                             placeholder="Text representation of the reference range"
                                                                                             rows={2}/>
                                                                        )}/>
                                                        </CardBody>
                                                    </Card>
                                                    <Spacer margin={spacerMargin}/>
                                                </React.Fragment>
                                            ))}

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

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

                                // details
                                if (tab.name === 'details') {
                                    return (
                                        <div style={{ paddingTop: '16px' }}>
                                            {/* bodySite */}
                                            <FhirValueSetSearch label="Observed body part"
                                                                context="bodySite"
                                                                valueSetUrl={valueSetUrls.bodySite}
                                                                placeholder="Search for body sites..."
                                                                multiple={false}
                                                                disabled={disabled}/>

                                            <Spacer margin={spacerMargin}/>

                                            {/* method */}
                                            <FhirValueSetSearch label="Method"
                                                                context="method"
                                                                valueSetUrl={valueSetUrls.observationMethods}
                                                                placeholder="Search for methods..."
                                                                multiple={false}
                                                                disabled={disabled}/>

                                            <Spacer margin={spacerMargin}/>

                                            {/* device */}
                                            <FhirReference label="(Measurement) Device"
                                                           context="device"
                                                           referenceType="Device"
                                                           referenceList={devicesList}
                                                           enableInlineActions={enableInlineActions}
                                                           required={false}
                                                           disabled={disabled}/>

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

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

                                            {/* performer */}
                                            <FhirReferenceCollection label="Who is responsible for the observation"
                                                                     references={performerFieldArray}
                                                                     context="performer"
                                                                     referenceTypes={[
                                                                         { name: 'Practitioner', key: 'Practitioner' },
                                                                         { name: 'CareTeam', key: 'CareTeam' },
                                                                         { name: 'Patient', key: 'Patient' },
                                                                         { name: 'RelatedPerson', key: 'RelatedPerson' }
                                                                     ]}
                                                                     getReferenceList={(referenceType: string): FhirResource[] => {
                                                                         switch (referenceType) {
                                                                             case 'Practitioner':
                                                                                 return practitionersList.map(p => p.practitioner);
                                                                             case 'CareTeam':
                                                                                 return careTeamsList;
                                                                             case 'RelatedPerson':
                                                                                 return relatedPersonsList;
                                                                             default:
                                                                                 return [];
                                                                         }
                                                                     }}
                                                                     required={false}
                                                                     disabled={disabled}
                                                                     multiple={true}
                                                                     enableInlineActions={enableInlineActions}/>

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

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

                                            {/* basedOn */}
                                            <FhirReferenceCollection label="Fulfils plan, proposal or order"
                                                                     references={basedOnFieldArray}
                                                                     context="basedOn"
                                                                     referenceTypes={[
                                                                         { name: 'CarePlan', key: 'CarePlan' },
                                                                         { name: 'DeviceRequest', key: 'DeviceRequest' },
                                                                         { name: 'ImmunizationRecommendation', key: 'ImmunizationRecommendation' },
                                                                         { name: 'MedicationRequest', key: 'MedicationRequest' },
                                                                         { name: 'NutritionOrder', key: 'NutritionOrder' },
                                                                     ]}
                                                                     getReferenceList={(referenceType: string): FhirResource[] => {
                                                                         switch (referenceType) {
                                                                             case 'CarePlan':
                                                                                 return carePlansList;
                                                                             case 'DeviceRequest':
                                                                                 return deviceRequestsList;
                                                                             case 'ImmunizationRecommendation':
                                                                                 return immunizationRecommendationsList;
                                                                             case 'MedicationRequest':
                                                                                 return medicationRequestsList;
                                                                             case 'NutritionOrder':
                                                                                 return nutritionOrdersList;
                                                                             default:
                                                                                 return [];
                                                                         }
                                                                     }}
                                                                     required={false}
                                                                     disabled={disabled}
                                                                     enableInlineActions={enableInlineActions}/>

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

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

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

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

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

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

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

export default FhirObservation;