import { jsx as _jsx } from "@emotion/react/jsx-runtime";
import { useCallback, useContext, useMemo, } from 'react';
import { useTranslation } from 'react-i18next';
import { getStatePath } from '../../utils/paths';
import { getIdByPath } from '../../../../../../../../../utils/get-id-by-path';
import { TreeCSS } from '../../editor.style';
import { useConfig } from '../../../../../../../../hooks';
import { Tree } from '../../../../../../../../components';
import { AnimationEditorContext } from '../../providers';
import { CHILDREN_FIELD_MAP } from '../../const';
import { parseTransitions, getSelectedPaths } from './utils';
export const List = () => {
    const { t } = useTranslation();
    const { path, inspectedEntity, inspectEntity, entitySelection, selectEntities, } = useContext(AnimationEditorContext);
    const statePath = getStatePath(inspectedEntity === null || inspectedEntity === void 0 ? void 0 : inspectedEntity.path);
    const transitionPath = (inspectedEntity === null || inspectedEntity === void 0 ? void 0 : inspectedEntity.type) === 'transition' ? inspectedEntity.path : undefined;
    const statesPath = useMemo(() => path.concat('states'), [path]);
    const transitionsPath = useMemo(() => statePath.concat('transitions'), [statePath]);
    const statesConfigs = useConfig(statesPath);
    const stateConfig = useConfig(statePath);
    const transitions = useConfig(transitionsPath);
    const statesNames = useMemo(() => statesConfigs.reduce((acc, item) => {
        acc[item.id] = item.name;
        return acc;
    }, {}), [statesConfigs]);
    const treeData = useMemo(() => parseTransitions(transitions, statePath, stateConfig.name, statesNames, t('components.animatable.editor.transition.unknown.state.title')), [transitions, statePath, stateConfig, statesNames]);
    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) === 'transition') {
            selectEntities([]);
            inspectEntity(undefined);
        }
    }, [inspectedEntity]);
    return (_jsx(Tree, { css: TreeCSS, treeData: treeData, selectedPaths: getSelectedPaths(entitySelection.paths), inspectedKey: transitionPath ? getIdByPath(transitionPath) : undefined, childrenFieldMap: CHILDREN_FIELD_MAP, onInspect: handleInspect, onSelect: handleSelect, onClickOutside: handleClickOutside, showIcon: false }));
};
