import { jsxs, Fragment, jsx } from "react/jsx-runtime";
import { useState, useCallback, Fragment as Fragment$1 } from "react";
import default_1 from "../../node_modules/@mui/icons-material/FilterList.js";
import { toSentenceCase } from "../../utils/helper.js";
import { Button } from "../Button/index.js";
import { Tag } from "../Tag/index.js";
import { FilterDropDown } from "./FilterDropDown.js";
import { FilterSlider } from "./FilterSlider.js";
/* empty css                         */
function FiltersStrip({
  selectedFilter = "",
  setSelectedFilter = () => {
  },
  recentFilters = [],
  savedFiltersBadge = [],
  savedFilterLists = [],
  filterTags = [],
  handleBadgeChange = () => {
  },
  handleApplyFilter,
  handleCancelFilter,
  filterButtonLabel = "All Filters",
  filterButtonClick,
  filterButtonProps,
  hideSelectedFilterBadge = false,
  savedFilterSelectedBadge = null,
  handleSavedRecentFilterDropdown = () => {
  },
  filterDropDownLabel,
  className,
  "data-testid": dataTestId
}) {
  const [showSeparator, setShowSeparator] = useState(false);
  const [currDropShow, setCurrDropShow] = useState(null);
  const handleCurrDropSet = useCallback((val) => {
    setCurrDropShow(val);
  }, []);
  const handleClick = (event) => {
    if (!event.target.closest(".impact-selected-filter-tags-dropdown")) {
      setCurrDropShow(null);
    }
  };
  const hasDropDown = (savedFilterLists.length ?? 0) > 0 || (recentFilters.length ?? 0) > 0;
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: `impact-info-panel-container ${className ?? ""}`.trim(),
      "data-testid": dataTestId,
      children: [
        /* @__PURE__ */ jsxs("div", { className: "impact-info-panel-left-container", children: [
          hasDropDown && /* @__PURE__ */ jsxs(Fragment, { children: [
            /* @__PURE__ */ jsx(
              FilterDropDown,
              {
                filterDropDownLabel,
                handleApplyFilter: handleApplyFilter ?? (() => {
                }),
                handleBadgeChange,
                handleCancelFilter: handleCancelFilter ?? (() => {
                }),
                handleSavedRecentFilterDropdown,
                hideSelectedFilterBadge,
                recentFilters,
                savedFilterLists,
                savedFiltersBadge,
                savedFilterSelectedBadge,
                selectedFilter,
                setSelectedFilter
              }
            ),
            /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "impact-filter-strip-separator" })
          ] }),
          filterTags.length > 0 && /* @__PURE__ */ jsx(
            FilterSlider,
            {
              containerChildren: (item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
                index !== 0 && /* @__PURE__ */ jsx("span", { className: "impact-filter-strip-separator" }),
                /* @__PURE__ */ jsxs("div", { className: "impact-selected-filter-label", children: [
                  toSentenceCase(item.label),
                  " ",
                  item.required && /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
                ] })
              ] }),
              currDropShow,
              handleClickOutside: handleClick,
              list: filterTags,
              setShowSeparator,
              tagsChildren: (item, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
                item.values.slice(0, 2).map((value, idx) => /* @__PURE__ */ jsx(
                  Tag,
                  {
                    label: value.label,
                    size: "medium",
                    variant: "solid",
                    onDelete: () => {
                    }
                  },
                  idx
                )),
                item.values.length > 2 && /* @__PURE__ */ jsx(
                  Tag,
                  {
                    label: `+${item.values.length - 2}`,
                    size: "medium",
                    variant: "solid",
                    onClick: () => {
                      handleCurrDropSet(currDropShow === index ? null : index);
                    }
                  }
                )
              ] }),
              onNextClick: () => {
                setCurrDropShow(null);
              },
              onPrevClick: () => {
                setCurrDropShow(null);
              }
            }
          )
        ] }),
        filterButtonLabel && /* @__PURE__ */ jsxs("div", { className: "impact-info-panel-right-container", children: [
          showSeparator && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "impact-filter-strip-separator" }),
          /* @__PURE__ */ jsx(
            Button,
            {
              icon: /* @__PURE__ */ jsx(default_1, { fontSize: "small" }),
              iconPlacement: "left",
              size: "large",
              variant: "tertiary",
              onClick: filterButtonClick,
              ...filterButtonProps,
              children: filterButtonLabel
            }
          )
        ] })
      ]
    }
  );
}
FiltersStrip.displayName = "FiltersStrip";
export {
  FilterDropDown,
  FilterSlider,
  FiltersStrip
};
