import React from 'react';
import { Controller, useFormContext } from 'react-hook-form';
import { TextareaControl } from "../ui/textarea-control";
import { Divider } from '../ui/divider';
import { DismissibleAlert } from '../ui/dismissible-alert';
import { PlusCircle, Trash2 } from 'lucide-react';
import { Heading } from '../ui/heading';
import { Flex, FlexItem, FlexBlock } from '../ui/flex';
import { Spacer } from '../ui/spacer';
import { Annotation } from 'fhir/r4';
import { formatFhirHumanName } from '../../utils/fhirHumanName.tsx';
import { useAuthServiceContext, useFhirServiceContext } from '../../services';

interface FhirAnnotationProps {
    label: string;
    context: string;
    disabled?: boolean;
    readonly?: boolean;
}

const FhirAnnotation = ({ label, context, disabled, readonly = false }: FhirAnnotationProps) => {
    const { control, watch, setValue, getValues } = useFormContext();
    const { currentUser } = useAuthServiceContext();
    const { createReferenceObject } = useFhirServiceContext();
    const spacerMargin = '24px';

    const notes = watch(context);

    const addNote = () => {
        const notes = getValues(context) ?? [];
        setValue(context, [...notes, {
            text: '',
            time: new Date().toISOString(),
            authorReference: createReferenceObject(currentUser?.fhir?.resourceType as string, currentUser?.fhir?.id as string, formatFhirHumanName(currentUser?.fhir?.name))
        }], { shouldDirty: true });
    };

    const canAddNote = () => {
        return true;
    };

    const removeNote = (index: number) => {
        const notes = getValues(context) ?? [];

        notes.splice(index, 1);
        setValue(context, notes, { shouldDirty: true });
    };

    return (
        <>
            <Spacer margin="8"/>
            <Flex>
                <FlexItem>
                    <Heading level={5}>{label}</Heading>
                </FlexItem>

                {!readonly && (notes ?? []).length === 0 && (
                    <FlexItem>
                        <button type="button"
                                className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                onClick={addNote}
                                disabled={!canAddNote() || disabled}>
                            <PlusCircle className="w-4 h-4" />
                            Add Note
                        </button>
                    </FlexItem>
                )}
            </Flex>
            <Divider margin="2"/>
            <Spacer margin="8"/>

            {(notes ?? []).length === 0 && (
                <>
                    <DismissibleAlert status="info">
                        No note added yet.
                    </DismissibleAlert>

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

            {(notes ?? []).map((note: Annotation, index: number) => (
                <React.Fragment key={note.id}>
                    <Flex>
                        <FlexBlock>
                            <Controller key={`${context}.${index}.text`}
                                        name={`${context}.${index}.text`}
                                        control={control}
                                        render={({ field }) => (
                                            <TextareaControl
                                                             value={field.value}
                                                             onChange={(value) => { if (!readonly && !disabled) field.onChange(value); }}
                                                             readOnly={readonly}
                                                             disabled={disabled}
                                                             placeholder={label}
                                                             rows={6}/>
                                        )}/>

                            {/* Hidden field for time */}
                            <Controller key={`${context}.${index}.time`}
                                        name={`${context}.${index}.time`}
                                        control={control}
                                        render={({ field }) => (
                                            <input type="hidden"
                                                   value={field.value || ''}
                                                   onChange={field.onChange} />
                                        )}/>

                            {/* Hidden field for author */}
                            <Controller key={`${context}.${index}.author`}
                                        name={`${context}.${index}.author`}
                                        control={control}
                                        render={({ field }) => (
                                            <input type="hidden"
                                                   value={field.value ? JSON.stringify(field.value) : ''}
                                                   onChange={(e) => {
                                                       try {
                                                           const value = e.target.value ? JSON.parse(e.target.value) : null;
                                                           field.onChange(value);
                                                       } catch (err) {
                                                           console.error('Invalid JSON in author field', err);
                                                           field.onChange(null);
                                                       }
                                                   }} />
                                        )}/>
                        </FlexBlock>

                        {!readonly && (
                            <FlexItem>
                                <button type="button"
                                        className="btn btn-red-ghost"
                                        title="Remove note"
                                        aria-label="Remove note"
                                        onClick={() => removeNote(index)}
                                        disabled={disabled}>
                                    <Trash2 className="w-4 h-4" />
                                </button>
                            </FlexItem>
                        )}
                    </Flex>

                    <Divider margin="8"/>
                </React.Fragment>
            ))}

            {!readonly && (notes ?? []).length !== 0 && (
                <>
                    <Flex align="center" justify="center">
                        <FlexItem>
                            <button type="button"
                                    className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                    onClick={addNote}
                                    disabled={!canAddNote() || disabled}>
                                <PlusCircle className="w-4 h-4" />
                                Add Note
                            </button>
                        </FlexItem>
                    </Flex>

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

export default FhirAnnotation;