import React, { useEffect, useState } from 'react';
import { TextareaControl } from "../ui/textarea-control";
import { Controller, useFormContext } from 'react-hook-form';
// - the first call site off WordPress's ToggleControl and onto the ui/* adapter. The JSX below
// is unchanged apart from dropping `__nextHasNoMarginBottom`, which is meaningless outside WordPress.
import { ToggleControl } from '../ui/toggle-control';
import { Card, CardBody, CardHeader } from '../ui/wp-card';
import { Elevation } from '../ui/elevation';
import { Heading } from '../ui/heading';
import { Spacer } from '../ui/spacer';
import { FhirCodeableConcept, FhirValueSetSearch } from '../index.ts';
import { IValueSet, useValueSetServiceContext } from '../../services';

interface FhirBodyStructureProps {
    elevated?: boolean;
    disabled?: boolean;
    enableInlineActions?: boolean;
}

export const FhirBodyStructure: React.FC<FhirBodyStructureProps> = ({ elevated = true, disabled = false }) => {
    const { control } = useFormContext();
    const { fetchValueSet, valueSetUrls } = useValueSetServiceContext();
    const [loading, setLoading] = useState(false);

    // value sets
    const [bodystructureRelativeLocation, setBodystructureRelativeLocation] = useState<IValueSet[]>([]);

    const spacerMargin = '24px';

    useEffect(() => {
        const loadValueSets = async () => {
            setLoading(true);
            try {
                const [
                    bodystructureRelativeLocationValueSet
                ] = await Promise.all([
                    fetchValueSet(valueSetUrls.bodystructureRelativeLocation),
                ]);

                setBodystructureRelativeLocation(bodystructureRelativeLocationValueSet);
            } catch (err) {
                console.error('Error loading value sets:', err);
            } finally {
                setLoading(false);
            }
        };

        loadValueSets();
    }, [fetchValueSet, valueSetUrls]);

    return (
        <Card style={elevated ? { boxShadow: 'none' } : {}}>
            {elevated && <Elevation value={5}/>}
            <CardHeader>
                <Heading level={5}>Details</Heading>
            </CardHeader>
            <CardBody>
                {/* description */}
                <Controller key={`description`}
                            name={`description`}
                            control={control}
                            disabled={disabled}
                            render={({ field }) => (
                                <TextareaControl
                                                 value={field.value}
                                                 onChange={field.onChange}
                                                 placeholder='Description'
                                                 rows={6}/>
                            )}/>

                <Spacer margin={spacerMargin}/>

                {/* active */}
                <Controller key="active"
                            name="active"
                            control={control}
                            disabled={disabled}
                            render={({ field }) => (
                                <ToggleControl label="Record is in active use"
                                               checked={field.value}
                                               onChange={field.onChange}/>
                            )}/>

                <Spacer margin={spacerMargin}/>

                {/* morphology */}
                <FhirValueSetSearch label="Kind of Structure"
                                    context="morphology"
                                    valueSetUrl={valueSetUrls.bodystructureCode}
                                    placeholder="Search for structurees..."
                                    disabled={disabled}/>

                <Spacer margin={spacerMargin}/>

                {/* location */}
                <FhirValueSetSearch label="Body site"
                                    context="location"
                                    valueSetUrl={valueSetUrls.bodySite}
                                    placeholder="Search for body sites..."
                                    disabled={disabled}/>

                <Spacer margin={spacerMargin}/>

                {/* locationQualifier */}
                <FhirCodeableConcept label="Body site modifier"
                                     context="locationQualifier"
                                     options={bodystructureRelativeLocation}
                                     multiple={true}
                                     loading={loading}
                                     disabled={disabled}/>

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

export default FhirBodyStructure;