import React, { useEffect } from 'react';
import { Controller, useFormContext } from 'react-hook-form';
import { InputControl } from '../ui/input-control';
import { TextareaControl } from '../ui/textarea-control';
import { Spacer } from '../ui/spacer';
import { FhirValueSetSearch } from '../../components';
import { useValueSetServiceContext } from '../../services';

interface PatientMedicationStatementFieldsProps {
    disabled?: boolean;
}

// What a patient can tell us about a medicine they take. The dose is kept as the dosage text and how
// often as its patient instruction, both plain strings the staff record already shows.
export const PatientMedicationStatementFields: React.FC<PatientMedicationStatementFieldsProps> = ({ disabled = false }) => {
    const { control, getValues, setValue, watch } = useFormContext();
    const { valueSetUrls } = useValueSetServiceContext();
    const note = watch('note');
    const noteText: string = note?.[0]?.text ?? '';

    // A medicine the patient reports taking is current until they say otherwise.
    useEffect(() => {
        if (!getValues('status')) setValue('status', 'active');
    }, [getValues, setValue]);

    const setNote = (text: string) => {
        const rest = Array.isArray(note) ? note.slice(1) : [];
        setValue('note', text ? [{ ...(note?.[0] ?? {}), text }, ...rest] : rest, { shouldDirty: true });
    };

    return (
        <>
            <FhirValueSetSearch label="Medicine"
                                context="medicationCodeableConcept"
                                valueSetUrl={valueSetUrls.medicationCodes}
                                placeholder="Search for a medicine..."
                                multiple={false}
                                required={true}
                                disabled={disabled}/>

            <Spacer margin="24px"/>

            <Controller name="dosage.0.text"
                        control={control}
                        disabled={disabled}
                        render={({ field }) => (
                            <InputControl label="Dose"
                                          placeholder="For example, 200 mg"
                                          value={field.value ?? ''}
                                          onChange={(value) => field.onChange(value ?? '')}
                                          disabled={disabled}/>
                        )}/>

            <Spacer margin="24px"/>

            <Controller name="dosage.0.patientInstruction"
                        control={control}
                        disabled={disabled}
                        render={({ field }) => (
                            <InputControl label="How often"
                                          placeholder="For example, twice a day"
                                          value={field.value ?? ''}
                                          onChange={(value) => field.onChange(value ?? '')}
                                          disabled={disabled}/>
                        )}/>

            <Spacer margin="24px"/>

            <Controller name="effectiveDateTime"
                        control={control}
                        disabled={disabled}
                        render={({ field }) => (
                            <InputControl label="Since when"
                                          type="date"
                                          value={(field.value ?? '').slice(0, 10)}
                                          onChange={(value) => {
                                              field.onChange(value ? `${value}T00:00` : '');
                                              setValue('effectiveType', value ? 'dateTime' : '');
                                          }}
                                          disabled={disabled}/>
                        )}/>

            <Spacer margin="24px"/>

            <TextareaControl label="Notes"
                             value={noteText}
                             onChange={setNote}
                             disabled={disabled}/>
        </>
    );
};

export default PatientMedicationStatementFields;