import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { useState, useEffect } from 'react';
import { LiveMapFiltersAdvanceFiltersWrapper, LiveMapFiltersAdvanceFiltersSectionContainer, LiveMapFiltersAdvanceFiltersSectionWrapper, LiveMapFiltersAdvanceFiltersSectionlabelContainer, LiveMapFiltersWrapper, LiveMapFiltersAccordionWrapper, LiveMapFiltersSectionWrapper, FilterSearch } from './style.js';
import { LiveMapFiltersAdvanceFiltersHeaderWrapper, AdvancedFiltersPaddingFix, LiveMapFiltersAdvanceFiltersSectionHeaderWrapper, LiveMapFiltersAdvanceFiltersSectionlabelWrapper, LiveMapFiltersHeaderWrapper, FiltersPaddingFix, LiveMapFiltersSectionHeaderWrapper, LiveMapFiltersAdvanceFiltersSettingsSectionWrapper, AdvancedFiltersFix } from '../../Typography/Paragraph/index.js';
import AccordionDropdown from '../Accordion/index.js';
import CustomDropdownCrossIcon from '../../Icons/CustomDropdownCrossIcon/index.js';
import CustomDropdownSettingsIcon from '../../Icons/CustomDropdownSettingsIcon/index.js';
import theme from '../../../Globals/theme.js';
import { ThemeProvider } from 'styled-components';
import globalStyle from '../../../Globals/global-styles.js';
import '@mui/material';
import '../../Icons/IconWrapper/index.js';
import '../../labels/Label/style.js';
import '../../Tooltip/Tooltip/index.js';
import '../../labels/RequiredLabel/style.js';
import '../../InputField/RequiredInputField/style.js';
import '../../InputField/RichTextEditorInputField/style.js';
import InputBase from '../../InputField/InputBase/index.js';
import Checkbox from '../../Checkbox/Checkbox/index.js';
import _ from 'lodash';

var Filters = function Filters(_ref) {
  var _ref$filterSections = _ref.filterSections,
      filterSections = _ref$filterSections === void 0 ? [] : _ref$filterSections,
      _ref$heading = _ref.heading,
      heading = _ref$heading === void 0 ? "Filters" : _ref$heading,
      _ref$containsAdvanceF = _ref.containsAdvanceFilters,
      containsAdvanceFilters = _ref$containsAdvanceF === void 0 ? false : _ref$containsAdvanceF,
      advancedFilters = _ref.advancedFilters,
      _ref$enableSearch = _ref.enableSearch,
      enableSearch = _ref$enableSearch === void 0 ? false : _ref$enableSearch,
      _ref$searchParams = _ref.searchParams,
      searchParams = _ref$searchParams === void 0 ? {
    placeholder: "Search",
    label: "Search",
    value: ""
  } : _ref$searchParams;

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      showAdvancedFilters = _useState2[0],
      setShowAdvancedFilters = _useState2[1];

  var toggle = function toggle() {
    return setShowAdvancedFilters(!showAdvancedFilters);
  };

  var _useState3 = useState(filterSections),
      _useState4 = _slicedToArray(_useState3, 2),
      filteredSections = _useState4[0],
      setFilteredSections = _useState4[1];

  var _useState5 = useState(searchParams.value),
      _useState6 = _slicedToArray(_useState5, 2),
      filterValue = _useState6[0],
      setFilterValue = _useState6[1];

  useEffect(function () {
    filteredItems();
  }, [filterValue]);

  var filteredItems = _.debounce(function () {
    setFilteredSections(filterSections.filter(function (section) {
      return section.heading === filterValue;
    }));
  });

  var search = function search(e) {
    var value = e.target.value;
    setFilterValue(value);
  };

  var renderAdvancedFilters = function renderAdvancedFilters() {
    return /*#__PURE__*/React__default.createElement(LiveMapFiltersAdvanceFiltersWrapper, null, /*#__PURE__*/React__default.createElement(LiveMapFiltersAdvanceFiltersHeaderWrapper, null, /*#__PURE__*/React__default.createElement(AdvancedFiltersPaddingFix, null, advancedFilters.heading, /*#__PURE__*/React__default.createElement(CustomDropdownCrossIcon, {
      onClick: toggle
    }))), /*#__PURE__*/React__default.createElement(LiveMapFiltersAdvanceFiltersSectionContainer, null, advancedFilters.sections.map(function (section, idx) {
      return /*#__PURE__*/React__default.createElement(LiveMapFiltersAdvanceFiltersSectionWrapper, {
        key: idx
      }, /*#__PURE__*/React__default.createElement(LiveMapFiltersAdvanceFiltersSectionHeaderWrapper, null, section.heading), section.component, /*#__PURE__*/React__default.createElement(LiveMapFiltersAdvanceFiltersSectionlabelContainer, null, /*#__PURE__*/React__default.createElement(LiveMapFiltersAdvanceFiltersSectionlabelWrapper, null, section.start_value), /*#__PURE__*/React__default.createElement(LiveMapFiltersAdvanceFiltersSectionlabelWrapper, null, section.end_value)));
    })));
  };

  var renderSectionFilters = function renderSectionFilters() {
    return /*#__PURE__*/React__default.createElement(LiveMapFiltersWrapper, null, /*#__PURE__*/React__default.createElement(LiveMapFiltersHeaderWrapper, null, /*#__PURE__*/React__default.createElement(FiltersPaddingFix, null, heading)), filterSections && Array.isArray(filterSections) ? filterSections.map(function (section, idx) {
      var _section$accordion, _section$accordion$fi;

      return section.accordion ? (_section$accordion = section.accordion) === null || _section$accordion === void 0 ? void 0 : (_section$accordion$fi = _section$accordion.filters) === null || _section$accordion$fi === void 0 ? void 0 : _section$accordion$fi.map(function (accordionSection, i) {
        return /*#__PURE__*/React__default.createElement(LiveMapFiltersAccordionWrapper, {
          key: i
        }, /*#__PURE__*/React__default.createElement(AccordionDropdown, {
          heading: accordionSection.heading,
          items: accordionSection.items
        }));
      }) : /*#__PURE__*/React__default.createElement(LiveMapFiltersSectionWrapper, {
        key: idx
      }, /*#__PURE__*/React__default.createElement(LiveMapFiltersSectionHeaderWrapper, null, section.heading), section.components.map(function (component, index) {
        return /*#__PURE__*/React__default.createElement(Checkbox, {
          onClick: component.onClick,
          label: component.label,
          key: index
        });
      }));
    }) : null, containsAdvanceFilters && /*#__PURE__*/React__default.createElement(LiveMapFiltersAdvanceFiltersSettingsSectionWrapper, null, /*#__PURE__*/React__default.createElement(AdvancedFiltersFix, null, "Advanced Filters", /*#__PURE__*/React__default.createElement(CustomDropdownSettingsIcon, {
      onClick: toggle
    }))));
  };

  var filterSearch = function filterSearch() {
    return /*#__PURE__*/React__default.createElement(LiveMapFiltersWrapper, null, /*#__PURE__*/React__default.createElement(LiveMapFiltersHeaderWrapper, null, /*#__PURE__*/React__default.createElement(FiltersPaddingFix, null, heading)), /*#__PURE__*/React__default.createElement(FilterSearch, null, /*#__PURE__*/React__default.createElement(InputBase, {
      placeholder: searchParams.placeholder,
      value: filterValue,
      onChange: search
    })), /*#__PURE__*/React__default.createElement(LiveMapFiltersSectionWrapper, null, filteredSections ? filteredSections.map(function (section, idx) {
      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(LiveMapFiltersSectionHeaderWrapper, null, section.heading), section.components.map(function (component, index) {
        return /*#__PURE__*/React__default.createElement(Checkbox, {
          onClick: component.onClick,
          label: component.label,
          key: index
        });
      }));
    }) : null));
  };

  var renderFilters = function renderFilters() {
    return enableSearch ? filterSearch() : renderSectionFilters();
  };

  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
    theme: theme
  }, /*#__PURE__*/React__default.createElement(globalStyle, null), showAdvancedFilters && advancedFilters ? renderAdvancedFilters() : renderFilters());
};

export { Filters as default };
//# sourceMappingURL=index.js.map
