import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { u as useViewHandler, c as usePlannerUIHandler } from './index-bbdfb97a.js';
import classnames from 'classnames';
import { observer } from 'mobx-react-lite';
import { useState } from 'react';
import { jsx, Fragment } 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/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 'qrcode.react';
import '@babel/runtime/helpers/typeof';
import 'flat';
import 'react-switch';
import 'react-countup';

var mouseDownDetected = false;
var polygonSelected = false;
var Outline3D = function Outline3D(_ref) {
  var items = _ref.items,
    plannerUIProps = _ref.plannerUIProps;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isDragging = _useState2[0],
    setIsDragging = _useState2[1];
  var viewHandler = useViewHandler();
  var plannerUIHandler = usePlannerUIHandler();
  if (viewHandler.uiState.isLoading) return /*#__PURE__*/jsx(Fragment, {});
  var on3DPlannerBGClick = function on3DPlannerBGClick(e) {
    viewHandler.viewPlannerHandler.onClearElementSelection();
  };
  var renderPolygon = function renderPolygon(item) {
    switch (item.elemState) {
      case 'selectable':
        return /*#__PURE__*/jsx("polygon", {
          onMouseUp: function onMouseUp(e) {
            polygonSelected = true;
            if (!isDragging) {
              var _item$clickFunction;
              (_item$clickFunction = item.clickFunction) === null || _item$clickFunction === void 0 || _item$clickFunction.call(item, item.setId, Number(item.elementId));
            }
          },
          onTouchEnd: function onTouchEnd(e) {
            polygonSelected = true;
            if (!isDragging) {
              var _item$clickFunction2;
              (_item$clickFunction2 = item.clickFunction) === null || _item$clickFunction2 === void 0 || _item$clickFunction2.call(item, item.setId, Number(item.elementId));
            }
          },
          onMouseEnter: function onMouseEnter() {
            if (!isDragging) plannerUIHandler.updateOnHoverOutline3D(true, item, 'PosNr');
          },
          onMouseLeave: function onMouseLeave() {
            plannerUIHandler.updateOnHoverOutline3D(false, item, 'PosNr');
          },
          points: item.polygonPoints,
          style: {
            zIndex: item.zIndex
          },
          className: classnames(item.type == 'Outline3D' ? plannerUIProps.classes.outline.outline3D.outlinePolygon : undefined, item.type == 'Outline3D_Contour' ? plannerUIProps.classes.outline.outline3D.outlinePolygonContours : undefined)
        }, item.key.toString());
      case 'selected':
        if (item.type == 'Outline3D_Contour') {
          return /*#__PURE__*/jsx("polygon", {
            points: item.polygonPoints,
            style: {
              zIndex: item.zIndex
            },
            className: classnames(plannerUIProps.classes.outline.outline3D.outlinePolygonContoursSel)
          }, item.key.toString());
        }
    }
    return '';
  };
  return /*#__PURE__*/jsx("svg", {
    onMouseDown: function onMouseDown(e) {
      mouseDownDetected = true;
      polygonSelected = false;
      setIsDragging(false);
    },
    onTouchStart: function onTouchStart(e) {
      mouseDownDetected = true;
      polygonSelected = false;
      setIsDragging(false);
    },
    onMouseMove: function onMouseMove(e) {
      if ((mouseDownDetected || viewHandler.viewPlannerHandler.getPlanner3DGridIsInTransformMode()) && !isDragging) {
        setIsDragging(true);
      }
    },
    onTouchMove: function onTouchMove(e) {
      if ((mouseDownDetected || viewHandler.viewPlannerHandler.getPlanner3DGridIsInTransformMode()) && !isDragging) {
        setIsDragging(true);
      }
    },
    onMouseUp: function onMouseUp(e) {
      if (!isDragging && !polygonSelected) {
        on3DPlannerBGClick();
      }
      mouseDownDetected = false;
    },
    onTouchEnd: function onTouchEnd(e) {
      if (!isDragging && !polygonSelected) {
        on3DPlannerBGClick();
      }
      mouseDownDetected = false;
    },
    ref: function ref(_ref2) {
      viewHandler.productState.setPlanner3DImageSvgArea(_ref2);
      //viewHandler.viewModel.htmlElementRefs.planner3DImageSvgArea = ref as any;
    },
    style: {
      zIndex: 100,
      touchAction: 'pan-x pan-y',
      height: '100%'
    },
    className: classnames(plannerUIProps.classes.outline.outline3D.outlineSVG),
    children: items.map(function (item, i) {
      return renderPolygon(item);
    })
  }, items.length > 0 ? items[0].key : Math.random());
};
var Outline3D$1 = observer(Outline3D);

export { Outline3D$1 as default };
