import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useMemo, useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { v4 as uuidv4 } from 'uuid';
import { DndContext, DragOverlay, KeyboardSensor, PointerSensor, useSensor, useSensors, } from '@dnd-kit/core';
import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, arrayMove, } from '@dnd-kit/sortable';
import { Widget } from '../../../components/widget';
import { EntityMultiselect } from '../../../components/entity-picker';
import { useConfig, useCommander, useBehaviors } from '../../../../../hooks';
import { addValue, setValue } from '../../../../../commands';
import { DraggableEffectPanel } from './draggable-effect-panel';
import { DragOverlayEntry } from './drag-overlay-entry';
import { BEHAVIOR_TYPE } from './consts';
import { RendererStyled, EntityPickerCSS, SectionHeaderStyled, } from './renderer.style';
export const RendererWidget = ({ path, fields }) => {
    var _a;
    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
        coordinateGetter: sortableKeyboardCoordinates,
    }));
    const { t } = useTranslation();
    const { dispatch } = useCommander();
    const effects = useBehaviors(BEHAVIOR_TYPE);
    const [activeEntry, setActiveEntry] = useState();
    const filterEffectsPath = useMemo(() => path.concat('filterEffects'), [path]);
    const selectedEffects = (_a = useConfig(filterEffectsPath)) !== null && _a !== void 0 ? _a : [];
    const effectsIds = useMemo(() => selectedEffects.map((effect) => effect.id), [selectedEffects]);
    const availableEffects = useMemo(() => {
        return Object.keys(effects !== null && effects !== void 0 ? effects : {}).map((key) => ({
            label: key,
            value: key,
        }));
    }, [effects]);
    const handleAddEffect = useCallback((name) => {
        var _a, _b, _c;
        dispatch(addValue(filterEffectsPath, {
            id: uuidv4(),
            name,
            options: (_c = (_b = effects === null || effects === void 0 ? void 0 : (_a = effects[name]).getInitialState) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : {},
        }));
    }, [dispatch, filterEffectsPath, effects]);
    const handleCreate = useCallback((name, filepath) => {
        window.electron.createBehavior(name, filepath, BEHAVIOR_TYPE);
    }, []);
    const handleDragStart = useCallback((event) => {
        setActiveEntry(selectedEffects.find((entry) => entry.id === event.active.id));
    }, [selectedEffects, dispatch, filterEffectsPath]);
    const handleDragEnd = useCallback((event) => {
        const { active, over } = event;
        setActiveEntry(null);
        if (!over || active.id === (over === null || over === void 0 ? void 0 : over.id)) {
            return;
        }
        const activeEntryIndex = selectedEffects.findIndex((entry) => entry.id === active.id);
        const overEntryIndex = selectedEffects.findIndex((entry) => entry.id === over.id);
        dispatch(setValue(filterEffectsPath, arrayMove(selectedEffects, activeEntryIndex, overEntryIndex)));
    }, [selectedEffects]);
    return (_jsxs(RendererStyled, { children: [(fields === null || fields === void 0 ? void 0 : fields.length) ? _jsx(Widget, { fields: fields, path: path }) : null, _jsx(SectionHeaderStyled, { children: t('systems.renderer.filterEffect.title') }), _jsx("div", { children: _jsxs(DndContext, { sensors: sensors, onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: [_jsx(SortableContext, { items: effectsIds, strategy: verticalListSortingStrategy, children: selectedEffects.map(({ id, name }) => (_jsx(DraggableEffectPanel, { id: id, path: filterEffectsPath, schema: effects === null || effects === void 0 ? void 0 : effects[name] }, id))) }), _jsx(DragOverlay, { children: activeEntry ? (_jsx(DragOverlayEntry, { id: activeEntry.id, path: filterEffectsPath, schema: effects === null || effects === void 0 ? void 0 : effects[activeEntry.name] })) : null })] }) }), _jsx(EntityMultiselect, { css: EntityPickerCSS, size: "small", placeholder: t('systems.renderer.filterEffect.addNew.title'), options: availableEffects, type: BEHAVIOR_TYPE, onAdd: handleAddEffect, onCreate: handleCreate })] }));
};
