import { jsx as _jsx } from "@emotion/react/jsx-runtime";
import RGL from 'react-grid-layout';
import { css } from '@emotion/react';
import { useResizeDetector } from 'react-resize-detector';
import 'react-grid-layout/css/styles.css';
import 'react-resizable/css/styles.css';
import { DROP_EXAMPLE_SIZE_PREFIX, GRID_HEIGHT } from '../../constants';
import { decodeDragDataTransfer } from '../../utils/encodeDragDataTransfer';
const GridLayout = props => {
    const { children } = props;
    const spacing = 10;
    const { width, ref } = useResizeDetector();
    const bgCss = css `
    height: 100%;
    background: white;
    background-image: linear-gradient(#eee 1px, transparent 0),
      linear-gradient(90deg, #eee 1px, transparent 0);
    background-size: ${(width || 0) / 12}px ${GRID_HEIGHT + spacing}px;
    background-position: 0px ${spacing / 2}px;
  `;
    const onDropDragOver = (e) => {
        const key = e.dataTransfer.types
            .map(decodeDragDataTransfer)
            .find(t => t.startsWith(DROP_EXAMPLE_SIZE_PREFIX));
        const componentSize = JSON.parse((key === null || key === void 0 ? void 0 : key.replace(DROP_EXAMPLE_SIZE_PREFIX, '')) || '');
        return { w: componentSize[0], h: componentSize[1] };
    };
    return (_jsx("div", Object.assign({ ref: ref, css: bgCss }, { children: _jsx(RGL, Object.assign({ cols: 12, compactType: null, preventCollision: true, rowHeight: GRID_HEIGHT, width: width || 0, margin: [spacing, spacing], isDroppable: true, onDropDragOver: onDropDragOver }, props, { children: children }), void 0) }), void 0));
};
export default GridLayout;
//# sourceMappingURL=GridLayout.js.map