import React, { useEffect } from 'react';
import { UnitControl } from "../ui/unit-control";
import { Controller, useFormContext } from 'react-hook-form';
import { IValueSet, useValueSetServiceContext } from '../../services';

interface FhirDurationProps {
    label?: string;
    context: string;
    disabled?: boolean;
    defaultValue?: {
        value?: number;
        unit?: string;
    };
    onChange?: (value: { value: number, unit: string }) => void;
}

const FhirDuration: React.FC<FhirDurationProps> = ({ context, label = 'Duration', disabled = false, defaultValue, onChange }) => {
    const { control, setValue, getValues, watch } = useFormContext();
    const { durationUnits } = useValueSetServiceContext();

    const durationValue = watch(`${context}.value`);
    const durationUnit = watch(`${context}.unit`);

    useEffect(() => {
        if (defaultValue) {
            setValue(`${context}.value`, defaultValue.value);
            setValue(`${context}.unit`, defaultValue.unit ?? 'd');
        }
    }, [defaultValue, setValue, context]);

    useEffect(() => {
        if (onChange && durationValue !== undefined && durationUnit !== undefined) {
            onChange({
                value: Number(durationValue),
                unit: durationUnit
            });
        }
    }, [durationValue, durationUnit, onChange]);

    return (
        <>
            <Controller key={`${context}.value`}
                        name={`${context}.value`}
                        control={control}
                        defaultValue={defaultValue?.value}
                        render={({ field }) => {
                            const currentUnit = getValues(`${context}.unit`) || 'd';

                            return (
                                <UnitControl
                                             label={label}
                                             className='wp-unit-control'
                                             value={`${field.value}${currentUnit}`}
                                             disabled={disabled}
                                             onChange={(value: string | undefined) => {
                                                 if (!value) {
                                                     field.onChange(0);
                                                     return;
                                                 }

                                                 const numericValue = value.replace(currentUnit, '');
                                                 field.onChange(Number(numericValue) || 0);
                                             }}
                                             onUnitChange={(unit: string | undefined) => {
                                                 setValue(`${context}.unit`, unit ?? 'd');
                                                 setValue(`${context}.value`, `${getValues(`${context}.value`)}${unit ?? 'd'}`);
                                             }}
                                             units={durationUnits.map((option: IValueSet) => (
                                                 { label: option.display, value: option.code }
                                             ))}/>
                            );
                        }}/>
        </>
    );
};

export default FhirDuration;