import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
import { s as styleInject, u as useViewHandler } from './index-bbdfb97a.js';
import { observer } from 'mobx-react-lite';
import 'react';
import classnames from 'classnames';
import { jsx } from 'react/jsx-runtime';

var wrapper = "wrapper-ME1ik";
var articleItem = "article-item-QRsJ3";
var mobile = "mobile-OaLLm";
var tablet = "tablet--AXuC";
var small = "small--NOHl";
var plus = "plus-V8-nJ";
var imageWrapper = "imageWrapper-ZyJki";
var sel = "sel-F3oym";
var wcImage = "wcImage-GmO2-";
var titleWrapper = "titleWrapper-Ai4x0";
var title = "title-mY2cN";
var trashIcon = "trash-icon-vdYHe";
var css_248z = "/*Size Normal */\n\n.wrapper-ME1ik {\n  display: flex;\n  flex-direction: row;\n  gap: 4px;\n  width: -moz-fit-content;\n  width: fit-content;\n  cursor: pointer;\n}\n\n.article-item-QRsJ3 {\n  border-radius: var(--globalBorderRadius);\n  position: relative;\n  z-index: 100;\n  transition: all 0.15s ease;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  width: 105px;\n  margin-top: 11px;\n}\n\n.mobile-OaLLm:not(.tablet--AXuC) .article-item-QRsJ3 {\n  width: 70px;\n}\n\n.small--NOHl.article-item-QRsJ3 {\n  width: 60px;\n}\n\n.mobile-OaLLm:not(.tablet--AXuC) .small--NOHl.article-item-QRsJ3 {\n  width: 46px;\n}\n\n.plus-V8-nJ {\n  position: relative;\n  z-index: 100;\n  transition: all 0.15s ease;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n  width: 38px;\n  height: 38px;\n  padding-bottom: 24px;\n}\n\n.mobile-OaLLm .plus-V8-nJ {\n  width: 28px;\n  height: 28px;\n}\n.tablet--AXuC .plus-V8-nJ {\n  width: 32px;\n  height: 32px;\n}\n.small--NOHl.plus-V8-nJ {\n  width: 30px;\n  height: 30px;\n  padding-bottom: 0px;\n}\n.mobile-OaLLm .small--NOHl.plus-V8-nJ {\n  width: 22px;\n  height: 22px;\n}\n.tablet--AXuC .small--NOHl.plus-V8-nJ {\n  width: 26px;\n  height: 26px;\n}\n\n.article-item-QRsJ3:active,\n.article-item-QRsJ3:hover,\n.plus-V8-nJ:hover,\n.plus-V8-nJ:active {\n  z-index: 200;\n  transition: 0.15s ease;\n}\n\n.imageWrapper-ZyJki {\n  border-radius: var(--globalBorderRadius);\n  border: 1px rgb(230, 230, 230) solid;\n  display: flex;\n  transition: 0.15s ease;\n  position: relative;\n}\n.article-item-QRsJ3:hover .imageWrapper-ZyJki,\n.plus-V8-nJ:hover .imageWrapper-ZyJki {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n  border: 1px var(--primaryColor) solid;\n  border: 1px var(--optionItemBorderSelColor, var(--primaryColor)) solid;\n}\n.sel-F3oym.article-item-QRsJ3:hover .imageWrapper-ZyJki,\n.plus-V8-nJ.sel-F3oym:hover .imageWrapper-ZyJki,\n.small--NOHl.sel-F3oym.article-item-QRsJ3:hover .imageWrapper-ZyJki {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n  border: 1px rgb(230, 230, 230) solid;\n}\n.sel-F3oym .imageWrapper-ZyJki,\n.small--NOHl.sel-F3oym .imageWrapper-ZyJki {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n}\n\n.wcImage-GmO2- {\n  width: calc(100% - 8px);\n  border: 4px white solid;\n  background-color: #fff;\n  border-radius: var(--globalBorderRadius);\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-drag: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n  transition: border 0.3s ease;\n  aspect-ratio: 1/1;\n  -o-object-fit: contain;\n     object-fit: contain;\n}\n\n.plus-V8-nJ .imageWrapper-ZyJki {\n  border-radius: 100%;\n  width: calc(100% - 2px);\n  height: calc(100% - 2px);\n}\n\n.plus-V8-nJ .wcImage-GmO2- {\n  width: calc(100% - 4px);\n  height: calc(100% - 4px);\n  border: 2px white solid;\n  border-radius: 100%;\n}\n\n.sel-F3oym .wcImage-GmO2-,\n.small--NOHl.sel-F3oym .wcImage-GmO2- {\n  border: 4px var(--primaryColor) solid;\n  border: 4px var(--optionItemBorderSelColor, var(--primaryColor)) solid;\n}\n\n.plus-V8-nJ.sel-F3oym .wcImage-GmO2-,\n.plus-V8-nJ.small--NOHl.sel-F3oym .wcImage-GmO2- {\n  border: 2px var(--primaryColor) solid;\n  border: 2px var(--optionItemBorderSelColor, var(--primaryColor)) solid;\n}\n\n.titleWrapper-Ai4x0 {\n  display: flex;\n  justify-content: center;\n  overflow: visible;\n  max-height: 32px;\n}\n\n.small--NOHl .titleWrapper-Ai4x0 {\n  opacity: 0;\n  display: none;\n}\n\n.title-mY2cN {\n  opacity: 1;\n  text-align: center;\n  width: 100%;\n  height: 32px;\n  min-height: -moz-fit-content;\n  min-height: fit-content;\n  max-height: -moz-fit-content;\n  max-height: fit-content;\n  font-size: 14px;\n  line-height: 16px;\n  overflow: hidden;\n  display: -webkit-box;\n  word-wrap: break-word;\n  -webkit-box-orient: vertical;\n  -webkit-hyphens: auto;\n  hyphens: auto;\n  -webkit-line-clamp: 2;\n  transition:\n    height 0.3s ease-out,\n    opacity 0.3s ease-out;\n}\n\n.mobile-OaLLm:not(.tablet--AXuC) .title-mY2cN {\n  font-size: 12px;\n  line-height: 14px;\n}\n\n.article-item-QRsJ3:hover .title-mY2cN,\n.article-item-QRsJ3:focus .title-mY2cN,\n.small--NOHl .article-item-QRsJ3:hover .title-mY2cN,\n.small--NOHl .article-item-QRsJ3:focus .title-mY2cN {\n  max-height: -moz-fit-content;\n  max-height: fit-content;\n  min-height: -moz-fit-content;\n  min-height: fit-content;\n  -webkit-line-clamp: 30;\n  width: 200px;\n  min-width: 200px;\n  z-index: 200;\n  background-color: var(--settingsBackgroundColor);\n  border-bottom-left-radius: var(--globalBorderRadius);\n  border-bottom-right-radius: var(--globalBorderRadius);\n  transition: height 0.3s ease-in;\n}\n\n.small--NOHl .title-mY2cN {\n  font-size: 12px;\n  height: 15px;\n  -webkit-line-clamp: 1;\n}\n\n.small--NOHl .titleWrapper-Ai4x0 {\n  max-height: 14px;\n}\n\n.trash-icon-vdYHe {\n  position: absolute;\n  top: -6px;\n  right: -6px;\n  width: 24px;\n  height: 24px;\n  background-color: #dfdfdf;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  --trash-color: #777;\n  opacity: 0;\n  transition:\n    opacity 0.3s ease,\n    fill 0.3s ease,\n    background-color 0.3s ease;\n  cursor: pointer;\n  pointer-events: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.mobile-OaLLm:not(.tablet--AXuC) .trash-icon-vdYHe {\n  width: 18px;\n  height: 18px;\n  top: -4px;\n}\n\n.sel-F3oym .trash-icon-vdYHe {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.article-item-QRsJ3.small--NOHl .trash-icon-vdYHe {\n  opacity: 0;\n  pointer-events: none;\n}\n\n.wrapper-ME1ik:not(.mobile-OaLLm) .article-item-QRsJ3:hover .trash-icon-vdYHe,\n.wrapper-ME1ik:not(.mobile-OaLLm) .small--NOHl.article-item-QRsJ3:hover .trash-icon-vdYHe {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.mobile-OaLLm:not(.tablet--AXuC) .sel-F3oym.article-item-QRsJ3:hover .trash-icon-vdYHe {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.trash-icon-vdYHe:hover {\n  background-color: rgb(226, 106, 106);\n  --trash-color: #fff;\n}\n";
styleInject(css_248z);

var addElementImage = "data:image/svg+xml,%3Csvg%20width%3D%2222%22%20height%3D%2222%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M11.1518%2021.4198C17.064%2021.4198%2021.8568%2016.627%2021.8568%2010.7148C21.8568%204.80262%2017.064%200.00982666%2011.1518%200.00982666C5.23957%200.00982666%200.446777%204.80262%200.446777%2010.7148C0.446777%2016.627%205.23957%2021.4198%2011.1518%2021.4198Z%22%20fill%3D%22%23F2F2F2%22%2F%3E%3Cpath%20d%3D%22M11.2469%205.00983V16.6098%22%20stroke%3D%22%234A4A4A%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M5.44678%2010.8097H17.0468%22%20stroke%3D%22%234A4A4A%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E";

var AddElement = function AddElement(_ref) {
  var _viewHandler$settings;
  _objectDestructuringEmpty(_ref);
  var viewHandler = useViewHandler();
  var isSelected = ((_viewHandler$settings = viewHandler.settingsState.addElementSelected) === null || _viewHandler$settings === void 0 ? void 0 : _viewHandler$settings.mode) == 'add' || Object.keys(viewHandler.settingsState.articleInfos).length == 0;
  var onClick = function onClick() {
    var elements = viewHandler.paletteViewHandler.planner2Dot0Items.getAllItems();
    var incompleteElement = elements.find(function (p) {
      return p.incomplete;
    });
    var selectedElement = elements.find(function (p) {
      var _viewHandler$settings2;
      return p.basketId == ((_viewHandler$settings2 = viewHandler.settingsState.addElementSelected) === null || _viewHandler$settings2 === void 0 ? void 0 : _viewHandler$settings2.basketId);
    });
    viewHandler.paletteViewHandler.elementOverviewSelectionChanged(true, incompleteElement, selectedElement, 'add');
    if ((incompleteElement === null || incompleteElement === void 0 ? void 0 : incompleteElement.id) === undefined) viewHandler.viewPlannerHandler.onClearElementSelection();else viewHandler.viewPlannerHandler.onElementSelected(incompleteElement.setId, incompleteElement === null || incompleteElement === void 0 ? void 0 : incompleteElement.id);
  };
  return /*#__PURE__*/jsx("div", {
    className: classnames(wrapper, viewHandler.getIsInMobileView() ? mobile : undefined, viewHandler.uiState.isTablet ? tablet : undefined),
    children: /*#__PURE__*/jsx("div", {
      id: 'add',
      className: classnames(plus, viewHandler.settingsState.isScrollingDown ? small : undefined, isSelected ? sel : undefined),
      onClick: onClick,
      children: /*#__PURE__*/jsx("div", {
        className: classnames(imageWrapper),
        children: /*#__PURE__*/jsx("img", {
          className: classnames(wcImage),
          src: addElementImage
        })
      })
    })
  });
};
var AddElement$1 = observer(AddElement);

var index = /*#__PURE__*/Object.freeze({
  __proto__: null,
  'default': AddElement$1
});

export { AddElement$1 as A, articleItem as a, sel as b, title as c, trashIcon as d, wrapper as e, tablet as f, index as g, imageWrapper as i, mobile as m, small as s, titleWrapper as t, wcImage as w };
