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 { 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,
    FhirCodeableConcept,
    FhirDosage,
    FhirPeriod,
    FhirReferenceCollection,
    FhirValueSetSearch,
    TypeSelector
} from '../../components';
import {
    useFhirCarePlans,
    useFhirConditions,
    useFhirEncounters,
    useFhirEpisodesOfCare,
    useFhirMedicationAdministrations,
    useFhirMedicationDispenses,
    useFhirMedicationRequests,
    useFhirMedicationStatementBroadcast,
    useFhirMedicationStatements,
    useFhirObservations,
    useFhirProcedures
} from '../../hooks';
import { FhirResource } from 'fhir/r4';
import { useViewerIsPatient } from '../../hooks/useViewerIsPatient';
import { PatientMedicationStatementFields } from './PatientMedicationStatementFields';

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

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

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

    // value sets
    const [medicationStatementStatus, setMedicationStatementStatus] = useState<IValueSet[]>([]);
    const [reasonMedicationStatusCodes, setReasonMedicationStatusCodes] = useState<IValueSet[]>([]);
    const [medicationStatementCategory, setMedicationStatementCategory] = useState<IValueSet[]>([]);

    const spacerMargin = '24px';

    useFhirMedicationStatementBroadcast();
    const { medicationStatementsList } = useFhirMedicationStatements();
    const { encountersList } = useFhirEncounters();
    const { episodesOfCareList } = useFhirEpisodesOfCare();
    const { conditionsList } = useFhirConditions();
    const { observationsList } = useFhirObservations();
    const { medicationAdministrationsList } = useFhirMedicationAdministrations();
    const { medicationDispensesList } = useFhirMedicationDispenses();
    const { proceduresList } = useFhirProcedures();
    const { medicationRequestsList } = useFhirMedicationRequests();
    const { carePlansList } = useFhirCarePlans();

    const effectiveType = watch('effectiveType');
    const status = watch('status');
    const contextFieldArray = useFieldArray({ control, name: 'context' });
    const partOfFieldArray = useFieldArray({ control, name: 'partOf' });
    const basedOnFieldArray = useFieldArray({ control, name: 'basedOn' });
    const reasonReferenceFieldArray = useFieldArray({ control, name: 'reasonReference' });

    useEffect(() => {
        const loadValueSets = async () => {
            setLoading(true);
            try {
                const [
                    medicationStatementStatusValueSet,
                    reasonMedicationStatusCodesValueSet,
                    medicationStatementCategoryValueSet
                ] = await Promise.all([
                    fetchValueSet(valueSetUrls.medicationStatementStatus),
                    fetchValueSet(valueSetUrls.reasonMedicationStatusCodes),
                    fetchValueSet(valueSetUrls.medicationStatementCategory)
                ]);

                setMedicationStatementStatus(medicationStatementStatusValueSet);
                setReasonMedicationStatusCodes(reasonMedicationStatusCodesValueSet);
                setMedicationStatementCategory(medicationStatementCategoryValueSet);
            } catch (err) {
                console.error('Error loading value sets:', err);
            } finally {
                setLoading(false);
            }
        };

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

    // A patient records a medicine they take in plain terms; the record's linking fields are for staff.
    if (viewerIsPatient) {
        return (
            <Card style={elevated ? { boxShadow: 'none' } : {}}>
                {elevated && <Elevation value={5}/>}
                <CardHeader>
                    <Heading level={5}>Details</Heading>
                </CardHeader>
                <CardBody>
                    <PatientMedicationStatementFields disabled={disabled}/>
                </CardBody>
            </Card>
        );
    }

    return (
        <Card style={elevated ? { boxShadow: 'none' } : {}}>
            {elevated && <Elevation value={5}/>}
            <CardHeader>
                <Heading level={5}>Details</Heading>
            </CardHeader>
            <CardBody>
                {/* medicationCodeableConcept */}
                <FhirValueSetSearch label="What medication was taken"
                                    context="medicationCodeableConcept"
                                    valueSetUrl={valueSetUrls.medicationCodes}
                                    placeholder="Search for medications..."
                                    multiple={false}
                                    required={true}
                                    disabled={disabled}/>

                <Spacer margin={spacerMargin}/>

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

                <Spacer margin={spacerMargin}/>

                {/* statusReason */}
                {status !== 'active' && <>
                    <FhirCodeableConcept label="Reason for current status"
                                         context="statusReason"
                                         options={reasonMedicationStatusCodes}
                                         loading={loading}
                                         disabled={disabled}
                                         multiple={true}/>

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

                {/* category */}
                <FhirCodeableConcept label="Type of medication usage"
                                     context="category"
                                     options={medicationStatementCategory}
                                     loading={loading}
                                     disabled={disabled}/>

                <Spacer margin={spacerMargin}/>

                {/* dateAsserted */}
                <Controller key="dateAsserted"
                            name="dateAsserted"
                            control={control}
                            disabled={disabled}
                            render={({ field }) => (
                                <InputControl
                                              {...field}
                                              label="When the statement was asserted?"
                                              type="datetime-local"/>
                            )}/>

                <Spacer margin={spacerMargin}/>

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

                <Spacer margin={spacerMargin}/>

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

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

                {effectiveType === 'period' && (
                    <>
                        {/* effectivePeriod */}
                        <FhirPeriod label="Effective Period"
                                    context="effectivePeriod"
                                    disabled={disabled} />

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

                {/* context */}
                <FhirReferenceCollection label="Encounter / Episode associated with MedicationStatement"
                                         references={contextFieldArray}
                                         context="context"
                                         referenceTypes={[
                                             { name: 'Encounter', key: 'Encounter' },
                                             { name: 'EpisodeOfCare', key: 'EpisodeOfCare' }
                                         ]}
                                         getReferenceList={(referenceType: string): FhirResource[] => {
                                             switch (referenceType) {
                                                 case 'Encounter':
                                                     return encountersList;
                                                 case 'EpisodeOfCare':
                                                     return episodesOfCareList;
                                                 default:
                                                     return [];
                                             }
                                         }}
                                         required={false}
                                         disabled={disabled}
                                         multiple={false}
                                         enableInlineActions={enableInlineActions}/>

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

                                    {/* reasonCode */}
                                    <FhirValueSetSearch label="Reason for why the medication is being/was taken"
                                                        context="reasonCode"
                                                        valueSetUrl={valueSetUrls.conditionCode}
                                                        placeholder="Search for reasons..."
                                                        multiple={true}
                                                        disabled={disabled}/>

                                    <Spacer margin={spacerMargin}/>

                                    {/* reasonReference */}
                                    <FhirReferenceCollection label="Condition or observation that supports why the medication is being/was taken"
                                                             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>
                            );
                        }

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

                                    {/* dosage */}
                                    <FhirDosage label="Details of how medication is/was taken or should be taken"
                                                context={`dosage`}
                                                disabled={disabled}/>

                                    <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: 'Observation', key: 'Observation' }
                                                             ]}
                                                             getReferenceList={(referenceType: string): FhirResource[] => {
                                                                 switch (referenceType) {
                                                                     case 'MedicationAdministration':
                                                                         return medicationAdministrationsList;
                                                                     case 'MedicationDispense':
                                                                         return medicationDispensesList;
                                                                     case 'MedicationStatement':
                                                                         return medicationStatementsList;
                                                                     case 'Procedure':
                                                                         return proceduresList;
                                                                     case 'Observation':
                                                                         return observationsList;
                                                                     default:
                                                                         return [];
                                                                 }
                                                             }}
                                                             required={false}
                                                             disabled={disabled}
                                                             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: 'MedicationRequest', key: 'MedicationRequest' },
                                                                 { name: 'CarePlan', key: 'CarePlan' }
                                                             ]}
                                                             getReferenceList={(referenceType: string): FhirResource[] => {
                                                                 switch (referenceType) {
                                                                     case 'MedicationRequest':
                                                                         return medicationRequestsList;
                                                                     case 'CarePlan':
                                                                         return carePlansList;
                                                                     default:
                                                                         return [];
                                                                 }
                                                             }}
                                                             required={false}
                                                             disabled={disabled}
                                                             enableInlineActions={enableInlineActions}/>

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

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

                                    {/* note */}
                                    <FhirAnnotation label="Further information about the statement"
                                                    context={`note`}
                                                    disabled={disabled}/>

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

export default FhirMedicationStatement;