import React from 'react';
import { Controller, useFormContext } from 'react-hook-form';
import { InputControl } from '../ui/input-control';
import { Divider } from '../ui/divider';
import { Plus, Trash2 } from 'lucide-react';
import { Heading } from '../ui/heading';
import { Flex, FlexBlock } from '../ui/flex';
import { Spacer } from '../ui/spacer';
import { Coding } from 'fhir/r4';

interface FhirCodeDisplayProps {
    path: string;
    mutable?: boolean;
    disabled?: boolean;
}

const FhirCodeDisplay: React.FC<FhirCodeDisplayProps> = ({ path, mutable = false, disabled = false }) => {
    const { control, getValues, setValue } = useFormContext();
    const codes = getValues(path);

    const addCode = () => {
        codes.append({
            code: '',
            system: '',
            display: ''
        });
    };

    const remove = (index: number) => {
        codes.remove(index);
    };

    return (
        <>
            <Heading level={5}>Code</Heading>
            <Divider margin="2"/>
            <Spacer margin="24px"/>

            {codes.map((code: Coding, index: number) => (
                <React.Fragment key={code.code}>
                    <Flex>
                        <FlexBlock>
                            <Controller key={`${path}[${index}].code`}
                                        name={`${path}[${index}].code`}
                                        control={control}
                                        render={({ field }) => (
                                            <InputControl
                                                          className="code-input"
                                                          {...field}
                                                          label="Code"
                                                          disabled={disabled || !mutable}/>
                                        )}/>
                        </FlexBlock>

                        <FlexBlock>
                            <Controller key={`${path}[${index}].display`}
                                        name={`${path}[${index}].display`}
                                        control={control}
                                        render={({ field }) => (
                                            <InputControl
                                                          className="code-input"
                                                          {...field}
                                                          label="Display"
                                                          disabled={disabled || !mutable}/>
                                        )}/>
                        </FlexBlock>

                        <FlexBlock>
                            <Controller key={`${path}[${index}].system`}
                                        name={`${path}[${index}].system`}
                                        control={control}
                                        render={({ field }) => (
                                            <InputControl
                                                          className="code-input"
                                                          {...field}
                                                          label="System"
                                                          disabled={disabled || !mutable}/>
                                        )}/>
                        </FlexBlock>

                        {mutable && (
                            <div style={{ display: 'flex', alignItems: 'flex-end', paddingBottom: '8px' }}>
                                <button type="button"
                                        className="btn btn-red-ghost"
                                        onClick={() => remove(index)}
                                        disabled={disabled}
                                        aria-label="Remove code">
                                    <Trash2 className="w-5 h-5" />
                                </button>
                            </div>
                        )}
                    </Flex>
                    <Spacer margin={2} />
                </React.Fragment>
            ))}

            {mutable && (
                <>
                    <button type="button"
                            className="btn btn-blue-ghost"
                            onClick={addCode}
                            disabled={disabled}>
                        <Plus className="w-4 h-4" />
                        Add Code
                    </button>
                    <Spacer margin={2} />
                </>
            )}
        </>
    );
};

export default FhirCodeDisplay;