import { E as compilerRuntimeExports, j as jsxRuntimeExports, r as reactExports } from "./vendor-react-DYNCg6N5.js";
import { M as Modal } from "./index-DqcA8P_y.js";
import { c as createStyles, O as Badge, h as ActionIcon, B as Button, s as showNotification, E as TextInput, b as Box, U as UnstyledButton, d as Checkbox, T as Text, g as Loader } from "./vendor-mantine-h0WlM2Mj.js";
import { w as qXe, X as XMe } from "./vendor-icons-xWhXK_Ui.js";
import { I as InfiniteScroll } from "./index.es-BTZFX8B-.js";
import { bV as useCreateRoleMutation, O as themeColors, a6 as clearApiCacheByTags, bW as directoriesApi, bX as RoleTypesEnum, c as useAppSelector, bY as useGetRolesForUserQuery, I as IFiltersEnumType, S as ScrollContainer, bZ as useGetRolesWithCounterQuery } from "./index-DfebxkL9.js";
import { S as Search } from "./index-CcqTjOWY.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$4 = 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.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"
  },
  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)`
    }
  },
  textFieldInput: {
    width: "100%",
    "& .mantine-TextInput-label, .mantine-InputWrapper-label": {
      color: theme.colors.brandGray[0],
      fontSize: "12px"
    },
    "& .mantine-TextInput-input": {
      borderRadius: "8px",
      border: "1px solid #D0D5DD"
    }
  },
  addBtn: {
    marginTop: theme.spacing.sm,
    borderRadius: "8px",
    border: `1px solid ${theme.colors.brandGray[0]}`,
    svg: {
      color: theme.colors.brandGray[0]
    },
    "&:hover": {
      backgroundColor: "#f6f7f8"
    },
    "&:disabled": {
      backgroundColor: "#e9ecef",
      "span, svg": {
        color: "#adb5bd"
      }
    },
    "& .mantine-Button-inner": {
      display: "flex",
      flexDirection: "row",
      alignItems: "center",
      justifyContent: "space-between"
    },
    "& .mantine-Button-label": {
      color: theme.black
    }
  },
  badge: {
    paddingRight: 3,
    backgroundColor: theme.colors.backgroundGray[6],
    color: "black",
    borderRadius: "16px",
    marginRight: theme.spacing.xs,
    marginTop: theme.spacing.xs,
    border: "none",
    textTransform: "inherit",
    height: "28px",
    fontSize: "14px",
    padding: theme.spacing.xs,
    fontWeight: 400
  }
}));
const AddNewGroup = (t0) => {
  const $ = compilerRuntimeExports.c(53);
  const {
    setActiveModal,
    selectedGroup,
    setSelectedGroup,
    nameGroup,
    setNameGroup
  } = t0;
  const {
    classes
  } = useStyles$4();
  const {
    t
  } = useTranslation();
  const [fetchCreateRole] = useCreateRoleMutation();
  let t1;
  if ($[0] !== setNameGroup) {
    t1 = (event) => {
      setNameGroup(event.target.value);
    };
    $[0] = setNameGroup;
    $[1] = t1;
  } else {
    t1 = $[1];
  }
  const handleChange = t1;
  let t2;
  if ($[2] !== setActiveModal) {
    t2 = () => {
      setActiveModal(SelectGroupEnum.selectGroup);
    };
    $[2] = setActiveModal;
    $[3] = t2;
  } else {
    t2 = $[3];
  }
  const goBack = t2;
  let t3;
  if ($[4] !== setActiveModal) {
    t3 = () => {
      setActiveModal(SelectGroupEnum.setParentGroup);
    };
    $[4] = setActiveModal;
    $[5] = t3;
  } else {
    t3 = $[5];
  }
  const goNext = t3;
  let t4;
  if ($[6] !== fetchCreateRole || $[7] !== goBack || $[8] !== nameGroup || $[9] !== selectedGroup || $[10] !== t) {
    t4 = async () => {
      try {
        const res = await fetchCreateRole({
          Id: 0,
          Name: nameGroup,
          IsRemovable: false,
          ParentId: Number(selectedGroup.value)
        });
        if ("data" in res) {
          clearApiCacheByTags(directoriesApi, ["RolesWithCounter"]);
          showNotification({
            title: t("roles.roleCreatedSuccess", {
              name: nameGroup
            }),
            message: "",
            autoClose: true,
            color: "green"
          });
          goBack();
        }
      } catch (t52) {
        const e = t52;
        console.error("Failed to create role:", e);
        showNotification({
          title: t("roles.roleCreateError"),
          message: "",
          autoClose: true,
          color: "red"
        });
      }
    };
    $[6] = fetchCreateRole;
    $[7] = goBack;
    $[8] = nameGroup;
    $[9] = selectedGroup;
    $[10] = t;
    $[11] = t4;
  } else {
    t4 = $[11];
  }
  const createRole = t4;
  let t5;
  if ($[12] !== setSelectedGroup) {
    t5 = () => {
      setSelectedGroup({});
    };
    $[12] = setSelectedGroup;
    $[13] = t5;
  } else {
    t5 = $[13];
  }
  const removeSelectedGroup = t5;
  const t6 = classes.root;
  const t7 = classes.container;
  const t8 = classes.textFieldInput;
  let t9;
  if ($[14] !== t) {
    t9 = t("roles.enterName");
    $[14] = t;
    $[15] = t9;
  } else {
    t9 = $[15];
  }
  let t10;
  if ($[16] !== classes.textFieldInput || $[17] !== handleChange || $[18] !== nameGroup || $[19] !== t9) {
    t10 = /* @__PURE__ */ jsxRuntimeExports.jsx(TextInput, { className: t8, label: t9, value: nameGroup, onChange: handleChange });
    $[16] = classes.textFieldInput;
    $[17] = handleChange;
    $[18] = nameGroup;
    $[19] = t9;
    $[20] = t10;
  } else {
    t10 = $[20];
  }
  let t11;
  if ($[21] !== classes.addBtn || $[22] !== classes.badge || $[23] !== goNext || $[24] !== nameGroup || $[25] !== removeSelectedGroup || $[26] !== selectedGroup || $[27] !== t) {
    t11 = "value" in selectedGroup ? /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { className: classes.badge, variant: "outline", rightSection: /* @__PURE__ */ jsxRuntimeExports.jsx(ActionIcon, { size: 16, variant: "transparent", onClick: removeSelectedGroup, children: /* @__PURE__ */ jsxRuntimeExports.jsx(qXe, { size: 16, color: themeColors.brandGray[0] }) }), children: selectedGroup.label }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { className: classes.addBtn, size: "sm", variant: "outline", rightSection: /* @__PURE__ */ jsxRuntimeExports.jsx(XMe, {}), onClick: goNext, disabled: !nameGroup, children: t("roles.addParentRole") });
    $[21] = classes.addBtn;
    $[22] = classes.badge;
    $[23] = goNext;
    $[24] = nameGroup;
    $[25] = removeSelectedGroup;
    $[26] = selectedGroup;
    $[27] = t;
    $[28] = t11;
  } else {
    t11 = $[28];
  }
  let t12;
  if ($[29] !== classes.container || $[30] !== t10 || $[31] !== t11) {
    t12 = /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { className: t7, children: [
      t10,
      t11
    ] });
    $[29] = classes.container;
    $[30] = t10;
    $[31] = t11;
    $[32] = t12;
  } else {
    t12 = $[32];
  }
  const t13 = classes.footer;
  const t14 = Boolean(!nameGroup);
  let t15;
  if ($[33] !== t) {
    t15 = t("roles.createButton");
    $[33] = t;
    $[34] = t15;
  } else {
    t15 = $[34];
  }
  let t16;
  if ($[35] !== createRole || $[36] !== t14 || $[37] !== t15) {
    t16 = /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { size: "sm", onClick: createRole, radius: 8, w: "49%", disabled: t14, children: t15 });
    $[35] = createRole;
    $[36] = t14;
    $[37] = t15;
    $[38] = t16;
  } else {
    t16 = $[38];
  }
  const t17 = classes.cancelBtn;
  let t18;
  if ($[39] !== t) {
    t18 = t("roles.back");
    $[39] = t;
    $[40] = t18;
  } else {
    t18 = $[40];
  }
  let t19;
  if ($[41] !== classes.cancelBtn || $[42] !== goBack || $[43] !== t18) {
    t19 = /* @__PURE__ */ jsxRuntimeExports.jsx(UnstyledButton, { ml: 8, className: t17, w: "49%", onClick: goBack, children: t18 });
    $[41] = classes.cancelBtn;
    $[42] = goBack;
    $[43] = t18;
    $[44] = t19;
  } else {
    t19 = $[44];
  }
  let t20;
  if ($[45] !== classes.footer || $[46] !== t16 || $[47] !== t19) {
    t20 = /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { className: t13, children: [
      t16,
      t19
    ] });
    $[45] = classes.footer;
    $[46] = t16;
    $[47] = t19;
    $[48] = t20;
  } else {
    t20 = $[48];
  }
  let t21;
  if ($[49] !== classes.root || $[50] !== t12 || $[51] !== t20) {
    t21 = /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { className: t6, children: [
      t12,
      t20
    ] });
    $[49] = classes.root;
    $[50] = t12;
    $[51] = t20;
    $[52] = t21;
  } else {
    t21 = $[52];
  }
  return t21;
};
const useStyles$3 = 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.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,
    zIndex: 1
  },
  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 useStyles$2 = createStyles((theme, _, utils) => ({
  root: {
    border: "none",
    fontWeight: 400,
    display: "flex",
    alignItems: "center",
    flexDirection: "row",
    justifyContent: "space-between",
    textDecoration: "none",
    padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
    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-CheckboxIndicator-indicator": {
      cursor: "pointer"
    }
  },
  counter: {
    fontSize: "12px",
    [utils.dark]: {
      color: theme.white
    },
    [utils.light]: {
      color: theme.black
    }
  },
  checkboxContainer: {
    display: "flex",
    alignItems: "center",
    flexDirection: "row",
    justifyContent: "space-between",
    width: "100%",
    paddingLeft: theme.spacing.sm
  },
  checkbox: {
    cursor: "pointer",
    wordBreak: "break-word",
    maxWidth: "90%",
    fontSize: theme.fontSizes.sm
  },
  selectedGroup: {
    [utils.dark]: {
      backgroundColor: theme.colors.dark[7],
      color: theme.white
    },
    [utils.light]: {
      backgroundColor: theme.colors.gray[2],
      color: theme.black
    }
  },
  disabled: {
    opacity: 0.4,
    cursor: "not-allowed",
    "& .mantine-CheckboxIndicator-indicator": {
      cursor: "not-allowed"
    }
  }
}));
const GroupItem = (t0) => {
  const $ = compilerRuntimeExports.c(28);
  const {
    defaultChecked,
    checked,
    disabled,
    label,
    value,
    counter,
    handleChange,
    handleClick,
    withCheckbox: t1,
    selectedIdGroup
  } = t0;
  const withCheckbox = t1 === void 0 ? false : t1;
  const {
    classes,
    cx
  } = useStyles$2();
  let t2;
  if ($[0] !== handleChange || $[1] !== handleClick || $[2] !== withCheckbox) {
    t2 = (e) => {
      if (withCheckbox && handleChange) {
        handleChange(e);
      }
      if (handleClick) {
        handleClick(e);
      }
    };
    $[0] = handleChange;
    $[1] = handleClick;
    $[2] = withCheckbox;
    $[3] = t2;
  } else {
    t2 = $[3];
  }
  const handleItemClick = t2;
  const t3 = defaultChecked ?? void 0;
  const t4 = Boolean(selectedIdGroup) && value === selectedIdGroup;
  let t5;
  if ($[4] !== classes.disabled || $[5] !== classes.root || $[6] !== classes.selectedGroup || $[7] !== cx || $[8] !== disabled || $[9] !== t4) {
    t5 = cx(classes.root, {
      [classes.selectedGroup]: t4,
      [classes.disabled]: disabled
    });
    $[4] = classes.disabled;
    $[5] = classes.root;
    $[6] = classes.selectedGroup;
    $[7] = cx;
    $[8] = disabled;
    $[9] = t4;
    $[10] = t5;
  } else {
    t5 = $[10];
  }
  let t6;
  if ($[11] !== classes.checkbox || $[12] !== classes.checkboxContainer || $[13] !== classes.counter || $[14] !== counter || $[15] !== disabled || $[16] !== label || $[17] !== value || $[18] !== withCheckbox) {
    t6 = withCheckbox ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx(Checkbox.Indicator, { disabled }),
      /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { className: classes.checkboxContainer, children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { sx: {
          cursor: disabled ? "not-allowed" : "pointer"
        }, className: classes.checkbox, children: label }),
        /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: classes.counter, children: counter && counter })
      ] })
    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { className: classes.checkboxContainer, "data-value": value, children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: classes.checkbox, children: label }),
      /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: classes.counter, children: counter && counter })
    ] });
    $[11] = classes.checkbox;
    $[12] = classes.checkboxContainer;
    $[13] = classes.counter;
    $[14] = counter;
    $[15] = disabled;
    $[16] = label;
    $[17] = value;
    $[18] = withCheckbox;
    $[19] = t6;
  } else {
    t6 = $[19];
  }
  let t7;
  if ($[20] !== checked || $[21] !== disabled || $[22] !== handleItemClick || $[23] !== t3 || $[24] !== t5 || $[25] !== t6 || $[26] !== value) {
    t7 = /* @__PURE__ */ jsxRuntimeExports.jsx(Checkbox.Card, { onClick: handleItemClick, "data-value": value, checked, disabled, defaultChecked: t3, className: t5, children: t6 });
    $[20] = checked;
    $[21] = disabled;
    $[22] = handleItemClick;
    $[23] = t3;
    $[24] = t5;
    $[25] = t6;
    $[26] = value;
    $[27] = t7;
  } else {
    t7 = $[27];
  }
  return t7;
};
const getNameByRolesId = (role) => {
  let name;
  switch (role) {
    case RoleTypesEnum.User:
      name = "user";
      break;
    case RoleTypesEnum.Admin:
      name = "admin";
      break;
    case RoleTypesEnum.SuperUser:
      name = "superAdmin";
      break;
    case RoleTypesEnum.Guest:
      name = "guest";
      break;
    case RoleTypesEnum.All:
      name = "all";
      break;
    case RoleTypesEnum.Support:
      name = "support";
      break;
    default:
      name = "";
  }
  return {
    name
  };
};
const convertToFilterConditions = (activeFilters) => {
  const filterObjects = [];
  for (const [key, value] of Object.entries(activeFilters)) {
    const filterObject = {
      Type: Number(key)
    };
    if (key === "11" || key === "12" || key === "13") {
      const [from, to] = value;
      filterObject.DateRange = {
        From: from == null ? void 0 : from.toISOString(),
        To: to.toISOString()
      };
    } else if (key === "15") {
      const [from, to] = value;
      filterObject.NumRange = {
        From: from,
        To: to
      };
    } else {
      filterObject.NumValues = value;
    }
    filterObjects.push(filterObject);
  }
  return filterObjects;
};
const transformConditionals = (filters) => {
  const transformedFilters = {};
  filters.forEach((filter) => {
    const {
      Type,
      NumValues,
      DateRange,
      NumRange
    } = filter;
    if (NumValues) {
      transformedFilters[Type] = NumValues;
    } else if (DateRange) {
      transformedFilters[Type] = [new Date(DateRange == null ? void 0 : DateRange.From), new Date(DateRange == null ? void 0 : DateRange.To)];
    } else if (NumRange) {
      transformedFilters[Type] = [NumRange.From, NumRange.To];
    }
  });
  return transformedFilters;
};
const transformObjectIfKeyIsNull = (obj) => {
  for (const key in obj) {
    if (obj[key].Id === null) {
      obj[key] = null;
    }
  }
  return obj;
};
const getUserRoleFilters = (user) => {
  const roleTypes = user == null ? void 0 : user.Roles.map((role) => role == null ? void 0 : role.Type);
  if (roleTypes == null ? void 0 : roleTypes.includes(RoleTypesEnum.SuperUser)) {
    return [RoleTypesEnum.SuperUser, RoleTypesEnum.Admin, RoleTypesEnum.User];
  } else if (roleTypes == null ? void 0 : roleTypes.includes(RoleTypesEnum.Admin)) {
    return [RoleTypesEnum.Admin, RoleTypesEnum.User];
  } else {
    return [RoleTypesEnum.User];
  }
};
const limitsLengthRolesFields = {
  Name: 64
};
const selectItems = (list, value) => {
  return list.map((item) => {
    const currentValueChecked = item.value === value ? !item.checked : item.checked;
    return {
      ...item,
      checked: currentValueChecked
    };
  });
};
const SelectGroup = ({
  // setActiveModal,
  setGroups,
  groups,
  handleClose
}) => {
  const {
    t
  } = useTranslation();
  const {
    classes
  } = useStyles$3();
  const [search, setSearch] = reactExports.useState("");
  const debounced = useDebounce(search, 500);
  const [offsetObj, setOffset] = reactExports.useState({
    count: 10,
    offset: 0
  });
  const listRef = reactExports.useRef([]);
  const currentUser = useAppSelector((state) => state.userInfo.User);
  const {
    data,
    isSuccess
  } = useGetRolesForUserQuery({
    Count: offsetObj.count,
    Offset: offsetObj.offset,
    Query: debounced,
    FilterConditions: [{
      Type: IFiltersEnumType.RoleTypeFilter,
      NumValues: getUserRoleFilters(currentUser)
    }]
  });
  const [list, setList] = reactExports.useState([]);
  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 = selectItems(listRef.current, value);
    setListData((prevState) => selectItems(prevState, value));
    setList((prevState_0) => selectItems(prevState_0, value));
  }, [groups]);
  const handleLoadMore = () => {
    const offset = (data == null ? void 0 : data.TotalCount) && offsetObj.offset + 10 > data.TotalCount ? data.TotalCount : offsetObj.offset + 10;
    setOffset({
      count: 10,
      offset
    });
  };
  const addGroups = reactExports.useCallback(() => {
    if (listData.length) {
      const filtredListData = listData.filter((item_0) => item_0.checked).map((el) => ({
        Name: String(el.label),
        Id: Number(el.value)
      }));
      setGroups(filtredListData);
    }
  }, [listData]);
  reactExports.useEffect(() => {
    var _a;
    if (((_a = data == null ? void 0 : data.Items) == null ? void 0 : _a.length) && isSuccess) {
      const existingGroupIds = groups == null ? void 0 : groups.map((item_1) => item_1.Id);
      const convertData = data.Items.map((item_2) => ({
        label: item_2.Name,
        value: item_2.Id,
        checked: false,
        disabled: existingGroupIds == null ? void 0 : existingGroupIds.includes(item_2.Id),
        counter: item_2.Counter
      }));
      const convertTotalData = offsetObj.offset > 0 ? [...listRef.current, ...convertData] : convertData;
      listRef.current = convertTotalData;
      setListData(convertTotalData);
      setList(convertTotalData);
    }
  }, [data]);
  reactExports.useEffect(() => {
    var _a;
    if (search) {
      const filterSearch = (_a = listRef.current) == null ? void 0 : _a.filter((item_3) => {
        var _a2;
        return (_a2 = item_3.label.toLocaleLowerCase()) == null ? void 0 : _a2.includes(search.toLocaleLowerCase());
      });
      setList(filterSearch);
    } else {
      setList(listRef.current);
    }
    setOffset({
      count: 10,
      offset: 0
    });
  }, [search]);
  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: list == null ? void 0 : list.length, next: handleLoadMore, height: 300, hasMore: data ? (data == null ? void 0 : data.TotalCount) > (list == null ? void 0 : list.length) : false, endMessage: !(list == null ? void 0 : list.length) && /* @__PURE__ */ jsxRuntimeExports.jsx(NoDataText, {}), loader: /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: Boolean(list == null ? void 0 : list.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: list == null ? void 0 : list.map((item_4) => {
        return /* @__PURE__ */ jsxRuntimeExports.jsx(GroupItem, { checked: item_4.checked || item_4.disabled, disabled: item_4.disabled, label: item_4.label, handleChange: handleClickGroupItem, value: Number(item_4.value), withCheckbox: true }, item_4.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 useStyles$1 = createStyles((theme) => ({
  root: {
    width: "100%",
    height: "100%",
    display: "flex",
    flexDirection: "column",
    alignItems: "flex-start",
    justifyContent: "center",
    padding: `${theme.spacing.sm} ${theme.spacing.sm} 0px ${theme.spacing.md}`,
    borderRight: "1px solid #F2F4F7"
  },
  group: {
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
    backgroundColor: theme.colors.brandGray[1],
    borderRadius: "8px",
    fontSize: "14px",
    fontWeight: 600,
    width: "100%"
  },
  control: {
    width: "100%",
    marginTop: theme.spacing.sm,
    fontSize: "12px",
    fontWeight: 600
  },
  search: {
    marginTop: theme.spacing.xs,
    marginBottom: theme.spacing.md,
    "& input": {
      border: `1px solid ${theme.colors.brandGray[1]}`
    }
  },
  selectAll: {
    // color: theme.colors.mainBlue[9],
    fontSize: "14px",
    marginBottom: theme.spacing.sm,
    cursor: "pointer"
  }
}));
const Groups = ({
  setSelectedGroup,
  selectedGroup,
  setActiveModal
}) => {
  const {
    classes
  } = useStyles$1();
  const {
    t
  } = useTranslation();
  const listRef = reactExports.useRef([]);
  const [search, setSearch] = reactExports.useState("");
  const [listData, setListData] = reactExports.useState([]);
  const {
    data,
    isSuccess
  } = useGetRolesWithCounterQuery();
  const handleClickItem = reactExports.useCallback((event) => {
    const value = Number(event.currentTarget.dataset.value);
    const findRole = listData.find((role) => role.value === value);
    if (findRole) {
      setSelectedGroup(findRole);
      setActiveModal(SelectGroupEnum.addNewGroup);
    }
  }, [listData]);
  const resetSelectIdGroup = () => {
    setSelectedGroup({});
  };
  reactExports.useEffect(() => {
    if ((data == null ? void 0 : data.length) && isSuccess) {
      const convertData = data.map((item) => ({
        label: item.Name,
        value: item.Id,
        checked: false,
        counter: item.Counter
      }));
      listRef.current = convertData;
      setListData(convertData);
    }
  }, [data]);
  reactExports.useEffect(() => {
    if (search) {
      const filterSearch = listRef.current.filter((item_0) => item_0.label.toLocaleLowerCase().includes(search.toLocaleLowerCase()));
      setListData(filterSearch);
    } else {
      setListData(listRef.current);
    }
  }, [search]);
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { className: classes.root, children: [
    /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { className: classes.group, children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { children: t("roles.found") }),
      /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { children: listData.length ?? 0 })
    ] }),
    /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { className: classes.control, children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { children: t("navigation.roles") }),
      /* @__PURE__ */ jsxRuntimeExports.jsx(Search, { setSearch, className: classes.search, fullSize: true, value: search, placeholder: t("selectGroup.searchRole") }),
      /* @__PURE__ */ jsxRuntimeExports.jsxs(ScrollContainer, { sx: {
        height: "300px",
        width: "100%"
      }, children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: classes.selectAll, onClick: resetSelectIdGroup, children: t("roles.reset") }),
        listData == null ? void 0 : listData.map((item_1, index) => {
          return /* @__PURE__ */ jsxRuntimeExports.jsx(GroupItem, { checked: item_1.checked, label: item_1.label, handleClick: handleClickItem, value: Number(item_1.value), counter: item_1.counter, selectedIdGroup: Number(selectedGroup.value) ?? null }, index);
        })
      ] })
    ] })
  ] });
};
const useStyles = createStyles(() => ({
  root: {
    width: "100%",
    height: "100%",
    display: "flex",
    flexDirection: "row",
    alignItems: "flex-start",
    justifyContent: "space-between"
  },
  leftContent: {
    display: "flex",
    flexDirection: "column",
    alignItems: "flex-start",
    justifyContent: "flex-start",
    width: "50%"
  },
  rightContent: {
    display: "flex",
    flexDirection: "column",
    alignItems: "flex-start",
    justifyContent: "flex-start",
    width: "50%"
  }
}));
const SetParentGroup = (t0) => {
  const $ = compilerRuntimeExports.c(7);
  const {
    setSelectedGroup,
    selectedGroup,
    setActiveModal
  } = t0;
  const {
    classes
  } = useStyles();
  let t1;
  if ($[0] !== selectedGroup || $[1] !== setActiveModal || $[2] !== setSelectedGroup) {
    t1 = /* @__PURE__ */ jsxRuntimeExports.jsx(Groups, { setSelectedGroup, selectedGroup, setActiveModal });
    $[0] = selectedGroup;
    $[1] = setActiveModal;
    $[2] = setSelectedGroup;
    $[3] = t1;
  } else {
    t1 = $[3];
  }
  let t2;
  if ($[4] !== classes.root || $[5] !== t1) {
    t2 = /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { className: classes.root, children: t1 });
    $[4] = classes.root;
    $[5] = t1;
    $[6] = t2;
  } else {
    t2 = $[6];
  }
  return t2;
};
var SelectGroupEnum = /* @__PURE__ */ ((SelectGroupEnum2) => {
  SelectGroupEnum2["selectGroup"] = "select-group";
  SelectGroupEnum2["addNewGroup"] = "add-new-group";
  SelectGroupEnum2["setParentGroup"] = "set-parent-group";
  return SelectGroupEnum2;
})(SelectGroupEnum || {});
const SelectGroupModal = (t0) => {
  const $ = compilerRuntimeExports.c(29);
  const {
    isOpened,
    title,
    onClose,
    setSelectedGroup,
    selectedGroup,
    setGroups,
    groups
  } = t0;
  const [activeModal, setActiveModal] = reactExports.useState(
    "select-group"
    /* selectGroup */
  );
  const [activeTitle, setActiveTitle] = reactExports.useState(title);
  const [nameGroup, setNameGroup] = reactExports.useState("");
  let t1;
  if ($[0] !== onClose || $[1] !== title) {
    t1 = () => {
      onClose();
      setActiveModal(
        "select-group"
        /* selectGroup */
      );
      setActiveTitle(title);
    };
    $[0] = onClose;
    $[1] = title;
    $[2] = t1;
  } else {
    t1 = $[2];
  }
  const handleClose = t1;
  let t2;
  if ($[3] !== activeModal || $[4] !== title) {
    t2 = () => {
      bb3: switch (activeModal) {
        case "select-group": {
          setActiveTitle(title);
          break bb3;
        }
        case "add-new-group": {
          setActiveTitle("Создать новую группу");
          break bb3;
        }
        case "set-parent-group": {
          setActiveTitle("Выбрать родительскую группу");
          break bb3;
        }
      }
    };
    $[3] = activeModal;
    $[4] = title;
    $[5] = t2;
  } else {
    t2 = $[5];
  }
  let t3;
  if ($[6] !== activeModal) {
    t3 = [activeModal];
    $[6] = activeModal;
    $[7] = t3;
  } else {
    t3 = $[7];
  }
  reactExports.useEffect(t2, t3);
  let t4;
  if ($[8] !== activeModal || $[9] !== groups || $[10] !== handleClose || $[11] !== setGroups) {
    t4 = activeModal === "select-group" && /* @__PURE__ */ jsxRuntimeExports.jsx(SelectGroup, { setActiveModal, setGroups, groups, handleClose });
    $[8] = activeModal;
    $[9] = groups;
    $[10] = handleClose;
    $[11] = setGroups;
    $[12] = t4;
  } else {
    t4 = $[12];
  }
  let t5;
  if ($[13] !== activeModal || $[14] !== nameGroup || $[15] !== selectedGroup || $[16] !== setSelectedGroup) {
    t5 = activeModal === "add-new-group" && /* @__PURE__ */ jsxRuntimeExports.jsx(AddNewGroup, { setActiveModal, selectedGroup, setSelectedGroup, nameGroup, setNameGroup });
    $[13] = activeModal;
    $[14] = nameGroup;
    $[15] = selectedGroup;
    $[16] = setSelectedGroup;
    $[17] = t5;
  } else {
    t5 = $[17];
  }
  let t6;
  if ($[18] !== activeModal || $[19] !== selectedGroup || $[20] !== setSelectedGroup) {
    t6 = activeModal === "set-parent-group" && /* @__PURE__ */ jsxRuntimeExports.jsx(SetParentGroup, { setActiveModal, setSelectedGroup, selectedGroup });
    $[18] = activeModal;
    $[19] = selectedGroup;
    $[20] = setSelectedGroup;
    $[21] = t6;
  } else {
    t6 = $[21];
  }
  let t7;
  if ($[22] !== activeTitle || $[23] !== handleClose || $[24] !== isOpened || $[25] !== t4 || $[26] !== t5 || $[27] !== t6) {
    t7 = /* @__PURE__ */ jsxRuntimeExports.jsxs(Modal, { size: "450px", opened: isOpened, title: activeTitle, onClose: handleClose, children: [
      t4,
      t5,
      t6
    ] });
    $[22] = activeTitle;
    $[23] = handleClose;
    $[24] = isOpened;
    $[25] = t4;
    $[26] = t5;
    $[27] = t6;
    $[28] = t7;
  } else {
    t7 = $[28];
  }
  return t7;
};
export {
  GroupItem as G,
  SelectGroupModal as S,
  transformObjectIfKeyIsNull as a,
  convertToFilterConditions as c,
  getNameByRolesId as g,
  limitsLengthRolesFields as l,
  transformConditionals as t
};
//# sourceMappingURL=index-Ds4Bnwmy.js.map
