import { r as reactExports, j as jsxRuntimeExports, E as compilerRuntimeExports } from "./vendor-react-DYNCg6N5.js";
import { M as Modal } from "./index-DqcA8P_y.js";
import { I as InfiniteScroll } from "./index.es-BTZFX8B-.js";
import { c as createStyles, b as Box, g as Loader, B as Button, U as UnstyledButton } from "./vendor-mantine-h0WlM2Mj.js";
import { c as useAppSelector, T as useGetRolesQuery, I as IFiltersEnumType, S as ScrollContainer } from "./index-DfebxkL9.js";
import { S as Search } from "./index-CcqTjOWY.js";
import { G as GroupItem } from "./index-DFEP7Sv_.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 = createStyles((theme) => ({
  root: {
    width: "100%",
    height: "100%",
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "space-between"
  },
  container: {
    display: "flex",
    flexDirection: "column",
    alignItems: "flex-start",
    justifyContent: "flex-start",
    width: "100%",
    padding: `${theme.spacing.sm} ${theme.spacing.md}`
  },
  control: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-start",
    width: "100%",
    marginTop: theme.spacing.sm
  },
  controlTextInfo: {
    color: theme.colors.brandGray[0],
    fontSize: "12px",
    lineHeight: "15px",
    marginTop: theme.spacing.md
  },
  footer: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    width: "100%",
    backgroundColor: "#F9FAFB",
    height: "63px",
    padding: `0px ${theme.spacing.md}`,
    borderTop: "1px solid #F2F4F7",
    position: "sticky",
    bottom: 0
  },
  cancelBtn: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    height: "36px",
    borderRadius: "8px",
    padding: `8px ${theme.spacing.sm}`,
    backgroundColor: theme.colors.brandGray[1],
    fontSize: "14px",
    color: "#101828",
    fontWeight: 600,
    lineHeight: "17px",
    "&:hover": {
      backgroundColor: "#eff0f4"
    },
    "&:active": {
      transform: `translateY(1px)`
    }
  },
  search: {
    marginBottom: theme.spacing.md,
    "& input": {
      border: `1px solid ${theme.colors.brandGray[1]}`
    }
  },
  createGroup: {
    display: "flex",
    alignItems: "center",
    justifyContent: "flex-start",
    padding: "10px 16px 10px 0px",
    width: "250px",
    fontSize: "14px",
    marginBottom: theme.spacing.sm,
    "& svg": {
      marginRight: theme.spacing.xs
    }
  },
  selectAll: {
    // color: theme.colors.mainBlue[9],
    fontSize: "14px",
    marginBottom: theme.spacing.sm,
    cursor: "pointer"
  },
  infiniteScroll: {
    "&::-webkit-scrollbar": {
      width: "8px",
      height: "10px"
    },
    "&::-webkit-scrollbar-thumb": {
      borderRadius: "8px",
      background: "#98A2B3"
    },
    "&::-webkit-scrollbar-track": {
      background: "#F9FAFB"
    },
    scrollbarColor: "#98A2B3 #F9FAFB"
  },
  infiniteScrollMoreData: {
    width: "100%",
    height: "50px",
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  }
}));
const setActiveGroup = (list, value) => {
  return list.map((item) => ({
    ...item,
    checked: item.value === value
  }));
};
const SelectGroup = ({
  setGroupId,
  setGroup,
  handleClose,
  filial,
  SkipIds
}) => {
  const {
    t
  } = useTranslation();
  const {
    classes
  } = useStyles();
  const [search, setSearch] = reactExports.useState("");
  const debounced = useDebounce(search, 500);
  const [offsetObj, setOffset] = reactExports.useState({
    count: 20,
    offset: 0
  });
  const listRef = reactExports.useRef([]);
  const {
    filters: rolesFilter
  } = useAppSelector((state) => state.roles);
  const {
    data,
    isSuccess
  } = useGetRolesQuery({
    Count: offsetObj.count,
    Offset: offsetObj.offset,
    SortOrder: rolesFilter.SortOrder,
    SortField: rolesFilter.SortField,
    Filters: {},
    Query: debounced,
    SkipIds: (SkipIds == null ? void 0 : SkipIds.length) ? SkipIds : [],
    FilterConditions: filial ? [{
      Type: IFiltersEnumType.FilialFilter,
      NumValues: [filial == null ? void 0 : filial.Id]
    }] : []
  });
  const [listData, setListData] = reactExports.useState([]);
  const selectionGroups = reactExports.useMemo(() => {
    const checkedGroups = listData.filter((item) => item.checked);
    return Boolean(checkedGroups.length);
  }, [listData]);
  const handleClickGroupItem = reactExports.useCallback((event) => {
    const value = Number(event.currentTarget.dataset.value);
    listRef.current = setActiveGroup(listRef.current, value);
    setListData((prevState) => setActiveGroup(prevState, value));
  }, []);
  const addGroups = reactExports.useCallback(() => {
    if (listData.length) {
      const findCheckedGroup = listData.find((item_0) => item_0.checked);
      if (findCheckedGroup) {
        setGroupId(Number(findCheckedGroup.value));
        setGroup == null ? void 0 : setGroup(findCheckedGroup);
      }
    }
  }, [listData]);
  reactExports.useEffect(() => {
    if ((data == null ? void 0 : data.Items.length) && isSuccess) {
      const convertData = data == null ? void 0 : data.Items.map((item_1) => ({
        label: item_1.Name,
        value: item_1.Id,
        checked: false,
        counter: item_1.Counter,
        isRemovable: item_1.IsRemovable
      }));
      const convertTotalData = offsetObj.offset > 0 ? [...listRef.current, ...convertData] : convertData;
      listRef.current = convertTotalData;
      setListData(convertTotalData);
    }
  }, [data]);
  reactExports.useEffect(() => {
    if (search) {
      const filterSearch = listRef.current.filter((item_2) => item_2.label.toLocaleLowerCase().includes(search.toLocaleLowerCase()));
      setListData(filterSearch);
    } else {
      setListData(listRef.current);
    }
    setOffset({
      count: 20,
      offset: 0
    });
  }, [search]);
  const handleLoadMore = () => {
    const offset = (data == null ? void 0 : data.TotalCount) && offsetObj.offset + 20 > data.TotalCount ? data.TotalCount : offsetObj.offset + 20;
    setOffset({
      count: 20,
      offset
    });
  };
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { className: classes.root, children: [
    /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { className: classes.container, children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx(Search, { setSearch, className: classes.search, fullSize: true, value: search, placeholder: t("selectGroup.searchRole") }),
      /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollContainer, { sx: {
        height: "300px",
        width: "100%"
      }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(InfiniteScroll, { scrollableTarget: "scrollableDiv", dataLength: listData == null ? void 0 : listData.length, next: handleLoadMore, height: 300, hasMore: data ? (data == null ? void 0 : data.TotalCount) > (listData == null ? void 0 : listData.length) : false, endMessage: !(listData == null ? void 0 : listData.length) && /* @__PURE__ */ jsxRuntimeExports.jsx(NoDataText, {}), 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, { size: "sm" }) }) }), className: classes.infiniteScroll, children: /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: listData == null ? void 0 : listData.map((item_3) => {
        return /* @__PURE__ */ jsxRuntimeExports.jsx(GroupItem, { checked: item_3.checked, label: item_3.label, handleChange: handleClickGroupItem, value: Number(item_3.value), counter: item_3.counter, withRadioButtonbox: true }, item_3.value);
      }) }) }) })
    ] }),
    /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { className: classes.footer, children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { size: "sm", radius: 8, w: "49%", disabled: !selectionGroups, onClick: addGroups, children: t("add") }),
      /* @__PURE__ */ jsxRuntimeExports.jsx(UnstyledButton, { ml: 8, className: classes.cancelBtn, w: "49%", onClick: handleClose, children: t("cancel") })
    ] })
  ] });
};
const SelectGroupSimpleModal = (t0) => {
  const $ = compilerRuntimeExports.c(13);
  const {
    isOpened,
    title,
    onClose,
    setGroupId,
    setGroup,
    filial,
    SkipIds
  } = t0;
  let t1;
  if ($[0] !== onClose) {
    t1 = () => {
      onClose();
    };
    $[0] = onClose;
    $[1] = t1;
  } else {
    t1 = $[1];
  }
  const handleClose = t1;
  let t2;
  if ($[2] !== SkipIds || $[3] !== filial || $[4] !== handleClose || $[5] !== setGroup || $[6] !== setGroupId) {
    t2 = /* @__PURE__ */ jsxRuntimeExports.jsx(SelectGroup, { setGroupId, setGroup, handleClose, filial, SkipIds });
    $[2] = SkipIds;
    $[3] = filial;
    $[4] = handleClose;
    $[5] = setGroup;
    $[6] = setGroupId;
    $[7] = t2;
  } else {
    t2 = $[7];
  }
  let t3;
  if ($[8] !== handleClose || $[9] !== isOpened || $[10] !== t2 || $[11] !== title) {
    t3 = /* @__PURE__ */ jsxRuntimeExports.jsx(Modal, { size: "450px", opened: isOpened, title, onClose: handleClose, children: t2 });
    $[8] = handleClose;
    $[9] = isOpened;
    $[10] = t2;
    $[11] = title;
    $[12] = t3;
  } else {
    t3 = $[12];
  }
  return t3;
};
export {
  SelectGroupSimpleModal as S
};
//# sourceMappingURL=index-BWhdniX1.js.map
