import { jsxs, jsx, Fragment } from "react/jsx-runtime";
import { useState, useRef, useCallback, useLayoutEffect, useEffect } from "react";
import default_1$3 from "../../node_modules/@mui/icons-material/ChevronRightOutlined.js";
import default_1$2 from "../../node_modules/@mui/icons-material/CloseOutlined.js";
import default_1 from "../../node_modules/@mui/icons-material/KeyboardArrowLeft.js";
import default_1$1 from "../../node_modules/@mui/icons-material/KeyboardArrowRight.js";
import { Button } from "../Button/index.js";
import { Portal } from "../Portal/index.js";
function FilterSlider({
  list,
  width,
  isExpanded = true,
  handleExpandClick,
  tagsChildren,
  containerChildren,
  setShowSeparator,
  onNextClick,
  onPrevClick,
  currDropShow,
  handleClickOutside = () => {
  }
}) {
  const [overFlow, setOverFlow] = useState(false);
  const [dropdownPosition, setDropdownPosition] = useState({
    x: 0,
    y: 0,
    width: 200
  });
  const [canScrollLeft, setCanScrollLeft] = useState(false);
  const [canScrollRight, setCanScrollRight] = useState(false);
  const tagContainer = useRef(null);
  const filtersContainer = useRef([]);
  const memoizedHandleClickOutside = useCallback(handleClickOutside, []);
  const handleCloseClick = () => {
    if (handleExpandClick) handleExpandClick();
  };
  useLayoutEffect(() => {
    if (tagContainer.current) {
      const container = tagContainer.current;
      setOverFlow(container.scrollWidth > container.clientWidth);
      setShowSeparator == null ? void 0 : setShowSeparator(container.scrollWidth > container.clientWidth);
    }
  }, [list, setShowSeparator]);
  useLayoutEffect(() => {
    const container = tagContainer.current;
    if (!container) return;
    const checkScroll = () => {
      const maxScroll = container.scrollWidth - container.clientWidth;
      const currentScroll = container.scrollLeft;
      setCanScrollLeft(currentScroll > 0);
      setCanScrollRight(currentScroll < maxScroll - 1);
      setOverFlow(maxScroll > 0);
      setShowSeparator == null ? void 0 : setShowSeparator(maxScroll > 0);
    };
    requestAnimationFrame(checkScroll);
    container.addEventListener("scroll", checkScroll);
    const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(checkScroll) : null;
    if (resizeObserver) resizeObserver.observe(container);
    return () => {
      container.removeEventListener("scroll", checkScroll);
      resizeObserver == null ? void 0 : resizeObserver.disconnect();
    };
  }, [list, setShowSeparator]);
  useEffect(() => {
    const handleMouseDown = (event) => {
      memoizedHandleClickOutside(event);
    };
    document.addEventListener("mousedown", handleMouseDown);
    return () => {
      document.removeEventListener("mousedown", handleMouseDown);
    };
  }, [memoizedHandleClickOutside]);
  const scrollAmount = 200;
  const handleNextClick = () => {
    var _a;
    onNextClick == null ? void 0 : onNextClick();
    (_a = tagContainer.current) == null ? void 0 : _a.scrollBy({ left: scrollAmount, behavior: "smooth" });
  };
  const handlePrevClick = () => {
    var _a;
    onPrevClick == null ? void 0 : onPrevClick();
    (_a = tagContainer.current) == null ? void 0 : _a.scrollBy({ left: -scrollAmount, behavior: "smooth" });
  };
  const handleTagClick = (index) => {
    const el = filtersContainer.current[index];
    if (el) {
      const rect = el.getBoundingClientRect();
      setDropdownPosition({
        x: rect.right,
        y: rect.bottom,
        width: rect.width
      });
    }
  };
  if (!Array.isArray(list)) return null;
  return /* @__PURE__ */ jsxs("div", { className: "impact-selected-filter-container", style: { width: width ?? "100%" }, children: [
    /* @__PURE__ */ jsx(
      "div",
      {
        ref: tagContainer,
        className: `impact-selected-filter-tags ${!isExpanded ? "collapsed" : ""}`,
        children: list.map((item, index) => /* @__PURE__ */ jsxs(
          "div",
          {
            ref: (el) => {
              filtersContainer.current[index] = el;
            },
            className: "impact-selected-filter-wrapper",
            role: "presentation",
            onClick: () => {
              handleTagClick(index);
            },
            children: [
              containerChildren == null ? void 0 : containerChildren(item, index),
              /* @__PURE__ */ jsx("div", { className: "impact-selected-filter-tags-container", children: tagsChildren(item, index) }),
              currDropShow === index && /* @__PURE__ */ jsx(Portal, { container: document.body, children: /* @__PURE__ */ jsxs(
                "div",
                {
                  className: "impact-selected-filter-tags-dropdown",
                  style: {
                    top: dropdownPosition.y + 18,
                    left: dropdownPosition.width > 200 ? dropdownPosition.x - 200 : dropdownPosition.x - dropdownPosition.width,
                    width: `${dropdownPosition.width}px`
                  },
                  children: [
                    /* @__PURE__ */ jsx("div", { className: "impact-selected-filter-tag-container", children: item.values.slice(2, 5).map((tag, i) => /* @__PURE__ */ jsx("div", { className: "impact-selected-filter-tag-label", children: tag.label }, i)) }),
                    item.values.length > 6 && item.handleViewAll && /* @__PURE__ */ jsxs("div", { className: "impact-selected-filter-tags-actions-container", children: [
                      /* @__PURE__ */ jsx("div", { className: "impact-notification-horizontal-separator" }),
                      /* @__PURE__ */ jsx(
                        Button,
                        {
                          size: "large",
                          variant: "text",
                          onClick: () => {
                            var _a;
                            return (_a = item.handleViewAll) == null ? void 0 : _a.call(item, item);
                          },
                          children: `View all (${item.values.length})`
                        }
                      )
                    ] })
                  ]
                }
              ) })
            ]
          },
          item.id
        ))
      }
    ),
    overFlow && list.length > 2 && /* @__PURE__ */ jsx("div", { className: "impact-selected-filter-action-btns", children: isExpanded ? /* @__PURE__ */ jsxs(Fragment, { children: [
      /* @__PURE__ */ jsx(
        "div",
        {
          className: "impact-selected-filter-action-btn prev",
          role: "button",
          style: { opacity: canScrollLeft ? 1 : 0.5 },
          tabIndex: 0,
          onClick: handlePrevClick,
          onKeyDown: (e) => {
            if (e.key === "Enter" || e.key === " ") {
              e.preventDefault();
              handlePrevClick();
            }
          },
          children: /* @__PURE__ */ jsx(default_1, {})
        }
      ),
      /* @__PURE__ */ jsx(
        "div",
        {
          className: "impact-selected-filter-action-btn next",
          role: "button",
          style: { opacity: canScrollRight ? 1 : 0.5 },
          tabIndex: 0,
          onClick: handleNextClick,
          onKeyDown: (e) => {
            if (e.key === "Enter" || e.key === " ") {
              e.preventDefault();
              handleNextClick();
            }
          },
          children: /* @__PURE__ */ jsx(default_1$1, {})
        }
      ),
      handleExpandClick && /* @__PURE__ */ jsx(
        "div",
        {
          className: "impact-selected-filter-action-btn next",
          role: "button",
          tabIndex: 0,
          onClick: handleCloseClick,
          onKeyDown: (e) => {
            if (e.key === "Enter" || e.key === " ") {
              e.preventDefault();
              handleCloseClick();
            }
          },
          children: /* @__PURE__ */ jsx(default_1$2, { fontSize: "small" })
        }
      )
    ] }) : /* @__PURE__ */ jsxs(
      "div",
      {
        className: "impact-selected-filter-action-btn expand",
        role: "button",
        tabIndex: 0,
        onClick: handleExpandClick,
        onKeyDown: (e) => {
          if (e.key === "Enter" || e.key === " ") {
            e.preventDefault();
            handleExpandClick == null ? void 0 : handleExpandClick();
          }
        },
        children: [
          /* @__PURE__ */ jsxs("p", { children: [
            "+",
            list.length
          ] }),
          /* @__PURE__ */ jsx(default_1$3, {})
        ]
      }
    ) })
  ] });
}
FilterSlider.displayName = "FilterSlider";
export {
  FilterSlider
};
