import React, { useEffect, useState } from 'react';
import { FhirCodeDisplay } from '../../utils/fhirCode';
import { FhirReferenceDisplay } from '../../utils/fhirReference';
import { formatDateTime } from '../../utils/dateUtils';
import { renderField } from '../../utils/renderField';
import { QuestionnaireResponse } from 'fhir/r4';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/dialog';
import { FieldHistoryProvider, FieldHistoryScope } from '../FieldHistory/FieldHistoryProvider';
import { ShowFieldHistoryToggle } from '../FieldHistory/ShowFieldHistoryToggle';
import { PrintRecord } from '../ui/print-record';
import { RecordEditedMarker } from '../FieldHistory/RecordEditedMarker';
import { FieldGroup, Section } from '../FieldHistory/FieldLayout';
import { useQuestionnaireServiceContext } from '../../services';
import { QuestionnaireAnswers } from '../QuestionnaireAnswers/QuestionnaireAnswers';
import { changedAnswerCount, previousSentVersion } from '../../utils/changedAnswers';

interface FhirQuestionnaireResponseDisplayProps {
    questionnaireResponse: QuestionnaireResponse;
    isOpen: boolean;
    onClose: () => void;
    title?: string;
}

// Closed, it renders nothing and asks for no services, so surfaces that mount it closed need no provider.
export const FhirQuestionnaireResponseDisplay: React.FC<FhirQuestionnaireResponseDisplayProps> = (props) =>
    props.isOpen ? <QuestionnaireResponseDialog {...props} /> : null;

const QuestionnaireResponseDialog: React.FC<FhirQuestionnaireResponseDisplayProps> = ({
    questionnaireResponse,
    isOpen,
    onClose,
    title = "Questionnaire Response Details"
}) => {
    const { fetchQuestionnaireResponseHistory } = useQuestionnaireServiceContext();
    const [previous, setPrevious] = useState<QuestionnaireResponse | undefined>();
    const [historyFailed, setHistoryFailed] = useState(false);
    const responseId = questionnaireResponse?.id;
    const versionId = questionnaireResponse?.meta?.versionId;

    // The previous sent version, so each changed answer is read beside what it said before.
    useEffect(() => {
        setPrevious(undefined);
        setHistoryFailed(false);

        if (!responseId) return;

        let cancelled = false;

        fetchQuestionnaireResponseHistory(responseId, 20)
            .then((history) => {
                const versions = (history.entry ?? [])
                    .map((entry) => entry.resource)
                    .filter((resource): resource is QuestionnaireResponse => Boolean(resource));

                if (!cancelled) setPrevious(previousSentVersion(versions, versionId));
            })
            .catch(() => {
                if (!cancelled) setHistoryFailed(true);
            });

        return () => { cancelled = true; };
    }, [responseId, versionId, fetchQuestionnaireResponseHistory]);

    const changedCount = changedAnswerCount(questionnaireResponse, previous);

    return (
        <Dialog
            open={isOpen}
            onOpenChange={(next) => {
                if (!next) onClose();
            }}
        >
            <DialogContent className="max-h-[90vh] w-full max-w-3xl overflow-y-auto" data-print-region="true">
                <FieldHistoryProvider>
                    <FieldHistoryScope resourceType="QuestionnaireResponse" id={questionnaireResponse.id}>
                        <DialogHeader className="flex-row items-center justify-between gap-4 text-left sm:text-left">
                            <div className="flex items-center gap-2">
                                <DialogTitle>{title}</DialogTitle>
                                <RecordEditedMarker resource={questionnaireResponse} />
                            </div>
                            <ShowFieldHistoryToggle />
            <PrintRecord/>
                        </DialogHeader>

                        <FieldGroup>
                            {renderField('The subject of the questions', <FhirReferenceDisplay references={questionnaireResponse.subject} />)}
                            {renderField('Status', <FhirCodeDisplay code={questionnaireResponse.status} />, 'status')}
                            {renderField('Date the answers were gathered', formatDateTime(questionnaireResponse.authored), 'authored')}
                            {renderField('Encounter created as part of', <FhirReferenceDisplay references={questionnaireResponse.encounter} />)}
                            {renderField('Person who received and recorded the answers', <FhirReferenceDisplay references={questionnaireResponse.author} />)}
                            {renderField('The person who answered the questions', <FhirReferenceDisplay references={questionnaireResponse.source} />)}
                        </FieldGroup>

                        <Section title="Answers">
                            {changedCount > 0 && (
                                <p className="mb-2 text-sm" data-testid="answers-changed-count">
                                    {`${changedCount} ${changedCount === 1 ? 'answer was' : 'answers were'} changed after the form was first sent.`}
                                </p>
                            )}
                            {historyFailed && (
                                <p className="mb-2 text-sm" data-testid="answers-history-failed">
                                    Earlier versions of these answers could not be loaded, so any changes are not shown.
                                </p>
                            )}
                            <QuestionnaireAnswers
                                response={questionnaireResponse}
                                previous={previous}
                                heading="What was sent"
                                changedOn={changedCount > 0 ? formatDateTime(questionnaireResponse.meta?.lastUpdated ?? questionnaireResponse.authored) : undefined}
                                previousOn={previous ? formatDateTime(previous.meta?.lastUpdated ?? previous.authored) : undefined}
                            />
                        </Section>

                        <Section title="Based On">
                            <FieldGroup>
                                {renderField('Request fulfilled by this QuestionnaireResponse', <FhirReferenceDisplay references={questionnaireResponse.basedOn} />)}
                            </FieldGroup>
                        </Section>

                        <Section title="Part Of">
                            <FieldGroup>
                                {renderField('Part of this action', <FhirReferenceDisplay references={questionnaireResponse.partOf} />)}
                            </FieldGroup>
                        </Section>
                    </FieldHistoryScope>
                </FieldHistoryProvider>
            </DialogContent>
        </Dialog>
    );
};

export default FhirQuestionnaireResponseDisplay;