import { jsx as _jsx } from "@emotion/react/jsx-runtime";
import { useContext, useMemo, useCallback, } from 'react';
import { useTranslation } from 'react-i18next';
import { arrayMove } from '@dnd-kit/sortable';
import { EntityList } from '../entity-list';
import { SchemasContext } from '../../../../providers';
import { useConfig, useCommander } from '../../../../hooks';
import { setValue } from '../../../../commands';
export const SystemList = () => {
    const { t } = useTranslation();
    const { dispatch } = useCommander();
    const { systems: availableSystems } = useContext(SchemasContext);
    const systems = useConfig('systems');
    const addedSystems = useMemo(() => systems.reduce((acc, system) => acc.add(system.name), new Set()), [systems]);
    const handleDragEntity = useCallback((from, to) => {
        dispatch(setValue(['systems'], arrayMove(systems, from, to)));
    }, [systems, dispatch]);
    const handleCreate = useCallback((name, filepath) => {
        window.electron.createSystem(name, filepath);
    }, []);
    return (_jsx(EntityList, { entities: availableSystems, addedEntities: addedSystems, type: "system", placeholder: t('inspector.systemList.addNew.button.title'), draggable: true, onDragEntity: handleDragEntity, onCreate: handleCreate }));
};
