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';
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 imageItem = "image-item-NA3C7";
var sel = "sel-gUlno";
var css_248z = ".image-item-NA3C7 {\n  width: 30px;\n  height: 30px;\n  border-radius: 50%;\n  background-position: center;\n  background-size: cover;\n  background-repeat: no-repeat;\n  border: solid #f0f0f0 var(--galleryItemBorder);\n  margin: 10px 0;\n}\n\n.sel-gUlno {\n  margin: 8px 0;\n\n  border: solid var(--secondaryColor) 4px;\n}\n";
styleInject(css_248z);

var FilterItem = function FilterItem(_ref) {
  var _viewHandler$settings;
  var item = _ref.item,
    id = _ref.id;
  var viewHandler = useViewHandler();
  var actValue = (_viewHandler$settings = viewHandler.settingsState.itemPalettes.get(id)) === null || _viewHandler$settings === void 0 ? void 0 : _viewHandler$settings.filterValue;
  return /*#__PURE__*/jsx("span", {
    onClick: function onClick() {
      return viewHandler.paletteViewHandler.onSelectFilter(id, item.text, 'RAL');
    },
    style: {
      backgroundColor: item.rgb
    },
    className: classnames(imageItem, actValue === item.text ? sel : undefined)
  });
};
var FilterItem$1 = observer(FilterItem);

export { FilterItem$1 as default };
