import { jsx as _jsx } from "@emotion/react/jsx-runtime";
import React, { Suspense } from 'react';
import { createComponent } from '@meta-ui/core';
import { getSlots } from '../_internal/Slot';
import { Type } from '@sinclair/typebox';
import { partial } from 'lodash-es';
const BaseGridLayout = React.lazy(() => import('../_internal/GridLayout'));
const GridLayout = ({ slotsMap, layout = [], gridCallbacks, component, }) => {
    const onDragStop = (gridCallbacks === null || gridCallbacks === void 0 ? void 0 : gridCallbacks.onDragStop)
        ? partial(gridCallbacks.onDragStop, component.id)
        : undefined;
    const onDrop = (gridCallbacks === null || gridCallbacks === void 0 ? void 0 : gridCallbacks.onDrop)
        ? partial(gridCallbacks.onDrop, component.id)
        : undefined;
    return (_jsx(Suspense, Object.assign({ fallback: null }, { children: _jsx(BaseGridLayout, Object.assign({ onDragStop: onDragStop, onDrop: onDrop, layout: layout }, { children: getSlots(slotsMap, 'content') }), void 0) }), void 0));
};
const PropsSchema = Type.Object({
    layout: Type.Array(Type.Object({
        x: Type.Number(),
        y: Type.Number(),
        w: Type.Number(),
        h: Type.Number(),
        i: Type.String(),
        isResizable: Type.Optional(Type.Boolean()),
    })),
});
export default Object.assign(Object.assign({}, createComponent({
    version: 'core/v1',
    metadata: {
        name: 'grid_layout',
        displayName: 'Grid Layout',
        description: 'drag and drop to layout in a grid',
        isDraggable: true,
        isResizable: true,
        exampleProperties: {
            layout: [],
        },
        exampleSize: [6, 6],
    },
    spec: {
        properties: PropsSchema,
        state: {},
        methods: [],
        slots: ['content'],
        styleSlots: [],
        events: [],
    },
})), { impl: GridLayout });
//# sourceMappingURL=GridLayout.js.map