import React, { useState, useEffect } from 'react';
import { Card, CardHeader, CardBody, CardDivider } from '../ui/wp-card';
import { Elevation } from '../ui/elevation';
import { InputControl } from '../ui/input-control';
import { Divider } from '../ui/divider';
import { Heading } from '../ui/heading';
import { Spacer } from '../ui/spacer';
import { TabPanel } from '../ui/tab-panel';
import { Disabled } from '../ui/disabled';
import { useFormContext, Controller, useFieldArray } from 'react-hook-form';
import {
    IValueSet,
    useAuthServiceContext,
    useValueSetServiceContext
} from '../../services';
import {
    FhirAnnotation,
    FhirCode,
    FhirPeriod,
    FhirReference,
    FhirReferenceCollection,
    FhirTiming,
    FhirValueSetSearch,
    TypeSelector
} from '../../components';
import {
    useFhirCareTeams,
    useFhirConditions,
    useFhirDeviceRequestBroadcast,
    useFhirDeviceRequests,
    useFhirDevices,
    useFhirEncounters,
    useFhirHealthcareServices,
    useFhirObservations, useFhirPractitioners,
    useFhirRelatedPersons
} from '../../hooks';
import { FhirResource } from 'fhir/r4';

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

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

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

    // value sets
    const [requestStatus, setRequestStatus] = useState<IValueSet[]>([]);
    const [requestIntent, setRequestIntent] = useState<IValueSet[]>([]);
    const [requestPriority, setRequestPriority] = useState<IValueSet[]>([]);

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

    useFhirDeviceRequests();
    useFhirDeviceRequestBroadcast();
    const { practitionersList } = useFhirPractitioners();
    const { conditionsList } = useFhirConditions();
    const { observationsList } = useFhirObservations();
    const { careTeamsList } = useFhirCareTeams();
    const { healthcareServicesList } = useFhirHealthcareServices();
    const { devicesList } = useFhirDevices();
    const { relatedPersonsList } = useFhirRelatedPersons();
    const { encountersList } = useFhirEncounters();

    const supportingInfoFieldArray = useFieldArray({ control, name: 'supportingInfo' });
    const occurrenceType = watch('occurrenceType');
    const reasonReferenceFieldArray = useFieldArray({ control, name: 'reasonReference' });
    const performerFieldArray = useFieldArray({ control, name: 'performer' });

    useEffect(() => {
        const loadValueSets = async () => {
            setLoading(true);
            try {
                const [
                    requestStatusValueSet,
                    requestIntentValueSet,
                    requestPriorityValueSet
                ] = await Promise.all([
                    fetchValueSet(valueSetUrls.requestStatus),
                    fetchValueSet(valueSetUrls.requestIntent),
                    fetchValueSet(valueSetUrls.requestPriority)
                ]);

                setRequestStatus(requestStatusValueSet);
                setRequestIntent(requestIntentValueSet);
                setRequestPriority(requestPriorityValueSet);
            } catch (err) {
                console.error('Error loading value sets:', err);
            } finally {
                setLoading(false);
            }
        };

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

    return (
        <Card style={elevated ? { boxShadow: 'none' } : {}}>
            {elevated && <Elevation value={5}/>}
            <CardHeader>
                <Heading level={5}>Details</Heading>
            </CardHeader>
            <Disabled isDisabled={isPatient}>
                <CardBody>
                    {/* codeCodeableConcept */}
                    <FhirValueSetSearch label="Device requested"
                                        context="codeCodeableConcept"
                                        valueSetUrl={valueSetUrls.deviceKind}
                                        placeholder="Search for devices..."
                                        required={true}
                                        multiple={false}
                                        disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

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

                    <Spacer margin={spacerMargin}/>

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

                    <Spacer margin={spacerMargin}/>

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

                    <Spacer margin={spacerMargin}/>

                    {/* authoredOn */}
                    <Controller key="authoredOn"
                                name="authoredOn"
                                control={control}
                                disabled={disabled}
                                render={({ field }) => (
                                    <InputControl
                                                  {...field}
                                                  label="When recorded"
                                                  type="datetime-local"/>
                                )}/>
                    <Spacer margin={spacerMargin}/>

                    {/* encounter */}
                    <FhirReference label="Encounter motivating request"
                                   context="encounter"
                                   referenceType="Encounter"
                                   referenceList={encountersList}
                                   enableInlineActions={enableInlineActions}
                                   required={false}
                                   disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    <Spacer margin={spacerMargin}/>
                    <Heading level={4}>When is the device needed?</Heading>
                    <Divider margin="2" />
                    <Spacer margin={spacerMargin}/>

                    {/* occurrenceType */}
                    <TypeSelector label="Occurrence Information Type"
                                  context="occurrenceType"
                                  options={[
                                      { name: 'Date', key: 'dateTime' },
                                      { name: 'Period', key: 'period' },
                                      { name: 'Timing', key: 'timing' }
                                  ]}
                                  required={false}
                                  disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {occurrenceType === 'dateTime' && (
                        <>
                            {/* occurrenceDateTime */}
                            <Controller key="occurrenceDateTime"
                                        name="occurrenceDateTime"
                                        control={control}
                                        disabled={disabled}
                                        render={({ field }) => (
                                            <InputControl
                                                          {...field}
                                                          label="Desired time for use"
                                                          type="datetime-local"/>
                                        )}/>
                            <Spacer margin={spacerMargin}/>
                        </>
                    )}

                    {occurrenceType === 'period' && (
                        <>
                            {/* occurrencePeriod */}
                            <FhirPeriod label="Desired schedule for use"
                                        context="occurrencePeriod"
                                        disabled={disabled}
                                        readonly={isPatient}/>
                            <Spacer margin={spacerMargin}/>
                        </>
                    )}

                    {occurrenceType === 'timing' && (
                        <>
                            {/* occurrenceTiming */}
                            <FhirTiming context="occurrenceTiming"
                                        disabled={disabled}/>

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

                                        {/* reasonCode */}
                                        <FhirValueSetSearch label="Reason for request"
                                                            context="reasonCode"
                                                            valueSetUrl={valueSetUrls.conditionCode}
                                                            placeholder="Search for reasons..."
                                                            multiple={true}
                                                            disabled={disabled}/>

                                        <Spacer margin={spacerMargin}/>

                                        {/* reasonReference */}
                                        <FhirReferenceCollection label="Linked Reason for request"
                                                                 references={reasonReferenceFieldArray}
                                                                 context="reasonReference"
                                                                 referenceTypes={[
                                                                     { name: 'Condition', key: 'Condition' },
                                                                     { name: 'Observation', key: 'Observation' }
                                                                 ]}
                                                                 getReferenceList={(referenceType: string): FhirResource[] => {
                                                                     switch (referenceType) {
                                                                         case 'Condition':
                                                                             return conditionsList;
                                                                         case 'Observation':
                                                                             return observationsList;
                                                                         default:
                                                                             return [];
                                                                     }
                                                                 }}
                                                                 required={false}
                                                                 disabled={disabled}
                                                                 readonly={isPatient}
                                                                 enableInlineActions={enableInlineActions}/>

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

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

                                        {/* performerType */}
                                        <FhirValueSetSearch label="Filler role"
                                                            context="performerType"
                                                            valueSetUrl={valueSetUrls.participantRole}
                                                            multiple={false}
                                                            placeholder="Search for roles..."
                                                            required={false}
                                                            disabled={disabled}/>

                                        <Spacer margin={spacerMargin}/>

                                        {/* performer */}
                                        <FhirReferenceCollection label="Requested Filler"
                                                                 references={performerFieldArray}
                                                                 context="performer"
                                                                 referenceTypes={[
                                                                     { name: 'Practitioner', key: 'Practitioner' },
                                                                     { name: 'CareTeam', key: 'CareTeam' },
                                                                     { name: 'HealthcareService', key: 'HealthcareService' },
                                                                     { name: 'Patient', key: 'Patient' },
                                                                     { name: 'Device', key: 'Device' },
                                                                     { name: 'RelatedPerson', key: 'RelatedPerson' }
                                                                 ]}
                                                                 getReferenceList={(referenceType: string): FhirResource[] => {
                                                                     switch (referenceType) {
                                                                         case 'Practitioner':
                                                                             return practitionersList.map(p => p.practitioner);
                                                                         case 'CareTeam':
                                                                             return careTeamsList;
                                                                         case 'HealthcareService':
                                                                             return healthcareServicesList;
                                                                         case 'Device':
                                                                             return devicesList;
                                                                         case 'RelatedPerson':
                                                                             return relatedPersonsList;
                                                                         default:
                                                                             return [];
                                                                     }
                                                                 }}
                                                                 required={false}
                                                                 disabled={disabled}
                                                                 readonly={isPatient}
                                                                 multiple={false}
                                                                 enableInlineActions={enableInlineActions}/>

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

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

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

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

export default FhirDeviceRequest;