import React, { useState, useEffect } from 'react';
import { FhirCode, FhirCodeableConcept, FhirPeriod } from '../index.ts';
import { Flex, FlexItem } from '../ui/flex';
import { Spacer } from '../ui/spacer';
import { Modal } from '../ui/wp-modal-shim';
import { FormProvider, useForm } from 'react-hook-form';
import { IValueSet, useFlagServiceContext, useValueSetServiceContext } from '../../services';
import FhirValueSetSearch from '../FhirValueSetSearch/FhirValueSetSearch.tsx';
import { formatFhirHumanName } from '../../utils/fhirHumanName.tsx';
import {
    Group,
    Medication,
    Organization,
    Patient,
    PlanDefinition,
    Practitioner,
    Procedure,
    Location,
    Flag
} from 'fhir/r4';

interface FhirFlagModalProps {
    onClose: () => void;
    onSubmit: (formData: any) => void;
    fhirFlag: Flag | undefined
    subjectType: 'Patient' | 'Location' | 'Group' | 'Organization' | 'Practitioner' | 'PlanDefinition' | 'Medication' | 'Procedure';
    subject: Patient | Location | Group | Organization | Practitioner | PlanDefinition | Medication | Procedure;
}

const FhirFlag: React.FC<FhirFlagModalProps> = ({ onClose, onSubmit, fhirFlag, subjectType, subject }) => {
    const { fetchValueSet, valueSetUrls } = useValueSetServiceContext();
    const { transformFromFhirFlag } = useFlagServiceContext();

    const [flagStatus, setFlagStatus] = useState<IValueSet[]>([]);
    const [flagCategory, setFlagCategory] = useState<IValueSet[]>([]);
    const spacerMargin = '24px';

    const methods = useForm({
        defaultValues: {
            status: 'active',
            category: null,
            code: null,
            subject: null,
        }
    });

    useEffect(() => {
        if (fhirFlag) {
            methods.reset(transformFromFhirFlag(fhirFlag))
        }
    }, [fhirFlag]);

    const { handleSubmit } = methods;

    useEffect(() => {
        const loadValueSets = async () => {
            const [
                flagStatusValueSet,
                flagCategoryValueSet,
            ] = await Promise.all([
                fetchValueSet(valueSetUrls.flagStatus),
                fetchValueSet(valueSetUrls.flagCategory),
            ]);

            setFlagStatus(flagStatusValueSet);
            setFlagCategory(flagCategoryValueSet);
        };

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

    const getModalTitle = () => {
        let title = `Flag ${subjectType} `;

        if (subjectType === 'Patient' && subject) {
            title += formatFhirHumanName((subject as Patient).name);
        }

        return title;
    };

    return (
        <Modal style={{ width: 700, height: 700 }}
               title={getModalTitle()}
               onRequestClose={onClose}>
            <FormProvider {...methods}>
                <form onSubmit={handleSubmit(onSubmit)}>
                    {/* code */}
                    <FhirValueSetSearch label="Coded or textual message to display"
                                        context="code"
                                        multiple={false}
                                        valueSetUrl={valueSetUrls.flagCode}
                                        placeholder="Search for flag codes..."/>

                    <Spacer margin={spacerMargin}/>

                    {/* category */}
                    <FhirCodeableConcept label="Category"
                                         context="category"
                                         options={flagCategory}
                                         multiple={true}/>

                    <Spacer margin={spacerMargin}/>

                    {/* status */}
                    <FhirCode label="Status"
                              context="status"
                              options={flagStatus}/>

                    <Spacer margin={spacerMargin}/>

                    {/* period */}
                    <FhirPeriod label="Time period when flag is active"
                                context='period'/>

                    <Spacer margin={spacerMargin}/>

                    {/* No Cancel: this is a Modal and its X already calls onClose, so a Cancel button
                        is a second control for one action. Save sits bottom-right on its own. */}
                    <Flex justify='end'>
                        <FlexItem>
                            <button className="btn btn-green"
                                    type="submit">
                                {fhirFlag ? 'Edit' : 'Create'}
                            </button>
                        </FlexItem>
                    </Flex>
                </form>
            </FormProvider>
        </Modal>
    );
};

export default FhirFlag;