import { s as styleInject, u as useViewHandler, c as usePlannerUIHandler } from './index-bbdfb97a.js';
import { observer } from 'mobx-react-lite';
import { useRef, useEffect } from 'react';
import { jsxs, jsx } from 'react/jsx-runtime';
import '@babel/runtime/helpers/defineProperty';
import 'react-dynamic-multi-render';
import '@crystaldesign/diva-core';
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 wcConfiguratorGrid = "wcConfigurator-grid-DANlC";
var wcConfiguratorGrid2DCanvas = "wcConfigurator-grid-2D-canvas-kC0d5";
var grid2DBg = "Grid2D_BG-qKtq3";
var css_248z = ".wcConfigurator-grid-DANlC {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n}\n\n.wcConfigurator-grid-2D-canvas-kC0d5 {\n  width: 100% !important;\n  height: 100% !important;\n  position: absolute !important;\n}\n\n.wcConfigurator-grid-2D-canvas-kC0d5 {\n  z-index: 5;\n}\n\n.Grid2D_BG-qKtq3 {\n  background-repeat: repeat;\n  width: 100%;\n  height: 100%;\n  left: 0px;\n  top: 0px;\n  position: absolute;\n  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfdDAUQEiovM6IXAAAAGnRFWHRTb2Z0d2FyZQBQYWludC5ORVQgdjMuNS4xMUfzQjcAAAP7SURBVHhe7ZzZbtsKEEP7/38Yf0JWZEGWJxc0MMVAGFMUwN6rynw4DeA5kSkRUTBO7V8/Pz/nNZ6ensbHlzi97+9vyfv6+rp4W9xp1nF65eB8pnnndDqdU8hAChlIIQQlHHB6KYSghANOL4UQlHDA6aUQghIOOL0UQlDCAaeXQq5QFwZf11BOwu19fn5evC3uNOs4vXJwPtO8cykE8hG4v78fH98Lr6+vq9zd3eWWNbHrWxZQwgGnl0IISjjg9FIIQQkHnF4KISjhgNNLIQQlHHB6KYSghANOL4UQlHDA6d1sIRDXwAFxYIa63dbxpllH9ep5t7jTrOP0ysH5TPPOpRDIR2Dvm/rb29u4nXeyqV/B6ZUj/4RMgyVKOOD0UghBCQecXgohKOGA00shBCUccHophKCEA04vhRCUcMDppRCCEg44vZstBN/AqE1zmnXU7Va90KpXz/v4+DjOO2pGp1eOXAjkI/Dw8DA+vhewqa+RTf0KTq8c+SdkGixRwgGnl0IISjjg9FIIQQkHnF4KISjhgNNLIQQlHHB6KYSghANOL4UQlHDA6d1sIRDXqAOuoZyE26tNGIvhNO9kU/8P2fum/v7+fv74+KDklnWF//WWNQ2WKOGA00shBCUccHophKCEA04vhRCUcMDppRCCEg44vRRCUMIBp5dCCEo44PRuthB8A6M2zWnWUbdb9UKrXj3vFneadZxeOXIhkMPf5+XlZZVLIdOg8/z8fHlZYpp1VA/hVA//k2SagT5XTxq+4tXLMNOss8XD9ZlmnUP9DsH7Q6Z5p9xp1nF65ci3rGmwRAkHnN7WQra406yTQgZSCEEJB5xeCiEo4YDTSyEEJRxweimEoIQDTi+FEJRwwOmlkCvUhcHXNZSTcHt56WSn1Ba+V6YPClhyqFsWXp6Y5p1D3LKAEg44va2FbHGnWSeFDKQQghIOOL0UQlDCAaeXQghKOOD0UghBCQecXgohKOGA07vZQiCugQPiwAx1u63jTbOO6tXzbnGnWcfplYPzmeady/vUIR+B+vv2XsEHA0zbeedQt6xs6gNOb2shW9xp1kkhAymEoIQDTi+FEJRwwOmlEIISDji9FEJQwgGnl0IISjjg9G62EHwDozbNadZRt1v1QqtePa+yh6gZnV45SiGH2tT3/jf15cf5TeSWdQWnV458y5oGS5RwwOmlEIISDji9FEJQwgGnl0IISjjg9FIIQQkHnF4KISjhgNNLIQQlHHB6N1sIxDXqgGsoJ+H2ahNW3oWbTT38IR/xN/BP3LKmwRIlHHB6KYSghANOL4UQlHDA6aUQghIOOL0UQlDCAaeXQghKOOD0UghBCQec3s0Wgn/CXjidfwOJNZK+WhRfKgAAAABJRU5ErkJggg==');\n  /*background-image: url(\"images/Standard/grid_standard.png\");*/\n  background-size: 100px 100px;\n  z-index: 0;\n  /* zoom: 200%;*/\n}\n";
styleInject(css_248z);

var touchMoveDetected = false;
var Planner2DGrid = function Planner2DGrid(props) {
  var viewHandler = useViewHandler();
  var uiHandler = usePlannerUIHandler();
  var gridRef = useRef(null);
  useEffect(function () {
    if (!gridRef) return;
    viewHandler.productState.setPlanner2DGridElement(gridRef.current);
  }, [gridRef]);
  var on2DPlannerBGClick = function on2DPlannerBGClick(e) {
    viewHandler.viewPlannerHandler.onClearElementSelection();
    e.stopPropagation();
  };
  return /*#__PURE__*/jsxs("div", {
    ref: gridRef,
    className: wcConfiguratorGrid,
    id: "wcConfigurator-grid-container",
    style: {
      width: '100%',
      height: '100%',
      zIndex: 2,
      visibility: viewHandler.productState.doShowGrid ? 'visible' : 'hidden'
    },
    onClick: on2DPlannerBGClick,
    onTouchStart: function onTouchStart() {
      touchMoveDetected = false;
    },
    onTouchMove: function onTouchMove() {
      touchMoveDetected = true;
    },
    onTouchEnd: function onTouchEnd(e) {
      if (!touchMoveDetected) {
        on2DPlannerBGClick(e);
      }
      touchMoveDetected = false;
    },
    children: [/*#__PURE__*/jsx("canvas", {
      className: wcConfiguratorGrid2DCanvas,
      id: "wcConfigurator-grid-2D-canvas"
    }), /*#__PURE__*/jsx("div", {
      className: grid2DBg,
      style: {
        zoom: uiHandler.get2DGridBackgroundState().zoom,
        backgroundPosition: uiHandler.get2DGridBackgroundState().position.x + 'px ' + uiHandler.get2DGridBackgroundState().position.y + 'px'
      }
    })]
  });
};
var Planner2DGrid$1 = observer(Planner2DGrid);

export { Planner2DGrid$1 as default };
