import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useEffect, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { Button } from 'antd';
import { v4 as uuidv4 } from 'uuid';
import { useConfig, useCommander } from '../../../../../hooks';
import { addValue, setValue } from '../../../../../commands';
import { getUniqueName } from '../../../../../../utils/get-unique-name';
import { CollapsePanel } from '../../../components/collapse-panel';
import { CollisionLayerField } from './collision-layer';
import { CollisionMatrixField } from './collision-matrix';
import { SectionHeaderStyled, LayersStyled, ButtonCSS, EmptyPlaceholderStyled, } from './physics.style';
import { PHYSICS_SETTINGS_PATH, DEFAULT_LAYER, DEFAULT_LAYER_ID, } from './consts';
export const PhysicsWidget = () => {
    const { t } = useTranslation();
    const { dispatch } = useCommander();
    const settings = useConfig(PHYSICS_SETTINGS_PATH);
    useEffect(() => {
        if (settings) {
            return;
        }
        dispatch(addValue(['globalOptions'], {
            name: 'physics',
            options: {
                collisionLayers: [],
                collisionMatrix: { [DEFAULT_LAYER_ID]: { [DEFAULT_LAYER_ID]: true } },
            },
        }));
    }, [settings]);
    const updatePhysics = useCallback((newLayers) => {
        if (!settings) {
            return;
        }
        const { collisionMatrix } = settings;
        const formattedNewLayers = [DEFAULT_LAYER, ...newLayers];
        dispatch(setValue(PHYSICS_SETTINGS_PATH, {
            collisionLayers: newLayers,
            collisionMatrix: formattedNewLayers.reduce((rows, rowLayer) => {
                return Object.assign(Object.assign({}, rows), { [rowLayer.id]: formattedNewLayers.reduce((columns, columnLayer) => {
                        var _a, _b;
                        return Object.assign(Object.assign({}, columns), { [columnLayer.id]: (_b = (_a = collisionMatrix[rowLayer.id]) === null || _a === void 0 ? void 0 : _a[columnLayer.id]) !== null && _b !== void 0 ? _b : true });
                    }, {}) });
            }, {}),
        }));
    }, [dispatch, settings]);
    const handleAddNewLayer = useCallback(() => {
        if (!settings) {
            return;
        }
        const { collisionLayers } = settings;
        const newLayers = [
            ...collisionLayers,
            {
                id: uuidv4(),
                name: getUniqueName('layer', collisionLayers),
            },
        ];
        updatePhysics(newLayers);
    }, [dispatch, settings, updatePhysics]);
    const handleDeleteLayer = useCallback((id) => {
        if (!settings) {
            return;
        }
        const { collisionLayers } = settings;
        const newLayers = collisionLayers.filter((layer) => layer.id !== id);
        updatePhysics(newLayers);
    }, [dispatch, settings, updatePhysics]);
    return (_jsxs(CollapsePanel, { title: t('globalOptions.physics.title'), deletable: false, children: [_jsx(SectionHeaderStyled, { children: t('globalOptions.physics.collisionLayers.title') }), (settings === null || settings === void 0 ? void 0 : settings.collisionLayers.length) ? (_jsx(LayersStyled, { children: settings === null || settings === void 0 ? void 0 : settings.collisionLayers.map((layer, index) => (_jsx(CollisionLayerField, { id: layer.id, index: index, onDelete: handleDeleteLayer }, layer.id))) })) : (_jsx(EmptyPlaceholderStyled, { children: t('globalOptions.physics.collisionLayers.empty.placeholder') })), _jsx(Button, { css: ButtonCSS, size: "small", onClick: handleAddNewLayer, children: t('globalOptions.physics.collisionLayers.addNew.title') }), _jsx(SectionHeaderStyled, { children: t('globalOptions.physics.collisionMatrix.title') }), _jsx(CollisionMatrixField, { layers: settings === null || settings === void 0 ? void 0 : settings.collisionLayers })] }));
};
