import { useNavigate } from 'react-router-dom';
import { Item, ItemGroup } from "../../../../components/ui/item-group";
import { useAuthServiceContext } from '../../../../services';
import { useState } from 'react';
import { BodyStructure } from 'fhir/r4';
import { useFhirBodyStructures } from '../../../../hooks/useFhirBodyStructures.tsx';
import { AppSpinner, ScrollableTab } from '../../../../components';
import { ResourceListStatus } from '../../../../components/ui/resource-list-status';
import { Flex, FlexItem, FlexBlock } from '../../../../components/ui/flex';
import { Text } from '../../../../components/ui/text';
import { Spacer } from '../../../../components/ui/spacer';
// `Icon` and `warning` were BOTH already dead at HEAD (no `<Icon` usage anywhere in this
// file, and `warning` appeared only on the import line) - pre-existing warts carried
// across, dropped here so the file is better than it was found.
import { Pencil, Plus } from 'lucide-react';
import { SourcePractice } from '../../../../components/ui/source-practice';
import { RecordPracticeNote, recordPracticeId, useRecordPracticeView, useRetireOnPracticeChange } from '../../../../contexts/RecordPracticeContext';

const BodyStructures = ({ elevated = false }: { elevated?: boolean }) => {
    const navigate = useNavigate();
    const { userRole, USER_ROLES } = useAuthServiceContext();
    const { loading, error, clearError, bodyStructuresList, attempted } = useFhirBodyStructures();
    const [selectedbodyStructure, setSelectedbodyStructure] = useState<BodyStructure | undefined>();
    const [showDisplayModal, setShowDisplayModal] = useState<boolean>(false);
    // The record's practice context: its own body structures under a named practice; the empty state speaks for the whole record.
    const practiceView = useRecordPracticeView(bodyStructuresList, recordPracticeId);
    useRetireOnPracticeChange(() => { setShowDisplayModal(false); setSelectedbodyStructure(undefined); });

    const spacerMargin = '24px';

    const viewBodyStructure = (bodyStructure: BodyStructure) => {
        setSelectedbodyStructure(bodyStructure);
        setShowDisplayModal(true);
    };

    const editBodyStructure = (event: React.MouseEvent, bodyStructure: BodyStructure) => {
        event.stopPropagation();
        navigate(bodyStructure.id as string, { relative: 'route' });
    };

    const addBodyStructure = () => {
        navigate('new', { relative: 'route' });
    };

    const isAuthorizedToEdit = () => {
        return userRole && [USER_ROLES.PRACTITIONER].includes(userRole as string);
    };

    const renderContent = () => {
        return (
            <>

                <ResourceListStatus
                    loading={loading}
                    error={error}
                    isEmpty={bodyStructuresList.length === 0}

                    /* - without this the empty message is a claim about the patient's
 record made before the server was ever asked. */
                    attempted={attempted}
                    resourceLabel="body structures"
                    emptyMessage="No body structures found."
                    onDismissError={clearError}
                />

                {loading ? (
                    <AppSpinner/>
                ) : (
                    <ScrollableTab>
                        <RecordPracticeNote view={practiceView} />
                        {practiceView.shown.length !== 0 && (
                            <ItemGroup isBordered isSeparated isRounded size='large'>
                                {practiceView.shown.map((bodyStructure: BodyStructure) => {

                                    return (
                                        <Item key={bodyStructure.id}
                                              onClick={() => viewBodyStructure(bodyStructure)}>
                                            <Flex>
                                                <FlexBlock>
                                                    <Flex align="center" justify="space-between">
                                                        <FlexItem>
                                                            <Text style={{ fontWeight: 500 }}>
                                                                {bodyStructure.description}
                                                            </Text>
                                                            <Text variant="muted" style={{ display: 'block' }}><SourcePractice resource={bodyStructure} /></Text>
                                                        </FlexItem>
                                                        {isAuthorizedToEdit() && (
                                                            <FlexItem>
                                                                <button
                                                                    type="button"
                                                                    className="btn btn-blue-ghost-sm"
                                                                    onClick={(event: React.MouseEvent) => editBodyStructure(event, bodyStructure)}
                                                                >
                                                                    <Pencil />
                                                                    Edit
                                                                </button>
                                                            </FlexItem>
                                                        )}
                                                    </Flex>
                                                </FlexBlock>
                                            </Flex>
                                        </Item>
                                    );
                                })}
                            </ItemGroup>
                        )}
                    </ScrollableTab>
                )}

                {/*{selectedbodyStructure && (*/}
                {/*    <FhirAllergyIntoleranceDisplay allergyIntolerance={selectedbodyStructure}*/}
                {/*                                   isOpen={showDisplayModal}*/}
                {/*                                   onClose={() => {*/}
                {/*                                       setShowDisplayModal(false);*/}
                {/*                                       setSelectedbodyStructure(undefined);*/}
                {/*                                   }}/>*/}
                {/*)}*/}
            </>
        );
    };

    const renderHeader = () => {
        return (
            <Flex align="center" justify="space-between">
                <FlexBlock>
                </FlexBlock>
                
                {isAuthorizedToEdit() && (
                    <FlexItem>
                        <button
                            type="button"
                            className="btn btn-blue"
                            onClick={addBodyStructure}
                        >
                            <Plus />
                            Add
                        </button>
                    </FlexItem>
                )}
            </Flex>
        );
    };

    return (
        <div style={{ height: '100%' }}>
            {renderHeader()}
            <Spacer margin={spacerMargin}/>
            {renderContent()}
        </div>
    );
}

export default BodyStructures;