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

var PosNr = function PosNr(_ref) {
  var rect = _ref.rect,
    item = _ref.item,
    onElement = _ref.onElement,
    plannerUIProps = _ref.plannerUIProps,
    hasTrash = _ref.hasTrash;
  var viewHandler = useViewHandler();
  var top = item.position.interpretation == 'percentage' ? rect.top + '%' : rect.top + 'px';
  if (hasTrash && rect.top < 4) top = 'calc(' + top + ' + 35px + var(--globalSize) / 2)'; // 35px space for trash icon
  else top = 'calc(' + top + ' + var(--globalSize) / 2)'; // correct for icon center
  if (item.posNr == undefined) return /*#__PURE__*/jsx(Fragment, {});
  return /*#__PURE__*/jsxs("div", {
    ref: function ref(elem) {
      return onElement(elem);
    },
    style: {
      left: item.position.interpretation == 'percentage' ? rect.left + '%' : rect.left,
      top: top,
      visibility: viewHandler.productState.isBoxPlanner ? 'hidden' : 'visible'
    },
    className: classnames(plannerUIProps.classes.buttonGeneral, plannerUIProps.classes.posNr.posNr, item.isDockedAccessoire ? plannerUIProps.classes.posNr.posNrAcc : undefined, item.elemState == 'selected' ? plannerUIProps.classes.posNr.posNrSelected : undefined, item.elemState == 'selectable' ? plannerUIProps.classes.posNr.posNrSelectable : undefined, item.elemState == 'unselectable' ? plannerUIProps.classes.posNr.posNrUnSelectable : undefined, item.posNr.toString().length > 1 ? plannerUIProps.classes.posNr.moreThanOneNr : undefined, item.onHover && item.elemState != 'unselectable' ? plannerUIProps.classes.posNr.posNrOnHover : undefined
    //TODO ADD wcPlanner_PosNr_Selectable_Area logic!
    ),
    children: [item.posNr, /*#__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));
      },
      style: {
        left: '0px',
        top: '0px',
        visibility: viewHandler.productState.isBoxPlanner ? 'hidden' : 'visible'
      },
      className: classnames(item.elemState == 'selectable' ? plannerUIProps.classes.posNr.posNrSelectableArea : undefined)
    })]
  });
};
var PosNr$1 = observer(PosNr);

export { PosNr$1 as default };
