import { Controller, useFormContext } from 'react-hook-form';
import { RangeControl } from "../ui/range-control";
import { Divider } from '../ui/divider';
import { Heading } from '../ui/heading';
import { Spacer } from '../ui/spacer';
import { useValueSetServiceContext } from '../../services';
import { useEffect } from 'react';

interface FhirRangeProps {
    label: string;
    context: string;
    lowMin?: number;
    lowMax?: number;
    highMin?: number;
    highMax?: number;
    disabled?: boolean;
    readonly?: boolean;
}

const FhirRange = ({ label, context, lowMin = 0, lowMax = 100, highMin = 0, highMax = 100, disabled = false, readonly = false }: FhirRangeProps) => {
    const { control, setValue } = useFormContext();
    const { ucumSystemUrl } = useValueSetServiceContext();
    const spacerMargin = '24px';

    useEffect(() => {
        setValue(`${context}.low.system`, ucumSystemUrl);
        setValue(`${context}.high.system`, ucumSystemUrl);
    }, [context, ucumSystemUrl]);

    return (
        <>
            <Heading level={5}>{label}</Heading>
            <Divider margin="2"/>
            <Spacer margin={spacerMargin}/>

            <Controller key={`${context}.low.value`}
                        name={`${context}.low.value`}
                        control={control}
                        render={({ field }) => (
                            <RangeControl
                                          allowReset={!readonly}
                                          marks
                                          currentInput={lowMin}
                                          initialPosition={lowMin}
                                          help="Low limit"
                                          label="Low"
                                          min={lowMin}
                                          max={lowMax}
                                          value={field.value}
                                          onChange={field.onChange}
                                          disabled={disabled}/>
                        )}/>

            <Spacer margin={spacerMargin}/>

            <Controller key={`${context}.high.value`}
                        name={`${context}.high.value`}
                        control={control}
                        render={({ field }) => (
                            <RangeControl
                                          allowReset={!readonly}
                                          marks
                                          currentInput={highMax}
                                          initialPosition={lowMax}
                                          help="High limit"
                                          label="High"
                                          min={highMin}
                                          max={highMax}
                                          value={field.value}
                                          onChange={field.onChange}
                                          disabled={disabled}/>
                        )}/>

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

export default FhirRange;