import React, { useState, useEffect } from 'react';
import { Card, CardBody, CardDivider } from '../ui/wp-card';
import { InputControl } from '../ui/input-control';
import { Spacer } from '../ui/spacer';
import { TabPanel } from '../ui/tab-panel';
import { useFormContext, useFieldArray, Controller } from 'react-hook-form';
import {
    IValueSet,
    usePatientServiceContext,
    useValueSetServiceContext
} from '../../services';
import {
    FhirAnnotation,
    FhirCode,
    FhirCodeableConcept,
    FhirReference,
    FhirReferenceCollection
} from '../../components';
import {
    useFhirConditions,
    useFhirEncounters,
    useFhirObservations
} from '../../hooks';
import { FhirResource } from 'fhir/r4';

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

export const FhirCommunicationRequest: React.FC<FhirCommunicationRequestProps> = ({ disabled = false, enableInlineActions = false }) => {
    const { control } = useFormContext();
    const { patientState, tempPatientState } = usePatientServiceContext();
    const { fetchValueSet, valueSetUrls } = useValueSetServiceContext();

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

    // value sets
    const [requestStatus, setRequestStatus] = useState<IValueSet[]>([]);
    const [communicationCategory, setCommunicationCategory] = useState<IValueSet[]>([]);
    const [requestPriority, setRequestPriority] = useState<IValueSet[]>([]);
    const [participationMode, setParticipationMode] = useState<IValueSet[]>([]);
    const [actReason, setActReason] = useState<IValueSet[]>([]);

    const spacerMargin = '24px';

    const { encountersList, tempEncountersList } = useFhirEncounters();
    const { conditionsList, tempConditionsList } = useFhirConditions();
    const { observationsList, tempObservationsList } = useFhirObservations();

    const reasonReferenceFieldArray = useFieldArray({ control, name: 'reasonReference' });

    useEffect(() => {
        const loadValueSets = async () => {
            setLoading(true);
            try {
                const [
                    requestStatusValueSet,
                    communicationCategoryValueSet,
                    requestPriorityValueSet,
                    participationModeValueSet,
                    actReasonValueSet
                ] = await Promise.all([
                    fetchValueSet(valueSetUrls.requestStatus),
                    fetchValueSet(valueSetUrls.communicationCategory),
                    fetchValueSet(valueSetUrls.requestPriority),
                    fetchValueSet(valueSetUrls.participationMode),
                    fetchValueSet(valueSetUrls.actReason, false)
                ]);

                setRequestStatus(requestStatusValueSet);
                setCommunicationCategory(communicationCategoryValueSet);
                setRequestPriority(requestPriorityValueSet);
                setParticipationMode(participationModeValueSet);
                setActReason(actReasonValueSet);
            } catch (err) {
                console.error('Error loading value sets:', err);
            } finally {
                setLoading(false);
            }
        };

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

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

                <Spacer margin={spacerMargin}/>

                {/* category */}
                <FhirCodeableConcept label="Message category"
                                     context="category"
                                     options={communicationCategory}
                                     loading={loading}
                                     disabled={disabled}
                                     multiple={true}/>

                <Spacer margin={spacerMargin}/>

                {/* priority */}
                <FhirCode label="Priority"
                          context="priority"
                          options={requestPriority}
                          loading={loading}
                          disabled={disabled}/>

                <Spacer margin={spacerMargin}/>

                {/* medium */}
                <FhirCodeableConcept label="A channel of communication"
                                     context="medium"
                                     options={participationMode}
                                     loading={loading}
                                     disabled={disabled}
                                     multiple={true}/>

                <Spacer margin={spacerMargin}/>

                {/* replaces */}
                <FhirReference label="Request(s) replaced by this request"
                               context="replaces"
                               referenceType="CommunicationRequest"
                               referenceList={[]}
                               enableInlineActions={enableInlineActions}
                               multiple={true}
                               required={false}
                               disabled={disabled}/>

                <Spacer margin={spacerMargin}/>

                {(patientState || tempPatientState) && (
                    <>
                        {/* encounter */}
                        <FhirReference label="Encounter created as part of"
                                       context="encounter"
                                       referenceType="Encounter"
                                       referenceList={patientState ? encountersList : tempPatientState ? tempEncountersList : []}
                                       enableInlineActions={enableInlineActions}
                                       required={false}
                                       disabled={disabled}/>

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

                {/* authoredOn */}
                <Controller key="authoredOn"
                            name="authoredOn"
                            control={control}
                            disabled={true}
                            render={({ field }) => (
                                <InputControl
                                              {...field}
                                              label="When request transitioned to being actionable"
                                              type="datetime-local"/>
                            )}/>
                <Spacer margin={spacerMargin}/>
            </CardBody>

            <CardDivider/>

            <CardBody>
                <TabPanel initialTabName="reason"
                          tabs={[
                              { name: 'reason', title: 'Reason' },
                              { name: 'notes', title: 'Notes' }
                          ]}>
                    {(tab) => {
                        // reason
                        if (tab.name === 'reason') {
                            return (
                                <div style={{ paddingTop: '16px' }}>
                                    <Spacer margin={spacerMargin}/>

                                    {/* reasonCode */}
                                    <FhirCodeableConcept label="Why is communication needed?"
                                                         context="reasonCode"
                                                         options={actReason}
                                                         disabled={disabled}
                                                         loading={loading}
                                                         multiple={true}/>

                                    <Spacer margin={spacerMargin}/>

                                    {(patientState || tempPatientState) && (
                                        <>
                                            {/* reasonReference */}
                                            <FhirReferenceCollection label="Why is communication needed?"
                                                                     references={reasonReferenceFieldArray}
                                                                     context="reasonReference"
                                                                     referenceTypes={[
                                                                         { name: 'Condition', key: 'Condition' },
                                                                         { name: 'Observation', key: 'Observation' }
                                                                     ]}
                                                                     getReferenceList={(referenceType: string): FhirResource[] => {
                                                                         switch (referenceType) {
                                                                             case 'Condition':
                                                                                 return patientState ? conditionsList : tempPatientState ? tempConditionsList : [];
                                                                             case 'Observation':
                                                                                 return patientState ? observationsList : tempPatientState ? tempObservationsList : [];
                                                                             default:
                                                                                 return [];
                                                                         }
                                                                     }}
                                                                     multiple={true}
                                                                     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 made about communication request"
                                                    context={`note`}
                                                    disabled={disabled}/>

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

export default FhirCommunicationRequest;