import { useShellStore } from "../stores/shellStore.mjs";
import getWidgetLayout from "./getWidgetLayout.mjs";
import React, { useCallback, useEffect, useRef, useState } from "react";
import { makeStyles, useTheme } from "@material-ui/core";
import { v4 } from "uuid";
import { useDragLayer } from "react-dnd";
import { Responsive } from "react-grid-layout";
import { useMeasure } from "react-use";
import "react-grid-layout/css/styles.css";
import "react-resizable/css/styles.css";
//#region src/dashboard/DashboardCardGrid.jsx
const useStyle = makeStyles((theme) => ({
	root: {
		display: "flex",
		flexDirection: "column",
		width: "100%",
		flexGrow: 1,
		marginBottom: (props) => props?.disableMargin ? "" : theme.spacing(3)
	},
	autoHeightContainer: {
		height: "auto !important",
		display: "flex",
		flexWrap: "wrap",
		gap: `${theme.spacing(3)}px ${theme.spacing(3)}px`,
		"& > .react-grid-item": {
			position: "relative !important",
			top: "auto !important",
			left: "auto !important",
			transform: "none !important",
			height: "auto !important"
		}
	}
}), { name: "DashboardCardGrid" });
const DASHBOARD_WIDGET = Symbol("DASHBOARD_WIDGET");
const breakpoints = {
	xs: 0,
	xl: 1150
};
const breakpointCols = {
	xs: 4,
	xl: 4
};
/**
* Grid layout for dashboard cards
*/
const DashboardCardGrid = (props) => {
	const classes = useStyle(props);
	const { children, onCreateCard, gridProperties, autoHeight, ...other } = props;
	const { getWidget } = useShellStore();
	const rglRef = useRef();
	const [ref, { width }] = useMeasure();
	const theme = useTheme();
	const { droppingWidgetType } = useDragLayer((monitor) => {
		if (monitor.getItemType() === DASHBOARD_WIDGET) {
			const { id: wigetType } = monitor.getItem();
			return { droppingWidgetType: wigetType };
		}
		return { droppingWidgetType: null };
	});
	const [droppingItemLayout, setDroppingItemLayout] = useState(null);
	useEffect(() => {
		let isMounted = true;
		const resolveLayout = async (widgetDefPromise) => {
			try {
				const module = await widgetDefPromise;
				const layout = getWidgetLayout(module?.default || module);
				if (isMounted) setDroppingItemLayout({
					i: v4(),
					...layout
				});
			} catch (e) {
				console.error(`Error resolving layout for widget type "${droppingWidgetType}"`, e);
				const fallbackLayout = getWidgetLayout(null);
				if (isMounted) setDroppingItemLayout({
					i: v4(),
					...fallbackLayout
				});
			}
		};
		if (droppingWidgetType) {
			const res = getWidget(droppingWidgetType);
			if (res?.then) {
				setDroppingItemLayout(null);
				resolveLayout(res);
			} else {
				const layout_0 = getWidgetLayout(res);
				setDroppingItemLayout({
					i: v4(),
					...layout_0
				});
			}
		} else setDroppingItemLayout(null);
		return () => {
			isMounted = false;
		};
	}, [droppingWidgetType, getWidget]);
	const drag = useCallback((layout_1, oldLayoutItem, layoutItem, placeholder) => {}, []);
	const resize = useCallback((layout_2, oldLayoutItem_0, layoutItem_0, placeholder_0) => {
		if (layoutItem_0.w >= 6 && layoutItem_0.w < 8) {
			layoutItem_0.w = 4;
			placeholder_0.w = 4;
		}
	}, []);
	const drop = useCallback((layout_3, item) => {
		if (droppingWidgetType) {
			const { x, y, w, h } = item;
			const { breakpoint } = rglRef.current.state;
			if (onCreateCard) onCreateCard({
				widgetType: droppingWidgetType,
				id: v4(),
				layout: { [breakpoint]: {
					x,
					y,
					w,
					h
				} },
				params: []
			});
		}
	}, [droppingWidgetType, onCreateCard]);
	return /* @__PURE__ */ React.createElement("div", {
		ref,
		className: classes.root
	}, width ? /* @__PURE__ */ React.createElement(Responsive, {
		ref: rglRef,
		...other,
		width,
		breakpoints,
		cols: breakpointCols,
		rowHeight: 128,
		margin: [theme.spacing(3), theme.spacing(3)],
		containerPadding: [0, 0],
		draggableHandle: "[data-handle]",
		onDrag: drag,
		onResize: resize,
		onDrop: drop,
		isDroppable: gridProperties?.isDroppable || false,
		isDraggable: gridProperties?.isDraggable || false,
		droppingItem: droppingItemLayout,
		className: autoHeight ? classes.autoHeightContainer : "",
		style: autoHeight ? {} : { height: "100%" },
		useCSSTransforms: children[0]?.props?.params?.applyWidgetTransformStyling ?? true
	}, children) : null);
};
//#endregion
export { DashboardCardGrid as default };

//# sourceMappingURL=DashboardCardGrid.mjs.map