import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import './index-bbdfb97a.js';
import classnames from 'classnames';
import { observer } from 'mobx-react-lite';
import { useState } from 'react';
import { Vector2 } from '@crystaldesign/web-planner-logic';
import { 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/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 'qrcode.react';
import '@babel/runtime/helpers/typeof';
import 'flat';
import 'react-switch';
import 'react-countup';

var mousePosOnScreenLastFrame = new Vector2(0, 0);
var Outline = function Outline(_ref) {
  var _item$size, _item$size2;
  var item = _ref.item,
    plannerUIProps = _ref.plannerUIProps;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isDragging = _useState2[0],
    setIsDragging = _useState2[1];
  var _useState3 = useState(item.position.x),
    _useState4 = _slicedToArray(_useState3, 2),
    posX = _useState4[0],
    setPosX = _useState4[1];
  var _useState5 = useState(item.position.y),
    _useState6 = _slicedToArray(_useState5, 2),
    posY = _useState6[0],
    setPosY = _useState6[1];
  var mouseDownDetected = false;

  //LOG.log("Set outline UI x: " + posX + ", y: " + posY);
  return /*#__PURE__*/jsx("div", {
    onClick: function onClick() {
      var _item$clickFunction;
      (_item$clickFunction = item.clickFunction) === null || _item$clickFunction === void 0 || _item$clickFunction.call(item, item.setId, Number(item.elementId));
    },
    onMouseDown: function onMouseDown(e) {
      mouseDownDetected = true;
      mousePosOnScreenLastFrame = new Vector2(e.clientX, e.clientY);
    },
    onTouchStart: function onTouchStart(e) {
      if (e.touches.length != 1) return;
      mouseDownDetected = true;
      mousePosOnScreenLastFrame = new Vector2(e.touches[0].clientX, e.touches[0].clientY);
    },
    onMouseMove: function onMouseMove(e) {
      if (mouseDownDetected && !isDragging) {
        var _item$onDragStartFunc;
        setIsDragging(true);
        (_item$onDragStartFunc = item.onDragStartFunction) === null || _item$onDragStartFunc === void 0 || _item$onDragStartFunc.call(item, item.setId, Number(item.elementId));
      }
      if (isDragging) {
        var _item$onDragMoveFunct;
        //item.position.x += e.clientX - mousePosOnScreenLastFrame.x;
        //item.position.y += e.clientY - mousePosOnScreenLastFrame.y;

        (_item$onDragMoveFunct = item.onDragMoveFunction) === null || _item$onDragMoveFunct === void 0 || _item$onDragMoveFunct.call(item, item.setId, Number(item.elementId), new Vector2(e.clientX - mousePosOnScreenLastFrame.x, e.clientY - mousePosOnScreenLastFrame.y));
        setPosX(posX + e.clientX - mousePosOnScreenLastFrame.x);
        setPosY(posY + e.clientY - mousePosOnScreenLastFrame.y);
        mousePosOnScreenLastFrame.x = e.clientX;
        mousePosOnScreenLastFrame.y = e.clientY;
      }
      mouseDownDetected = false;
    },
    onTouchMove: function onTouchMove(e) {
      if (e.touches.length != 1) return;
      if (mouseDownDetected && !isDragging) {
        var _item$onDragStartFunc2;
        setIsDragging(true);
        (_item$onDragStartFunc2 = item.onDragStartFunction) === null || _item$onDragStartFunc2 === void 0 || _item$onDragStartFunc2.call(item, item.setId, Number(item.elementId));
      }
      if (isDragging) {
        var _item$onDragMoveFunct2;
        //item.position.x += e.clientX - mousePosOnScreenLastFrame.x;
        //item.position.y += e.clientY - mousePosOnScreenLastFrame.y;

        (_item$onDragMoveFunct2 = item.onDragMoveFunction) === null || _item$onDragMoveFunct2 === void 0 || _item$onDragMoveFunct2.call(item, item.setId, Number(item.elementId), new Vector2(e.touches[0].clientX - mousePosOnScreenLastFrame.x, e.touches[0].clientY - mousePosOnScreenLastFrame.y));
        setPosX(posX + e.touches[0].clientX - mousePosOnScreenLastFrame.x);
        setPosY(posY + e.touches[0].clientY - mousePosOnScreenLastFrame.y);
        mousePosOnScreenLastFrame.x = e.touches[0].clientX;
        mousePosOnScreenLastFrame.y = e.touches[0].clientY;
      }
      mouseDownDetected = false;
    },
    onMouseUp: function onMouseUp() {
      if (isDragging) {
        var _item$onDragEndFuncti;
        setIsDragging(false);
        (_item$onDragEndFuncti = item.onDragEndFunction) === null || _item$onDragEndFuncti === void 0 || _item$onDragEndFuncti.call(item, item.setId, Number(item.elementId));
      }
      mouseDownDetected = false;
    },
    onTouchEnd: function onTouchEnd() {
      if (isDragging) {
        var _item$onDragEndFuncti2;
        setIsDragging(false);
        (_item$onDragEndFuncti2 = item.onDragEndFunction) === null || _item$onDragEndFuncti2 === void 0 || _item$onDragEndFuncti2.call(item, item.setId, Number(item.elementId));
      }
      mouseDownDetected = false;
    },
    style: {
      left: posX + 'px',
      top: posY + 'px',
      width: (item === null || item === void 0 || (_item$size = item.size) === null || _item$size === void 0 ? void 0 : _item$size.x) + 'px',
      height: (item === null || item === void 0 || (_item$size2 = item.size) === null || _item$size2 === void 0 ? void 0 : _item$size2.y) + 'px',
      transform: 'rotate(' + (item === null || item === void 0 ? void 0 : item.rotOfElement) + 'deg)'
    },
    className: classnames(isDragging ? plannerUIProps.classes.outline.outline2D.draggableActive : undefined, item.elemState == 'selected' ? plannerUIProps.classes.outline.outline2D.draggable : undefined, item.elemState == 'selectable' ? plannerUIProps.classes.outline.outline2D.selectable : undefined)
  });
};
var Outline$1 = observer(Outline);

export { Outline$1 as default };
