'use strict';
'use client';
import { c } from 'react/compiler-runtime';
import { jsx } from 'react/jsx-runtime';
import { useState, useEffect } from 'react';
import { WidthProvider, Responsive } from 'react-grid-layout';
import { cn } from '../../../fd-toolbox/lib/utils.js';
import { generateLayout, setupRowHeightListener, onLayoutChange } from './DynamicLayoutDragAndDrop.funcs.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
const ResponsiveReactGridLayout = WidthProvider(Responsive);
const defaultLayoutMargin = [14, 14];
function DynamicLayoutDragAndDrop(t0) {
  const $ = c(20);
  const {
    className,
    componentClassName,
    columns,
    containerPadding,
    containerMargin,
    children
  } = t0;
  let t1;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t1 = [];
    $[0] = t1;
  } else {
    t1 = $[0];
  }
  const [layout, setLayout] = useState(t1);
  const [rowHeight, setRowHeight] = useState(60);
  const margin = containerMargin ?? defaultLayoutMargin;
  const effectiveColumns = columns ?? 6;
  let t2;
  let t3;
  if ($[1] !== children || $[2] !== effectiveColumns) {
    t2 = () => {
      generateLayout(effectiveColumns, setLayout, children);
    };
    t3 = [effectiveColumns, children];
    $[1] = children;
    $[2] = effectiveColumns;
    $[3] = t2;
    $[4] = t3;
  } else {
    t2 = $[3];
    t3 = $[4];
  }
  useEffect(t2, t3);
  let t4;
  let t5;
  if ($[5] !== effectiveColumns || $[6] !== margin) {
    t4 = () => {
      setupRowHeightListener(effectiveColumns, setRowHeight, margin);
    };
    t5 = [effectiveColumns, margin];
    $[5] = effectiveColumns;
    $[6] = margin;
    $[7] = t4;
    $[8] = t5;
  } else {
    t4 = $[7];
    t5 = $[8];
  }
  useEffect(t4, t5);
  let t6;
  if ($[9] !== className || $[10] !== componentClassName || $[11] !== containerPadding || $[12] !== effectiveColumns || $[13] !== layout || $[14] !== margin || $[15] !== rowHeight) {
    let t7;
    if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
      t7 = (_, newLayouts) => onLayoutChange(newLayouts, setLayout);
      $[17] = t7;
    } else {
      t7 = $[17];
    }
    let t8;
    if ($[18] !== componentClassName) {
      t8 = item => jsx("div", {
        className: cn("cursor-grab overflow-hidden", componentClassName ?? "bg-background shadow"),
        children: item.element
      }, item.i);
      $[18] = componentClassName;
      $[19] = t8;
    } else {
      t8 = $[19];
    }
    t6 = jsx("div", {
      className: "select-none",
      style: {
        paddingBottom: rowHeight
      },
      children: jsx(ResponsiveReactGridLayout, {
        rowHeight,
        className: cn("relative [&_.react-grid-item]:transition-all[&_.cssTransforms]:transition-[transform,_width,_height][&_img]:pointer-events-none[&_img]:select-none[&_.resizing]:transition-none[&_.resizing]:z-[1][&_.resizing]:will-change-[width,_height][&_.react-grid-item.react-draggable-dragging]:transition-none[&_.react-grid-item.react-draggable-dragging]:z-[3][&_.react-grid-item.react-draggable-dragging]:will-change-transform[&_.dropping]:invisible[&_.react-grid-placeholder]:border-fd-accent[&_.react-grid-placeholder]:border[&_.react-grid-placeholder]:border-dashed[&_.react-grid-placeholder]:border-2[&_.react-grid-placeholder]:rounded[&_.react-grid-placeholder]:z-[2][&_.react-grid-placeholder]:select-none[&_.placeholder-resizing]:transition-none[&_.react-grid-item_>_.react-resizable-handle]:absolute[&_.react-grid-item_>_.react-resizable-handle]:size-0.9[&_.react-grid-item_>_.react-resizable-handle]:bottom-0[&_.react-grid-item_>_.react-resizable-handle]:right-0[&_.react-grid-item_>_.react-resizable-handle]:cursor-se-resize[&_.react-grid-item_>_.react-resizable-handle]:after:content-[url(/handle.svg)][&_.react-grid-item_>_.react-resizable-handle]:after:absolute[&_.react-grid-item_>_.react-resizable-handle]:after:size-0.9[&_.react-grid-item_>_.react-resizable-handle]:after:right-2[&_.react-grid-item_>_.react-resizable-handle]:after:bottom-0[&_.react-resizable-hide_>_.react-resizable-handle]:hidden", className),
        margin,
        cols: {
          xxs: effectiveColumns
        },
        breakpoints: {
          xxs: 0
        },
        containerPadding: containerPadding ?? [0, 0],
        layouts: {
          xxs: layout
        },
        measureBeforeMount: false,
        useCSSTransforms: true,
        preventCollision: false,
        onLayoutChange: t7,
        children: layout.map(t8)
      })
    });
    $[9] = className;
    $[10] = componentClassName;
    $[11] = containerPadding;
    $[12] = effectiveColumns;
    $[13] = layout;
    $[14] = margin;
    $[15] = rowHeight;
    $[16] = t6;
  } else {
    t6 = $[16];
  }
  return t6;
}
__name(DynamicLayoutDragAndDrop, "DynamicLayoutDragAndDrop");

export { DynamicLayoutDragAndDrop, ResponsiveReactGridLayout };
