import React from 'react';
import type { Encounter } from 'fhir/r4';
import { Section } from '../FieldHistory/FieldLayout';
import { resolvedVisitNote, useCurrentVisitNote, type VisitNoteSource, type VisitNoteState } from './useEncounterVisitNote';

const VisitNoteSection: React.FC<{ state: VisitNoteState }> = ({ state }) => (
    <Section title="Visit note">
        {state.status === 'loading' && (
            <p className="text-sm italic text-muted-foreground">Loading the visit note...</p>
        )}
        {state.status === 'failed' && (
            <p className="text-sm text-destructive">The visit note could not be loaded. Close and open the encounter to try again.</p>
        )}
        {state.status === 'ready' && state.texts.map((text, index) => (
            <p key={index} className="whitespace-pre-wrap text-sm text-foreground">{text}</p>
        ))}
        {state.status === 'ready' && state.incomplete && (
            <p className="text-sm text-destructive">Not every note for this patient could be read, so this visit may have a note that is not shown here.</p>
        )}
        {state.status === 'ready' && !state.incomplete && state.texts.length === 0 && (
            <p className="text-sm italic text-muted-foreground">No visit note recorded</p>
        )}
    </Section>
);

const CurrentVisitNote: React.FC<{ encounter: Encounter }> = ({ encounter }) => (
    <VisitNoteSection state={useCurrentVisitNote(encounter)} />
);

// Mounted only while Encounter Details is open, so a closed dialog reads nothing.
export const EncounterVisitNote: React.FC<{ encounter: Encounter; source: VisitNoteSource }> = ({ encounter, source }) =>
    source.kind === 'current'
        ? <CurrentVisitNote encounter={encounter} />
        : <VisitNoteSection state={resolvedVisitNote(source, encounter.id)} />;