import { jsx as _jsx } from "@emotion/react/jsx-runtime";
import { useCallback, useContext, useMemo, } from 'react';
import { useTranslation } from 'react-i18next';
import { getStatePath, getSubstatePath } from '../../utils/paths';
import { getIdByPath } from '../../../../../../../../../utils/get-id-by-path';
import { useConfig } from '../../../../../../../../hooks';
import { AnimationEditorContext } from '../../providers';
import { Tree } from '../../../../../../../../components';
import { CHILDREN_FIELD_MAP } from '../../const';
import { TreeCSS } from './state-list.style';
import { parseStates, getSelectedPaths } from './utils';
export const List = ({ onDrop }) => {
    const { t } = useTranslation();
    const { path, inspectedEntity, inspectEntity, selectEntities, entitySelection, } = useContext(AnimationEditorContext);
    const statePath = inspectedEntity ? getStatePath(inspectedEntity.path) : undefined;
    const substatePath = inspectedEntity ? getSubstatePath(inspectedEntity.path) : undefined;
    const initialStatePath = useMemo(() => path.concat('initialState'), [path]);
    const statesPath = useMemo(() => path.concat('states'), [path]);
    const initialState = useConfig(initialStatePath);
    const states = useConfig(statesPath);
    const treeData = useMemo(() => parseStates(states, path, initialState, t('components.animatable.editor.state.initial.title')), [states, initialState, path]);
    const handleInspect = useCallback((entityPath) => {
        inspectEntity(entityPath);
    }, [inspectEntity]);
    const handleSelect = useCallback((paths) => {
        selectEntities(paths);
    }, [selectEntities]);
    const handleClickOutside = useCallback(() => {
        if ((inspectedEntity === null || inspectedEntity === void 0 ? void 0 : inspectedEntity.type) === 'state' || (inspectedEntity === null || inspectedEntity === void 0 ? void 0 : inspectedEntity.type) === 'substate') {
            selectEntities([]);
            inspectEntity(undefined);
        }
    }, [inspectedEntity]);
    const selectedPath = substatePath !== null && substatePath !== void 0 ? substatePath : statePath;
    const selectedKey = selectedPath ? getIdByPath(selectedPath) : undefined;
    const inspectedKey = (inspectedEntity === null || inspectedEntity === void 0 ? void 0 : inspectedEntity.path) ? getIdByPath(inspectedEntity === null || inspectedEntity === void 0 ? void 0 : inspectedEntity.path) : undefined;
    const isInactive = selectedKey !== inspectedKey;
    return (_jsx(Tree, { css: TreeCSS(isInactive), treeData: treeData, selectedPaths: getSelectedPaths(entitySelection.paths, inspectedEntity), inspectedKey: selectedKey, childrenFieldMap: CHILDREN_FIELD_MAP, onInspect: handleInspect, onSelect: handleSelect, onClickOutside: handleClickOutside, showIcon: false, draggable: true, onDrop: onDrop }));
};
