import { s as styleInject, u as useViewHandler } from './index-bbdfb97a.js';
import 'react';
import { Rnd } from 'react-rnd';
import { jsxs, jsx } from 'react/jsx-runtime';
import '@babel/runtime/helpers/defineProperty';
import 'react-dynamic-multi-render';
import '@crystaldesign/diva-core';
import 'mobx-react-lite';
import '@babel/runtime/helpers/asyncToGenerator';
import '@babel/runtime/helpers/slicedToArray';
import '@babel/runtime/helpers/objectWithoutProperties';
import '@babel/runtime/regenerator';
import '@babel/runtime/helpers/classCallCheck';
import '@babel/runtime/helpers/createClass';
import '@babel/runtime/helpers/toConsumableArray';
import '@crystaldesign/diva-utils';
import 'mobx';
import '@crystaldesign/web-planner-logic';
import 'classnames';
import 'qrcode.react';
import '@babel/runtime/helpers/typeof';
import 'flat';
import 'react-switch';
import 'react-countup';

var container = "container-efJ5C";
var header = "header-1CJv0";
var headerTitle = "headerTitle-uXM2j";
var closeBtn = "closeBtn-5GDgH";
var body = "body-x-0by";
var bodyScroll = "bodyScroll-7BmZx";
var css_248z = ".container-efJ5C {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);\n  border-radius: 6px;\n  overflow: hidden;\n  background: #fff;\n  z-index: 1500;\n}\n\n.header-1CJv0 {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 12px;\n  background: #f3f3f3;\n  border-bottom: 1px solid #e0e0e0;\n  cursor: move;\n  flex-shrink: 0;\n}\n\n.headerTitle-uXM2j {\n  font-weight: 600;\n  font-size: 14px;\n}\n\n.closeBtn-5GDgH {\n  background: none;\n  border: none;\n  font-size: 20px;\n  line-height: 1;\n  cursor: pointer;\n  padding: 0 4px;\n  color: #666;\n}\n\n.closeBtn-5GDgH:hover {\n  color: #333;\n}\n\n.body-x-0by {\n  flex: 1 1 0;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.bodyScroll-7BmZx {\n  flex: 1 1 0;\n  min-height: 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n/* Dark mode – matches backoffice (portaled to body) */\nbody.darkmode .container-efJ5C {\n  background: rgb(20, 20, 20);\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);\n}\n\nbody.darkmode .header-1CJv0 {\n  background: rgb(30, 30, 30);\n  border-bottom-color: rgba(255, 255, 255, 0.12);\n  color: rgb(255, 255, 255);\n}\n\nbody.darkmode .headerTitle-uXM2j {\n  color: rgb(255, 255, 255);\n}\n\nbody.darkmode .closeBtn-5GDgH {\n  color: rgba(255, 255, 255, 0.65);\n}\n\nbody.darkmode .closeBtn-5GDgH:hover {\n  color: rgb(255, 255, 255);\n}\n\nbody.darkmode .body-x-0by {\n  background: rgb(20, 20, 20);\n  color: rgb(255, 255, 255);\n}\n";
styleInject(css_248z);

var SNAP_THRESHOLD = 24;

/** Snaps position to viewport edges when within threshold (dock-style snapping). */
function getSnappedBounds(x, y, width, height) {
  var vw = window.innerWidth;
  var vh = window.innerHeight;
  var nx = x;
  var ny = y;
  if (x <= SNAP_THRESHOLD) nx = 0;
  if (x + width >= vw - SNAP_THRESHOLD) nx = Math.max(0, vw - width);
  if (y <= SNAP_THRESHOLD) ny = 0;
  if (y + height >= vh - SNAP_THRESHOLD) ny = Math.max(0, vh - height);
  return {
    x: nx,
    y: ny
  };
}
/** Resize handle styles – positioned inside the container so they are not clipped by overflow:hidden. */
var resizeHandleStyles = {
  top: {
    top: 0,
    height: 12
  },
  right: {
    right: 0,
    left: 'auto',
    width: 12
  },
  bottom: {
    bottom: 0,
    top: 'auto',
    height: 12
  },
  left: {
    left: 0,
    width: 12
  },
  topRight: {
    top: 0,
    right: 0,
    left: 'auto',
    bottom: 'auto',
    width: 16,
    height: 16
  },
  bottomRight: {
    bottom: 0,
    right: 0,
    left: 'auto',
    top: 'auto',
    width: 16,
    height: 16
  },
  bottomLeft: {
    bottom: 0,
    left: 0,
    right: 'auto',
    top: 'auto',
    width: 16,
    height: 16
  },
  topLeft: {
    top: 0,
    left: 0,
    right: 'auto',
    bottom: 'auto',
    width: 16,
    height: 16
  }
};
var FloatingWindow = function FloatingWindow(_ref) {
  var windowType = _ref.windowType,
    title = _ref.title,
    bounds = _ref.bounds,
    children = _ref.children;
  var viewHandler = useViewHandler();
  var handleDragStop = function handleDragStop(_e, d) {
    var snapped = getSnappedBounds(d.x, d.y, bounds.width, bounds.height);
    viewHandler.wysiwygDebugState.updateWysiwygWindowBounds(windowType, snapped);
  };
  var handleResizeStop = function handleResizeStop(_e, _direction, ref, _delta, position) {
    var _ref$style$width, _ref$style$height;
    var width = parseInt((_ref$style$width = ref.style.width) !== null && _ref$style$width !== void 0 ? _ref$style$width : String(bounds.width), 10);
    var height = parseInt((_ref$style$height = ref.style.height) !== null && _ref$style$height !== void 0 ? _ref$style$height : String(bounds.height), 10);
    viewHandler.wysiwygDebugState.updateWysiwygWindowBounds(windowType, {
      x: position.x,
      y: position.y,
      width: width,
      height: height
    });
  };
  var handleClose = function handleClose() {
    viewHandler.wysiwygDebugState.removeWysiwygWindow(windowType);
  };
  return /*#__PURE__*/jsxs(Rnd, {
    position: {
      x: bounds.x,
      y: bounds.y
    },
    size: {
      width: bounds.width,
      height: bounds.height
    },
    onDragStop: function onDragStop(e, d) {
      return handleDragStop(e, d);
    },
    onResizeStop: handleResizeStop,
    dragHandleClassName: header,
    minWidth: 280,
    minHeight: 200,
    className: container,
    style: {
      display: 'flex',
      flexDirection: 'column'
    },
    bounds: "window",
    resizeHandleStyles: resizeHandleStyles,
    resizeHandleWrapperStyle: {
      zIndex: 1000
    },
    children: [/*#__PURE__*/jsxs("div", {
      className: header,
      children: [/*#__PURE__*/jsx("span", {
        className: headerTitle,
        children: title
      }), /*#__PURE__*/jsx("button", {
        type: "button",
        className: closeBtn,
        onClick: handleClose,
        "aria-label": "Close",
        children: "\xD7"
      })]
    }), /*#__PURE__*/jsx("div", {
      className: body,
      children: /*#__PURE__*/jsx("div", {
        className: bodyScroll,
        children: children
      })
    })]
  });
};

export { FloatingWindow as default };
