import React, { useState, useEffect } from 'react';
import { TextareaControl } from "../ui/textarea-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 { Heading } from '../ui/heading';
import { Spacer } from '../ui/spacer';
import { Disabled } from '../ui/disabled';
import { useFormContext, Controller } from 'react-hook-form';
import {
    IValueSet,
    useAuthServiceContext,
    useValueSetServiceContext
} from '../../services';
import {
    FhirCode,
    FhirCodeableConcept,
    FhirReference
} from '../../components';
import {
    useFhirImmunizationEvaluationBroadcast,
    useFhirImmunizationEvaluations,
    useFhirImmunizations
} from '../../hooks';

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

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

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

    // value sets
    const [immunizationEvaluationStatus, setImmunizationEvaluationStatus] = useState<IValueSet[]>([]);
    const [immunizationEvaluationTargetDisease, setImmunizationEvaluationTargetDisease] = useState<IValueSet[]>([]);
    const [immunizationEvaluationDoseStatus, setImmunizationEvaluationDoseStatus] = useState<IValueSet[]>([]);
    const [immunizationEvaluationDoseStatusReason, setImmunizationEvaluationDoseStatusReason] = useState<IValueSet[]>([]);

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

    useFhirImmunizationEvaluations();
    useFhirImmunizationEvaluationBroadcast();
    const { immunizationsList } = useFhirImmunizations();

    useEffect(() => {
        const loadValueSets = async () => {
            setLoading(true);
            try {
                const [
                    immunizationEvaluationStatusValueSet,
                    immunizationEvaluationTargetDiseaseValueSet,
                    immunizationEvaluationDoseStatusValueSet,
                    immunizationEvaluationDoseStatusReasonValueSet
                ] = await Promise.all([
                    fetchValueSet(valueSetUrls.immunizationEvaluationStatus),
                    fetchValueSet(valueSetUrls.immunizationEvaluationTargetDisease),
                    fetchValueSet(valueSetUrls.immunizationEvaluationDoseStatus),
                    fetchValueSet(valueSetUrls.immunizationEvaluationDoseStatusReason)
                ]);

                setImmunizationEvaluationStatus(immunizationEvaluationStatusValueSet);
                setImmunizationEvaluationTargetDisease(immunizationEvaluationTargetDiseaseValueSet);
                setImmunizationEvaluationDoseStatus(immunizationEvaluationDoseStatusValueSet);
                setImmunizationEvaluationDoseStatusReason(immunizationEvaluationDoseStatusReasonValueSet);
            } 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>
                    {/* immunizationEvent */}
                    <FhirReference label='Immunization being evaluated'
                                   context={`immunizationEvent`}
                                   referenceType='Immunization'
                                   referenceList={immunizationsList}
                                   required={true}
                                   disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* targetDisease */}
                    <FhirCodeableConcept label="Evaluation target disease"
                                         context="targetDisease"
                                         options={immunizationEvaluationTargetDisease}
                                         combobox={true}
                                         required={true}
                                         loading={loading}
                                         disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

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

                    <Spacer margin={spacerMargin}/>

                    {/* doseStatus */}
                    <FhirCodeableConcept label="Status of the dose relative to published recommendations"
                                         context="doseStatus"
                                         options={immunizationEvaluationDoseStatus}
                                         required={true}
                                         loading={loading}
                                         disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* doseStatusReason */}
                    <FhirCodeableConcept label="Reason for the dose status"
                                         context="doseStatusReason"
                                         options={immunizationEvaluationDoseStatusReason}
                                         multiple={true}
                                         loading={loading}
                                         disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* date */}
                    <Controller key="date"
                                name="date"
                                control={control}
                                render={({ field }) => (
                                    <InputControl
                                                  {...field}
                                                  label="Date evaluation was performed"
                                                  type="datetime-local"/>
                                )}/>

                    <Spacer margin={spacerMargin}/>
                </CardBody>
            </Disabled>
            <CardDivider/>
            <Disabled isDisabled={isPatient}>
                <CardBody>
                    <Spacer margin={spacerMargin}/>
                    <Heading level={5}>Details</Heading>
                    <Divider margin="2"/>
                    <Spacer margin="8"/>

                    {/* description */}
                    <Controller key="description"
                                name="description"
                                control={control}
                                disabled={disabled}
                                render={({ field }) => (
                                    <TextareaControl
                                                     label="Evaluation notes"
                                                     value={field.value}
                                                     onChange={field.onChange}
                                                     placeholder="Description"
                                                     rows={4}/>
                                )}/>

                    <Spacer margin={spacerMargin}/>

                    {/* series */}
                    <Controller key="series"
                                name="series"
                                control={control}
                                disabled={disabled}
                                render={({ field }) => (
                                    <InputControl
                                                  {...field}
                                                  label="Name of vaccine series"
                                                  placeholder="Series"/>
                                )}/>

                    <Spacer margin={spacerMargin}/>

                    {/* doseNumberPositiveInt */}
                    <Controller key="doseNumberPositiveInt"
                                name="doseNumberPositiveInt"
                                control={control}
                                disabled={disabled}
                                render={({ field }) => (
                                    <InputControl
                                                  {...field}
                                                  label="Dose number within series"
                                                  type="number"
                                                  min="1"
                                                  placeholder="Dose number"/>
                                )}/>

                    <Spacer margin={spacerMargin}/>

                    {/* seriesDosesPositiveInt */}
                    <Controller key="seriesDosesPositiveInt"
                                name="seriesDosesPositiveInt"
                                control={control}
                                disabled={disabled}
                                render={({ field }) => (
                                    <InputControl
                                                  {...field}
                                                  label="Recommended number of doses for immunity"
                                                  type="number"
                                                  min="1"
                                                  placeholder="Recommended number"
                                                  disabled={disabled}/>
                                )}/>

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

export default FhirImmunizationEvaluation;