import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useMemo, useCallback } from 'react';
import { Checkbox } from 'antd';
import { useConfig, useCommander } from '../../../../../hooks';
import { setValue } from '../../../../../commands';
import { MatrixStyled, MatrixRowStyled, MatrixHeaderRowStyled, MatrixLabelStyled, MatrixCellStyled, MatrixHeaderLabelStyled, MatrixSpacerCellStyled, } from './physics.style';
import { COLLISION_MATRIX_PATH, DEFAULT_LAYER } from './consts';
export const CollisionMatrixField = ({ layers }) => {
    const { dispatch } = useCommander();
    const matrix = useConfig(COLLISION_MATRIX_PATH);
    const formattedLayers = useMemo(() => [DEFAULT_LAYER, ...(layers !== null && layers !== void 0 ? layers : [])], [layers]);
    const columnLayers = useMemo(() => [...formattedLayers].reverse(), [formattedLayers]);
    const handleChange = useCallback((rowId, columnId, checked) => {
        dispatch(setValue(COLLISION_MATRIX_PATH, Object.assign(Object.assign({}, matrix), { [rowId]: Object.assign(Object.assign({}, matrix === null || matrix === void 0 ? void 0 : matrix[rowId]), { [columnId]: checked }), [columnId]: Object.assign(Object.assign({}, matrix === null || matrix === void 0 ? void 0 : matrix[columnId]), { [rowId]: checked }) })));
    }, [dispatch, matrix]);
    if (!formattedLayers.length) {
        return null;
    }
    return (_jsxs(MatrixStyled, { size: formattedLayers.length, children: [_jsxs(MatrixHeaderRowStyled, { children: [_jsx(MatrixLabelStyled, {}), columnLayers.map((layer) => (_jsx(MatrixHeaderLabelStyled, { children: layer.name }, layer.id)))] }), formattedLayers.map((rowLayer, rowIndex) => (_jsxs(MatrixRowStyled, { children: [_jsx(MatrixLabelStyled, { children: rowLayer.name }), columnLayers
                        .slice(0, formattedLayers.length - rowIndex)
                        .map((columnLayer) => {
                        var _a, _b;
                        return (_jsx(MatrixCellStyled, { children: _jsx(Checkbox, { title: `${rowLayer.name} ✕ ${columnLayer.name}`, checked: (_b = (_a = matrix === null || matrix === void 0 ? void 0 : matrix[rowLayer.id]) === null || _a === void 0 ? void 0 : _a[columnLayer.id]) !== null && _b !== void 0 ? _b : true, onChange: (event) => handleChange(rowLayer.id, columnLayer.id, event.target.checked) }) }, columnLayer.id));
                    }), columnLayers
                        .slice(formattedLayers.length - rowIndex)
                        .map((columnLayer) => (_jsx(MatrixSpacerCellStyled, {}, columnLayer.id)))] }, rowLayer.id)))] }));
};
