import { s as styleInject, u as useViewHandler } from './index-bbdfb97a.js';
import 'react';
import Dropdown from 'react-dropdown';
import { useTranslation } from '@crystaldesign/diva-core';
import classnames from 'classnames';
import Arrow from './index-69271b96.js';
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import '@babel/runtime/helpers/defineProperty';
import 'react-dynamic-multi-render';
import 'mobx-react-lite';
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 wcColorFilterItem = "wcColorFilterItem-xQqck";
var mobile = "mobile-LQxjP";
var tablet = "tablet-IHhtG";
var dropdownRoot = "Dropdown-root-BjRjC";
var dropdownControl = "Dropdown-control-8aQx0";
var wrapper = "wrapper-T-b-1";
var css_248z = ".wcColorFilterItem-xQqck {\n  width: 18px;\n  height: 18px;\n  border-radius: 9px;\n  display: block;\n  float: left;\n  margin-top: 1px;\n  margin-right: 6px;\n  font-size: 14px;\n  color: #333;\n}\n\n.mobile-LQxjP:not(.tablet-IHhtG) .wcColorFilterItem-xQqck {\n  font-size: 12px;\n}\n\n.Dropdown-root-BjRjC {\n  float: right;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);\n  width: 140px;\n  min-width: 100px;\n}\n\n.mobile-LQxjP:not(.tablet-IHhtG) .Dropdown-root-BjRjC {\n  width: 120px;\n}\n\n.Dropdown-control-8aQx0 {\n  border-radius: var(--globalBorderRadius);\n  border-color: white;\n  padding: 2px 12px 3px 10px;\n  line-height: 20.8px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0.1px;\n  color: var(--secondaryColor);\n}\n\n.wrapper-T-b-1 .Dropdown-root {\n  position: relative;\n}\n\n.wrapper-T-b-1 .Dropdown-control {\n  position: relative;\n  overflow: hidden;\n  box-sizing: border-box;\n  color: #333;\n  cursor: default;\n  outline: none;\n  padding: 2px 24px 2px 10px;\n  transition: all 200ms ease;\n  background-color: #fff;\n  border-radius: var(--globalBorderRadius);\n  font-size: 14px;\n}\n\n.mobile-LQxjP .Dropdown-control {\n  font-size: 12px;\n}\n\n.tablet-IHhtG .Dropdown-control {\n  font-size: 15px;\n}\n\n.wrapper-T-b-1 .Dropdown-control:hover {\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);\n}\n\n.wrapper-T-b-1 .Dropdown-arrow {\n  border-color: #999 transparent transparent;\n  border-style: solid;\n  border-width: 5px 5px 0;\n  content: ' ';\n  display: block;\n  height: 0;\n  margin-top: -ceil(2.5);\n  position: absolute;\n  right: 8px;\n  top: 7px;\n  width: 0;\n}\n\n.wrapper-T-b-1 .is-open .Dropdown-arrow {\n  border-color: transparent transparent #999;\n  border-width: 0 5px 5px;\n}\n\n.wrapper-T-b-1 .Dropdown-menu {\n  background-color: white;\n  box-sizing: border-box;\n  margin-top: -1px;\n  border: 1px solid #ddd;\n  max-height: 200px;\n  overflow-y: auto;\n  position: absolute;\n  top: 100%;\n  width: 100%;\n  z-index: 1000;\n  -webkit-overflow-scrolling: touch;\n}\n\n.wrapper-T-b-1 .Dropdown-menu .Dropdown-group > .Dropdown-title {\n  padding: 8px 10px;\n  color: rgba(51, 51, 51, 1);\n  font-weight: 300;\n  text-transform: capitalize;\n}\n\n.wrapper-T-b-1 .Dropdown-option {\n  box-sizing: border-box;\n  color: rgba(51, 51, 51, 0.8);\n  cursor: pointer;\n  display: block;\n  padding: 8px 10px;\n}\n\n.wrapper-T-b-1 .Dropdown-option:last-child {\n  border-bottom-right-radius: 2px;\n  border-bottom-left-radius: 2px;\n}\n\n.wrapper-T-b-1 .Dropdown-option:hover {\n  background-color: #f2f9fc;\n}\n\n.wrapper-T-b-1 .Dropdown-option.is-selected {\n  background-color: #f2f9fc;\n  color: #333;\n}\n\n.wrapper-T-b-1 .Dropdown-noresults {\n  box-sizing: border-box;\n  color: #ccc;\n  cursor: default;\n  display: block;\n  padding: 8px 10px;\n}\n";
styleInject(css_248z);

var RalDropdownFilter = function RalDropdownFilter(_ref) {
  var _viewHandler$settings;
  var visibleColorItems = _ref.visibleColorItems,
    _ref$dropdownRootClas = _ref.dropdownRootClass,
    dropdownRootClass = _ref$dropdownRootClas === void 0 ? dropdownRoot : _ref$dropdownRootClas,
    deleteCurValue = _ref.deleteCurValue,
    id = _ref.id;
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var viewHandler = useViewHandler();
  var actValue = (_viewHandler$settings = viewHandler.settingsState.itemPalettes.get(id)) === null || _viewHandler$settings === void 0 ? void 0 : _viewHandler$settings.filterValue;
  var dropDownValues = visibleColorItems.map(function (item) {
    return {
      label: /*#__PURE__*/jsxs(Fragment, {
        children: [/*#__PURE__*/jsx("span", {
          className: wcColorFilterItem,
          style: {
            backgroundColor: item.rgb
          }
        }), " ", t('configurator.' + item.text)]
      }),
      text: item.text,
      value: item.text
    };
  });
  return /*#__PURE__*/jsx("div", {
    className: classnames(wrapper, viewHandler.uiState.isInMobileView ? mobile : undefined, viewHandler.uiState.isTablet ? tablet : undefined),
    "data-test-id": "ral-dropdown",
    children: /*#__PURE__*/jsx(Dropdown, {
      className: classnames(dropdownRootClass),
      controlClassName: dropdownControl,
      options: dropDownValues,
      value: actValue,
      onChange: function onChange(val) {
        return viewHandler.paletteViewHandler.onSelectFilter(id, val.value, 'RAL');
      },
      placeholder: t('configurator.colors'),
      arrowClosed: /*#__PURE__*/jsx(Arrow, {
        onClick: deleteCurValue,
        open: false,
        iconAsDelete: !!actValue
      }),
      arrowOpen: /*#__PURE__*/jsx(Arrow, {
        onClick: deleteCurValue,
        open: true,
        iconAsDelete: !!actValue
      })
    })
  });
};

export { RalDropdownFilter as default };
