import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { u as useViewHandler, G as GenericToolTip } from './index-bbdfb97a.js';
import 'react';
import { observer } from 'mobx-react-lite';
import classnames from 'classnames';
import InfoIcon from './index-04a7a9b4.js';
import { A as AddElement, a as articleItem, s as small, b as sel, i as imageWrapper, w as wcImage, t as titleWrapper, c as title, d as trashIcon, e as wrapper, m as mobile, f as tablet } from './index-10d8be2f.js';
import { useHover, useLayer } from 'react-laag';
import { useDivaCore } from '@crystaldesign/diva-core';
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
import 'react-dynamic-multi-render';
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';
import '@babel/runtime/helpers/objectDestructuringEmpty';

function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var PlannerOverviewItem = function PlannerOverviewItem(_ref) {
  var _viewHandler$settings, _viewHandler$settings2, _renderLayer, _item$longDescription;
  var itemP = _ref.item;
  var item = itemP;
  var viewHandler = useViewHandler();
  var _useDivaCore = useDivaCore(),
    _useDivaCore$state$di = _useDivaCore.state.dimensions,
    isMobile = _useDivaCore$state$di.isMobile,
    isTablet = _useDivaCore$state$di.isTablet;
  var isSelected = item.basketId == ((_viewHandler$settings = viewHandler.settingsState.addElementSelected) === null || _viewHandler$settings === void 0 ? void 0 : _viewHandler$settings.basketId) && ((_viewHandler$settings2 = viewHandler.settingsState.addElementSelected) === null || _viewHandler$settings2 === void 0 ? void 0 : _viewHandler$settings2.mode) != 'add';
  var onClick = function onClick() {
    viewHandler.viewPlannerHandler.onElementSelected(item.setId, item.id);
    viewHandler.paletteViewHandler.elementOverviewSelectionChanged(true, undefined, item, 'replace', true);
  };

  /* tool tip stuff*/
  var triggerProps = {};
  var layerProps = {};
  var renderLayer = undefined;
  var isOver = false;
  var hoverProps = {};
  var hover = useHover({
    delayEnter: 2000,
    hideOnScroll: true
  });
  var tooltip = useLayer({
    isOpen: hover[0],
    auto: true,
    placement: viewHandler.getViewConfig().tooltipPosition || 'left-center'
  });
  if (!isMobile && !isTablet && !viewHandler.getViewConfig().hideTooltip && !item.contentItemId) {
    isOver = hover[0];
    hoverProps = hover[1];
    triggerProps = tooltip.triggerProps;
    layerProps = tooltip.layerProps;
    renderLayer = tooltip.renderLayer;
  }
  var isSmall = viewHandler.settingsState.isScrollingDown;
  if (item.basketId == 'add') {
    return /*#__PURE__*/jsx(AddElement, {
      item: item
    });
  }
  if (item.isAccessoire) {
    return /*#__PURE__*/jsx(Fragment, {});
  }
  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread(_objectSpread({
    className: classnames(wrapper, viewHandler.getIsInMobileView() ? mobile : undefined, viewHandler.uiState.isTablet ? tablet : undefined),
    onClick: onClick
  }, triggerProps), hoverProps), {}, {
    children: /*#__PURE__*/jsxs("div", {
      id: item.basketId,
      className: classnames(articleItem, isSmall ? small : undefined, isSelected ? sel : undefined),
      children: [/*#__PURE__*/jsxs("div", {
        className: classnames(imageWrapper),
        children: [item.image && /*#__PURE__*/jsx("img", {
          className: classnames(wcImage),
          src: item.image.replace('_gal', '').replace('_low', '')
        }), item.contentItemId && /*#__PURE__*/jsx(InfoIcon, {
          item: item,
          style: _objectSpread({
            bottom: isSmall ? '-1px' : '-7px',
            right: '-8px'
          }, isSmall ? {
            '--infoIconSize': '16px'
          } : {})
        }, item.codex)]
      }), /*#__PURE__*/jsx("div", {
        className: titleWrapper,
        children: /*#__PURE__*/jsx("div", {
          className: title,
          dangerouslySetInnerHTML: {
            __html: item.title
          }
        })
      }), isOver && ((_renderLayer = renderLayer) === null || _renderLayer === void 0 ? void 0 : _renderLayer(/*#__PURE__*/jsx(GenericToolTip, {
        text: (_item$longDescription = item.longDescription) !== null && _item$longDescription !== void 0 ? _item$longDescription : item.title,
        codex: item.articleCodex,
        image: item.image,
        layerProps: layerProps,
        price: item.price
      }, item.codex))), /*#__PURE__*/jsx("div", {
        className: trashIcon,
        onClick: function onClick(e) {
          e.stopPropagation();
          viewHandler.viewPlannerHandler.onElementDeleted(item.setId, item.id);
        },
        children: /*#__PURE__*/jsx("svg", {
          xmlns: "http://www.w3.org/2000/svg",
          width: viewHandler.getIsInMobileView() ? '12' : '15',
          height: viewHandler.getIsInMobileView() ? '12' : '15',
          viewBox: "0 -960 960 960",
          fill: "var(--trash-color)",
          children: /*#__PURE__*/jsx("path", {
            d: "m249-207-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z"
          })
        })
      })]
    })
  }));
};
var PlannerOverviewItem$1 = observer(PlannerOverviewItem);

export { PlannerOverviewItem$1 as default };
