import { Controller, useFormContext } from 'react-hook-form';
import { IValueSet, useValueSetServiceContext } from '../../services';
import { InputControl } from '../ui/input-control';
import { Divider } from '../ui/divider';
import { DismissibleAlert } from '../ui/dismissible-alert';
import { Heading } from '../ui/heading';
import { Flex, FlexBlock } from '../ui/flex';
import { Spacer } from '../ui/spacer';
import UcumUnitSearch from '../UcumUnitSearch/UcumUnitSearch.tsx';
import { getNestedError } from '../../utils/formUtils.ts';
import { FhirCode, FhirCodeableConcept } from '../index.ts';

interface FhirQuantityProps {
    label: string;
    context: string;
    units?: IValueSet[] | undefined;
    isSimpleQuantity?: boolean;
    isUnitMutable? :boolean;
    disabled?: boolean;
    required?: boolean
}

const FhirQuantity = ({ label, context, units, isSimpleQuantity = false, isUnitMutable = true, disabled, required = false }: FhirQuantityProps) => {
    const { quantityComparators } = useValueSetServiceContext();
    const { control, formState: { errors } } = useFormContext();

    // An empty list is truthy, so it would render an empty select and block the unit search below.
    const hasUnits = Array.isArray(units) && units.length > 0;

    return (
        <>
            <Heading level={5}>{label}</Heading>
            <Divider margin="2"/>
            <Spacer margin="8"/>
            <Flex>
                <FlexBlock>
                    {/* value */}
                    <Controller key={`${context}.value`}
                                name={`${context}.value`}
                                control={control}
                                rules={{ required: required }}
                                render={({ field }) => (
                                    <InputControl
                                                  {...field}
                                                  label={required ? 'Value *' : 'Value'}
                                                  type="number"
                                                  disabled={disabled}/>
                                )}/>
                    {getNestedError(errors, `${context}.value`) && (
                        <DismissibleAlert status="error">
                            Value is required
                        </DismissibleAlert>
                    )}
                </FlexBlock>
                <FlexBlock>
                    {hasUnits && (
                        <>
                            {/* unit */}
                            <FhirCodeableConcept label="Unit"
                                                 context={`${context}.unit`}
                                                 options={units}
                                                 disabled={disabled}
                                                 required={true}/>
                        </>
                    )}

                    {!hasUnits && isUnitMutable && (
                        <UcumUnitSearch label="Unit"
                                        context={`${context}.unit`}
                                        multiple={false}
                                        disabled={disabled}/>
                    )}

                    {!hasUnits && !isUnitMutable && (
                        <Controller key={`${context}.unit.code`}
                                    name={`${context}.unit.code`}
                                    control={control}
                                    render={({ field }) => (
                                        <InputControl
                                                      {...field}
                                                      label="Unit"
                                                      disabled={true}/>
                                    )}/>
                    )}
                </FlexBlock>

                {!isSimpleQuantity && (
                    <FlexBlock>
                        {/* comparator */}
                        <FhirCode label="Comparator"
                                  context={`${context}.comparator`}
                                  options={quantityComparators}
                                  required={false}/>
                    </FlexBlock>
                )}
            </Flex>
        </>
    );
};

export default FhirQuantity;