import React, { useCallback, useState, useEffect } from 'react';
import { FormProvider, useForm } from 'react-hook-form';
import { DismissibleAlert } from '../components/ui/dismissible-alert';
import { Flex, FlexItem } from '../components/ui/flex';
import { Spacer } from '../components/ui/spacer';
import { Modal } from '../components/ui/wp-modal-shim';
import { CommunicationRequest, Organization, Patient, Practitioner } from 'fhir/r4';
import { useAuthServiceContext, useCommunicationServiceContext } from '../services';
import { formatFhirHumanName } from '../utils/fhirHumanName.tsx';
import { Check } from 'lucide-react';
import { FhirCommunicationRequest } from '../components';
import { useFhirCommunicationRequestTargetedBroadcast } from '../hooks';
import { describeWriteFailure } from '../utils/fetchFailureMessage';

interface CommunicationRequestModalProps {
    recipient: Patient | Practitioner;
    onClose: () => void;
    communicationRequest?: CommunicationRequest;
    onCommunicationRequestCreated?: (communicationRequest: CommunicationRequest) => void;
    onCommunicationRequestUpdated?: (communicationRequest: CommunicationRequest) => void;
    isOpen?: boolean;
}

export const CommunicationRequestModal: React.FC<CommunicationRequestModalProps> = ({ onClose, onCommunicationRequestCreated, onCommunicationRequestUpdated, recipient, communicationRequest }) => {
    const { currentUser, wpOrganization } = useAuthServiceContext();
    const {
        createCommunicationRequest,
        updateCommunicationRequest,
        transformToFhirCommunicationRequest,
        transformFromFhirCommunicationRequest
    } = useCommunicationServiceContext();
    const [submitting, setSubmitting] = useState(false);
    const [success, setSuccess] = useState<string | undefined>();
    const [error, setError] = useState<string | undefined>();

    const spacerMargin = '24px';
    const currentPractitioner = currentUser?.fhir as Practitioner;

    const methods = useForm({
        defaultValues: {
            status: '',
            statusReason: null,
            category: [],
            priority: '',
            medium: [],
            authoredOn: new Date(),
            reasonCode: [],
            note: []
        }
    });

    const { handleSubmit, reset } = methods;

    const init = useCallback((communicationRequest: CommunicationRequest) => {
        reset(transformFromFhirCommunicationRequest(communicationRequest));
    }, [transformFromFhirCommunicationRequest, reset]);

    useFhirCommunicationRequestTargetedBroadcast({
        communicationRequest,
        onUpdate: init,
        onDelete: onClose
    });

    useEffect(() => {
        if (communicationRequest) {
            init(communicationRequest);
        }
    }, [communicationRequest, init]);

    const onSubmit = async (data: any) => {
        setSubmitting(true);
        setSuccess(undefined);
        setError(undefined);

        try {
            let result: CommunicationRequest;

            if (communicationRequest) {
                result = await updateCommunicationRequest({
                    id: communicationRequest.id,
                    ...transformToFhirCommunicationRequest(data)
                });

                if (onCommunicationRequestUpdated) {
                    onCommunicationRequestUpdated(result);
                }
            } else {
                result = await createCommunicationRequest(transformToFhirCommunicationRequest(data, currentPractitioner, recipient as Practitioner, wpOrganization.current as Organization));

                if (onCommunicationRequestCreated) {
                    onCommunicationRequestCreated(result);
                }
            }

            onClose();
        } catch (err: any) {
            console.error(`Error ${communicationRequest ? 'updating' : 'creating'} communication request:`, err);
            setError(describeWriteFailure(err, `Failed to ${communicationRequest ? 'update' : 'create'} communication request`));
        } finally {
            setSubmitting(false);
        }
    };

    return (
        <Modal style={{ width: 700 }}
               title={`${communicationRequest ? 'Edit' : 'New'} Communication Request to ${formatFhirHumanName(recipient.name)}`}
               size="large"
               shouldCloseOnClickOutside={false}
               onRequestClose={onClose}>
            <FormProvider {...methods}>
                <form onSubmit={handleSubmit(onSubmit)}>

                    <FhirCommunicationRequest elevated={false}
                                              disabled={submitting}
                                              enableInlineActions={false}/>
                    <Spacer margin={spacerMargin}/>

                    {success && (
                        <>
                            <DismissibleAlert status="success" onDismiss={() => setSuccess(undefined)}>
                                {success}
                            </DismissibleAlert>

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

                    {error && (
                        <>
                            <DismissibleAlert status="error" onDismiss={() => setError(undefined)}>
                                <div style={{ whiteSpace: 'pre-line' }}>{error}</div>
                            </DismissibleAlert>

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

                    <Flex justify="end" style={{ paddingBottom: 32 }}>
                        <FlexItem>
                            {/* This Cancel STAYS. The modal-Cancel rule is "no Cancel when closing
                                does the same thing" — here it does not: this also calls reset(),
                                which the X (onRequestClose={onClose}) does not. Red per the
                                convention. If the reset moves into onClose, delete this. */}
                            <button type="button"
                                    className="btn btn-red"
                                    onClick={() => {
                                        onClose();
                                        reset();
                                    }}
                                    disabled={submitting}>
                                Cancel
                            </button>
                        </FlexItem>
                        <FlexItem>
                            <button className={`btn btn-green${submitting ? ' btn-busy' : ''}`}
                                    type="submit"
                                    disabled={submitting}>
                                <Check />
                                {communicationRequest ? "Update" : "Create"}
                            </button>
                        </FlexItem>
                    </Flex>
                </form>
            </FormProvider>
        </Modal>
    );
};

export default CommunicationRequestModal;