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 { useFormContext, Controller, useFieldArray } from 'react-hook-form';
import { IValueSet, useValueSetServiceContext } from '../../services';
import {
    FhirAnnotation,
    FhirCode,
    FhirPeriod,
    FhirReference,
    FhirReferenceCollection,
    FhirTiming,
    FhirValueSetSearch,
    TypeSelector
} from '../../components';
import {
    useFhirConditions,
    useFhirDevices,
    useFhirDeviceUseStatementBroadcast,
    useFhirDeviceUseStatements,
    useFhirObservations,
    useFhirProcedures
} from '../../hooks';
import { FhirResource } from 'fhir/r4';

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

export const FhirDeviceUseStatement: React.FC<FhirDeviceUseStatementProps> = ({ elevated = true, disabled = false, enableInlineActions = true }) => {
    const { control, watch } = useFormContext();
    const { fetchValueSet, valueSetUrls } = useValueSetServiceContext();

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

    // value sets
    const [deviceStatementStatus, setDeviceStatementStatus] = useState<IValueSet[]>([]);

    const spacerMargin = '24px';

    useFhirDeviceUseStatements();
    useFhirDeviceUseStatementBroadcast();
    const { devicesList } = useFhirDevices();
    const { conditionsList } = useFhirConditions();
    const { observationsList } = useFhirObservations();
    const { proceduresList } = useFhirProcedures();

    const timingType = watch('timingType');
    const reasonReferenceFieldArray = useFieldArray({ control, name: 'reasonReference' });
    const derivedFromFieldArray = useFieldArray({ control, name: 'derivedFrom' });

    useEffect(() => {
        const loadValueSets = async () => {
            setLoading(true);
            try {
                const [deviceStatementStatusValueSet] = await Promise.all([fetchValueSet(valueSetUrls.deviceStatementStatus)]);

                setDeviceStatementStatus(deviceStatementStatusValueSet);
            } 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>
            <CardBody>
                {/* device */}
                <FhirReference label='Reference to device used'
                               context={`device`}
                               referenceType='Device'
                               referenceList={devicesList}
                               enableInlineActions={enableInlineActions}
                               required={true}
                               disabled={disabled}/>

                <Spacer margin={spacerMargin}/>

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

                <Spacer margin={spacerMargin}/>

                {/* bodySite */}
                <FhirValueSetSearch label="Target body site"
                                    context="bodySite"
                                    valueSetUrl={valueSetUrls.bodySite}
                                    multiple={false}
                                    placeholder="Search for body sites..."
                                    required={false}
                                    disabled={disabled}/>

                <Spacer margin={spacerMargin}/>

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

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

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

                <Spacer margin={spacerMargin}/>

                {timingType === 'dateTime' && (
                    <>
                        {/* timingDateTime */}
                        <Controller key="timingDateTime"
                                    name="timingDateTime"
                                    control={control}
                                    disabled={disabled}
                                    render={({ field }) => (
                                        <InputControl
                                                      {...field}
                                                      label="Date Used"
                                                      type="datetime-local"/>
                                    )}/>

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

                {timingType === 'period' && (
                    <>
                        {/* timingPeriod */}
                        <FhirPeriod label="Usage Period"
                                    context="timingPeriod"
                                    disabled={disabled}/>

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

                {timingType === 'timing' && (
                    <>
                        {/* timingTiming */}
                        <FhirTiming context="timingTiming"
                                    disabled={disabled}/>

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

                                    {/* reasonCode */}
                                    <FhirValueSetSearch label="Why device was used"
                                                        context="reasonCode"
                                                        valueSetUrl={valueSetUrls.clinicalFindings}
                                                        placeholder="Search for reasons..."
                                                        multiple={true}
                                                        disabled={disabled}/>

                                    <Spacer margin={spacerMargin}/>

                                    {/* reasonReference */}
                                    <FhirReferenceCollection label="Reason References"
                                                             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}
                                                             enableInlineActions={enableInlineActions}/>

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

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

                                    <FhirReferenceCollection label="Supporting Information"
                                                             references={derivedFromFieldArray}
                                                             context="derivedFrom"
                                                             referenceTypes={[
                                                                 { name: 'Procedure', key: 'Procedure' }
                                                             ]}
                                                             getReferenceList={(referenceType: string): FhirResource[] => {
                                                                 switch (referenceType) {
                                                                     case 'Procedure':
                                                                         return proceduresList;
                                                                     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="Addition details (comments, instructions)"
                                                    context={`note`}
                                                    disabled={disabled}/>

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

export default FhirDeviceUseStatement;