import { E as compilerRuntimeExports, j as jsxRuntimeExports, r as reactExports } from "./vendor-react-DYNCg6N5.js";
import { I as InfiniteScroll } from "./index.es-BTZFX8B-.js";
import { c as createStyles, Z as alpha, d as Checkbox, T as Text, b as Box, _ as useDirection, U as UnstyledButton, G as Group, O as Badge, Q as Collapse, g as Loader } from "./vendor-mantine-h0WlM2Mj.js";
import { S as Search } from "./index-CcqTjOWY.js";
import { W as Ws, n as Bq } from "./vendor-icons-xWhXK_Ui.js";
import { O as themeColors, N as getFilterAttributeByKey, I as IFiltersEnumType } from "./index-DfebxkL9.js";
import { u as useDebounce } from "./useDebounce-DTubzIUC.js";
import { N as NoDataText } from "./index-C_Fw_IUU.js";
import { u as useTranslation } from "./vendor-i18n-wisIXUFi.js";
const useStyles$2 = createStyles((theme, _, utils) => ({
  link: {
    border: "none",
    fontWeight: 500,
    display: "flex",
    alignItems: "center",
    flexDirection: "row",
    justifyContent: "space-between",
    textDecoration: "none",
    padding: `${theme.spacing.xs}`,
    marginBottom: "4px",
    backgroundColor: alpha(theme.colors.gray[2], 0.2),
    fontSize: theme.fontSizes.sm,
    [utils.dark]: {
      color: theme.colors.dark[0]
    },
    [utils.light]: {
      color: theme.black
    },
    borderRadius: "8px",
    width: "100%",
    cursor: "pointer",
    "& input, label": {
      cursor: "pointer"
    },
    "&:hover": {
      [utils.dark]: {
        backgroundColor: theme.colors.dark[7],
        color: theme.white
      },
      [utils.light]: {
        backgroundColor: theme.colors.gray[2],
        color: theme.black
      }
    },
    "& .mantine-Checkbox-root, .mantine-Checkbox-body, .mantine-Checkbox-labelWrapper": {
      width: "100%"
    },
    "& .mantine-Checkbox-label": {
      paddingLeft: theme.spacing.xs
    },
    "& .mantine-CheckboxIndicator-indicator": {
      cursor: "pointer"
    }
  },
  counter: {
    fontSize: "12px",
    [utils.dark]: {
      color: theme.white
    },
    [utils.light]: {
      color: theme.black
    },
    marginLeft: "12px"
  },
  checkboxContainer: {
    display: "flex",
    alignItems: "center",
    flexDirection: "row",
    justifyContent: "space-between",
    width: "100%",
    paddingLeft: theme.spacing.sm
  },
  checkbox: {
    cursor: "pointer",
    fontWeight: 400,
    width: "220px",
    paddingRight: theme.spacing.xs,
    wordWrap: "break-word",
    whiteSpace: "normal"
  }
}));
const ListItem = (props) => {
  const $ = compilerRuntimeExports.c(14);
  const {
    defaultChecked,
    checked,
    label,
    value,
    handleChange
  } = props;
  const {
    classes
  } = useStyles$2();
  const t0 = !!checked;
  let t1;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t1 = /* @__PURE__ */ jsxRuntimeExports.jsx(Checkbox.Indicator, {});
    $[0] = t1;
  } else {
    t1 = $[0];
  }
  let t2;
  if ($[1] !== classes.checkbox || $[2] !== label) {
    t2 = /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { fz: "sm", className: classes.checkbox, children: label });
    $[1] = classes.checkbox;
    $[2] = label;
    $[3] = t2;
  } else {
    t2 = $[3];
  }
  let t3;
  if ($[4] !== classes.checkboxContainer || $[5] !== t2) {
    t3 = /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { className: classes.checkboxContainer, children: t2 });
    $[4] = classes.checkboxContainer;
    $[5] = t2;
    $[6] = t3;
  } else {
    t3 = $[6];
  }
  let t4;
  if ($[7] !== classes.link || $[8] !== defaultChecked || $[9] !== handleChange || $[10] !== t0 || $[11] !== t3 || $[12] !== value) {
    t4 = /* @__PURE__ */ jsxRuntimeExports.jsxs(Checkbox.Card, { className: classes.link, "data-link": value, checked: t0, defaultChecked, onClick: handleChange, children: [
      t1,
      t3
    ] });
    $[7] = classes.link;
    $[8] = defaultChecked;
    $[9] = handleChange;
    $[10] = t0;
    $[11] = t3;
    $[12] = value;
    $[13] = t4;
  } else {
    t4 = $[13];
  }
  return t4;
};
const useStyles$1 = createStyles((theme, _, utils) => ({
  root: {
    width: "100%",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    flexDirection: "column",
    textTransform: "none"
  },
  container: {
    width: "100%",
    display: "flex",
    alignItems: "center",
    justifyContent: "flex-start",
    flexDirection: "column",
    padding: `${theme.spacing.xs} ${theme.spacing.sm}`
  },
  badgeContainer: {
    flexDirection: "row",
    display: "flex",
    justifyContent: "center",
    alignItems: "center"
  },
  controlsContainer: {
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between"
  },
  badge: {
    textTransform: "none",
    fontSize: "10px",
    fontWeight: 400,
    lineHeight: "18px",
    marginRight: theme.spacing.xs,
    borderRadius: "50%",
    padding: `0px 6px`
  },
  withoutNumber: {
    fontSize: "10px",
    lineHeight: "18px",
    marginRight: theme.spacing.xs,
    borderRadius: "50%",
    padding: 0,
    width: "18px",
    height: "18px"
  },
  rangeContainer: {
    width: "100%"
  },
  range: {
    "& .mantine-Slider-bar, .mantine-Slider-thumb": {
      border: `1px solid ${theme.white}`
    }
  },
  control: {
    width: "100%",
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    flexDirection: "row",
    marginTop: theme.spacing.xs
  },
  controlButton: {
    fontWeight: 500,
    display: "inline-block",
    width: "100%",
    [utils.dark]: {
      color: theme.colors.dark[0]
    },
    [utils.light]: {
      color: theme.black
    },
    fontSize: theme.fontSizes.sm,
    borderRadius: "8px",
    "&:hover": {
      [utils.dark]: {
        backgroundColor: theme.colors.dark[7],
        color: theme.white
      },
      [utils.light]: {
        backgroundColor: theme.colors.gray[2],
        color: theme.black
      }
    }
  },
  input: {
    borderRadius: "8px",
    border: "1px solid #D0D5DD"
  },
  group: {
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    padding: `${theme.spacing.xs} ${theme.spacing.xs} ${theme.spacing.xs} ${theme.spacing.sm}`,
    flexWrap: "nowrap"
  },
  leftContentText: {
    marginLeft: "0px",
    marginRight: "12px",
    fontWeight: 600
  },
  resetButton: {
    // position: 'absolute',
    // right: '48px'
    // top: '16px'
    "&:hover": {
      backgroundColor: "transparent"
    }
  },
  chevron: {
    transition: "transform 200ms ease"
  }
}));
const FilterTemplate = (t0) => {
  const $ = compilerRuntimeExports.c(24);
  const {
    label,
    hideCollapse,
    activeIds,
    handleFilterReset,
    type,
    children,
    isActive
  } = t0;
  const {
    dir
  } = useDirection();
  const {
    classes
  } = useStyles$1();
  const [opened, setOpened] = reactExports.useState(false);
  let t1;
  if ($[0] !== handleFilterReset || $[1] !== type) {
    t1 = (event) => {
      event.preventDefault();
      event.stopPropagation();
      handleFilterReset(type);
    };
    $[0] = handleFilterReset;
    $[1] = type;
    $[2] = t1;
  } else {
    t1 = $[2];
  }
  const handleReset = t1;
  let t2;
  if ($[3] !== activeIds || $[4] !== children || $[5] !== classes.badge || $[6] !== classes.badgeContainer || $[7] !== classes.chevron || $[8] !== classes.controlButton || $[9] !== classes.controlsContainer || $[10] !== classes.group || $[11] !== classes.leftContentText || $[12] !== classes.withoutNumber || $[13] !== dir || $[14] !== handleReset || $[15] !== hideCollapse || $[16] !== isActive || $[17] !== label || $[18] !== opened || $[19] !== type) {
    t2 = hideCollapse ? children : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx(UnstyledButton, { onClick: () => setOpened(!opened), className: classes.controlButton, "data-cy": getFilterAttributeByKey(type), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Group, { className: classes.group, children: [
        /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { className: classes.badgeContainer, children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { fz: "sm", className: classes.leftContentText, children: label }),
          activeIds && activeIds > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { className: classes.badge, variant: "filled", children: activeIds }) : isActive ? /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { className: classes.withoutNumber, variant: "filled" }) : null
        ] }),
        /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { className: classes.controlsContainer, children: [
          activeIds || isActive ? /* @__PURE__ */ jsxRuntimeExports.jsx(Ws, { size: 20, color: themeColors.brandGray[0], onClick: (e) => handleReset(e) }) : null,
          /* @__PURE__ */ jsxRuntimeExports.jsx(Bq, { className: classes.chevron, size: 24, stroke: 1.5, style: {
            transform: !opened ? `rotate(${dir === "rtl" ? -180 : 180}deg)` : "none"
          } })
        ] })
      ] }) }),
      /* @__PURE__ */ jsxRuntimeExports.jsx(Collapse, { sx: {
        width: "100%",
        marginTop: "8px"
      }, in: opened, children })
    ] });
    $[3] = activeIds;
    $[4] = children;
    $[5] = classes.badge;
    $[6] = classes.badgeContainer;
    $[7] = classes.chevron;
    $[8] = classes.controlButton;
    $[9] = classes.controlsContainer;
    $[10] = classes.group;
    $[11] = classes.leftContentText;
    $[12] = classes.withoutNumber;
    $[13] = dir;
    $[14] = handleReset;
    $[15] = hideCollapse;
    $[16] = isActive;
    $[17] = label;
    $[18] = opened;
    $[19] = type;
    $[20] = t2;
  } else {
    t2 = $[20];
  }
  let t3;
  if ($[21] !== classes.root || $[22] !== t2) {
    t3 = /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { className: classes.root, children: t2 });
    $[21] = classes.root;
    $[22] = t2;
    $[23] = t3;
  } else {
    t3 = $[23];
  }
  return t3;
};
const useStyles = createStyles((theme, _, utils) => ({
  root: {
    width: "100%"
  },
  container: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    flexDirection: "column",
    backgroundColor: "white"
  },
  controlActive: {
    [utils.dark]: {
      backgroundColor: theme.colors.dark[7],
      color: theme.white
    },
    [utils.light]: {
      backgroundColor: theme.colors.gray[2],
      color: theme.black
    }
  },
  search: {
    marginBottom: theme.spacing.xs,
    width: "100%",
    "& input": {
      height: "36px",
      fontSize: "14px",
      border: `1px solid ${theme.colors.brandGray[1]}`
    }
  },
  selectAll: {
    fontSize: "12px",
    fontWeight: 600,
    paddingLeft: theme.spacing.sm,
    marginBottom: theme.spacing.sm,
    cursor: "pointer"
  },
  loader: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    width: "100%"
  },
  infiniteScrollMoreData: {
    width: "100%",
    height: "50px",
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  },
  infiniteScroll: {
    // minHeight: '100px',
    // height: 'auto',
    // maxHeight: '200px',
    "&::-webkit-scrollbar": {
      width: "8px",
      height: "10px"
    },
    "&::-webkit-scrollbar-thumb": {
      borderRadius: "8px",
      background: "#98A2B3"
    },
    "&::-webkit-scrollbar-track": {
      background: "#F9FAFB",
      borderRadius: "8px"
    },
    scrollbarColor: "#98A2B3 #F9FAFB"
  },
  noDataText: {
    color: "#228be6"
  }
}));
const SearchFilter = ({
  filterType = IFiltersEnumType.RoleFilter,
  list,
  activeIds,
  label,
  searchPlaceholder,
  hideSearch,
  hideCollapse,
  handleFilterReset,
  handleFilterChange,
  handleLoadData
}) => {
  const {
    t
  } = useTranslation();
  const {
    classes
  } = useStyles();
  const [skip, setSkip] = reactExports.useState(!(list == null ? void 0 : list.length) || list.length < 9);
  const scrollRef = reactExports.useRef(null);
  const listIdsRef = reactExports.useRef(activeIds || []);
  const [filters, setFilters] = reactExports.useState({
    Type: filterType,
    Count: 10,
    Offset: 0,
    Query: ""
  });
  const [search, setSearch] = reactExports.useState("");
  const debounced = useDebounce(search, 500);
  const {
    data,
    isLoading
  } = handleLoadData({
    Type: filters.Type,
    Count: 10,
    Offset: filters.Offset,
    Query: debounced
  }, {
    skip
  });
  const [listData, setListData] = reactExports.useState(list || []);
  const handleClickLinkItem = reactExports.useCallback((event) => {
    var _a, _b;
    const value = Number((_b = (_a = event == null ? void 0 : event.currentTarget) == null ? void 0 : _a.dataset) == null ? void 0 : _b.link);
    if (handleFilterChange) {
      handleFilterChange({
        Type: filterType,
        value
      });
    }
    const ids = listIdsRef.current.includes(value) ? listIdsRef.current.filter((id) => value !== id) : /* @__PURE__ */ new Set([...listIdsRef.current, value]);
    listIdsRef.current = [...ids];
  }, [activeIds]);
  const handleLoadMore = () => {
    setSkip(false);
    setFilters((prevState) => ({
      ...prevState,
      Offset: prevState.Offset + 10
    }));
  };
  reactExports.useEffect(() => {
    var _a;
    if (!data) {
      return;
    }
    const formattedData = (_a = data == null ? void 0 : data.FilterItems) == null ? void 0 : _a.map((item) => ({
      ...item,
      checked: false
    }));
    const filterData = (filters == null ? void 0 : filters.Offset) > 0 ? [...listData, ...formattedData] : formattedData;
    const convertData = filterData == null ? void 0 : filterData.map((item_0) => {
      var _a2;
      return {
        ...item_0,
        checked: (activeIds == null ? void 0 : activeIds.length) ? (_a2 = listIdsRef == null ? void 0 : listIdsRef.current) == null ? void 0 : _a2.includes(Number(item_0.Id)) : false
      };
    });
    setListData(convertData);
  }, [data]);
  reactExports.useEffect(() => {
    var _a, _b;
    if (search) {
      (_b = (_a = scrollRef == null ? void 0 : scrollRef.current) == null ? void 0 : _a.el) == null ? void 0 : _b.scrollTo(0, 0);
      setSkip(false);
    }
    setFilters((prevState_0) => ({
      ...prevState_0,
      Query: search,
      Offset: 0
    }));
  }, [search]);
  const items = listData == null ? void 0 : listData.map((item_1) => /* @__PURE__ */ jsxRuntimeExports.jsx(ListItem, { label: item_1 == null ? void 0 : item_1.Name, handleChange: handleClickLinkItem, value: Number(item_1 == null ? void 0 : item_1.Id), counter: item_1 == null ? void 0 : item_1.Count, checked: activeIds == null ? void 0 : activeIds.includes(item_1 == null ? void 0 : item_1.Id) }, `${item_1.Id}${item_1 == null ? void 0 : item_1.Name}`));
  return /* @__PURE__ */ jsxRuntimeExports.jsx(FilterTemplate, { handleFilterReset, activeIds: activeIds == null ? void 0 : activeIds.length, label, hideCollapse, type: filterType, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { className: classes.root, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
    hideSearch || /* @__PURE__ */ jsxRuntimeExports.jsx(Search, { setSearch, className: classes.search, fullSize: true, value: search, placeholder: searchPlaceholder || t("search") }),
    (listData == null ? void 0 : listData.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(InfiniteScroll, { height: (listData == null ? void 0 : listData.length) < 5 ? "auto" : "200px", className: classes.infiniteScroll, dataLength: listData == null ? void 0 : listData.length, next: handleLoadMore, hasMore: data ? (data == null ? void 0 : data.TotalCount) > (listData == null ? void 0 : listData.length) : false, loader: /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: Boolean(listData == null ? void 0 : listData.length) && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { className: classes.infiniteScrollMoreData, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, { color: "mainBlue.9", size: "sm" }) }) }), children: items }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { fz: 14, children: /* @__PURE__ */ jsxRuntimeExports.jsx(NoDataText, {}) }),
    isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { className: classes.loader, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, { color: "mainBlue.9", size: "sm" }) })
  ] }) }) });
};
export {
  FilterTemplate as F,
  SearchFilter as S
};
//# sourceMappingURL=index-C6QQOvbB.js.map
