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 { S as Search } from "./index-CcqTjOWY.js";
import { c as createStyles, R as Radio, b as Box, T as Text, g as Loader, B as Button, i as Indicator, U as UnstyledButton } from "./vendor-mantine-h0WlM2Mj.js";
import { I as IFiltersEnumType, T as useGetRolesQuery, B as convertToFilterConditions, bG as getIndicatorByUserStatus, U as UserStatusEnum, A as useGetUsersQuery } from "./index-DfebxkL9.js";
import { I as InfiniteScroll } from "./index.es-BTZFX8B-.js";
import { u as useTranslation } from "./vendor-i18n-wisIXUFi.js";
import { u as useDebounce } from "./useDebounce-DTubzIUC.js";
import { O as OverflowTip } from "./index-C-CFogWu.js";
import { w as qXe } from "./vendor-icons-xWhXK_Ui.js";
import { U as UserAvatarWithCard } from "./index-3c9En-DB.js";
import { N as NoDataText } from "./index-C_Fw_IUU.js";
const useStyles$5 = createStyles((theme, _, utils) => ({
  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",
    [utils.largerThan("xs")]: {
      width: "40%"
    }
  },
  usersButton: {
    border: "none"
  },
  usersButtonLabel: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    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 #EAECF0"
    }
  },
  selectAll: {
    marginBottom: theme.spacing.sm,
    cursor: "pointer"
  },
  loader: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    width: "100%"
  },
  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"
  },
  emptyListText: {
    fontSize: "14px",
    textAlign: "center",
    fontWeight: 400
  }
}));
const useStyles$4 = 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-Radio-root, .mantine-Radio-body, .mantine-Radio-labelWrapper": {
      width: "100%"
    }
  },
  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",
    wordWrap: "break-word",
    maxWidth: "230px",
    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
    }
  },
  radio: {
    "& .mantine-Radio-inner": {
      alignSelf: "center"
    },
    "& .mantine-Radio-label": {
      fontSize: "14px"
    }
  }
}));
const GroupItem = (t0) => {
  const $ = compilerRuntimeExports.c(24);
  const {
    defaultChecked,
    checked,
    label,
    value,
    counter,
    handleChange,
    handleClick,
    withRadioButtonbox: t1,
    selectedIdGroup
  } = t0;
  const withRadioButtonbox = t1 === void 0 ? false : t1;
  const {
    classes,
    cx
  } = useStyles$4();
  let t2;
  if ($[0] !== handleChange || $[1] !== handleClick || $[2] !== withRadioButtonbox) {
    t2 = (e) => {
      if (withRadioButtonbox && handleChange) {
        handleChange(e);
      }
      if (handleClick) {
        handleClick(e);
      }
    };
    $[0] = handleChange;
    $[1] = handleClick;
    $[2] = withRadioButtonbox;
    $[3] = t2;
  } else {
    t2 = $[3];
  }
  const handleItemClick = t2;
  const t3 = defaultChecked ?? void 0;
  const t4 = Boolean(checked);
  const t5 = Boolean(selectedIdGroup) && value === selectedIdGroup;
  let t6;
  if ($[4] !== classes.root || $[5] !== classes.selectedGroup || $[6] !== cx || $[7] !== t5) {
    t6 = cx(classes.root, {
      [classes.selectedGroup]: t5
    });
    $[4] = classes.root;
    $[5] = classes.selectedGroup;
    $[6] = cx;
    $[7] = t5;
    $[8] = t6;
  } else {
    t6 = $[8];
  }
  let t7;
  if ($[9] !== classes.checkbox || $[10] !== classes.checkboxContainer || $[11] !== classes.counter || $[12] !== counter || $[13] !== label || $[14] !== value || $[15] !== withRadioButtonbox) {
    t7 = withRadioButtonbox ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx(Radio.Indicator, {}),
      /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { className: classes.checkboxContainer, children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: classes.checkbox, pl: "sm", 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 })
    ] });
    $[9] = classes.checkbox;
    $[10] = classes.checkboxContainer;
    $[11] = classes.counter;
    $[12] = counter;
    $[13] = label;
    $[14] = value;
    $[15] = withRadioButtonbox;
    $[16] = t7;
  } else {
    t7 = $[16];
  }
  let t8;
  if ($[17] !== handleItemClick || $[18] !== t3 || $[19] !== t4 || $[20] !== t6 || $[21] !== t7 || $[22] !== value) {
    t8 = /* @__PURE__ */ jsxRuntimeExports.jsx(Radio.Card, { onClick: handleItemClick, "data-value": value, defaultChecked: t3, checked: t4, className: t6, children: t7 });
    $[17] = handleItemClick;
    $[18] = t3;
    $[19] = t4;
    $[20] = t6;
    $[21] = t7;
    $[22] = value;
    $[23] = t8;
  } else {
    t8 = $[23];
  }
  return t8;
};
const Roles = (t0) => {
  const $ = compilerRuntimeExports.c(90);
  const {
    filters,
    setFilters,
    filial,
    totalCount,
    SkipIds
  } = t0;
  const {
    t
  } = useTranslation();
  const {
    classes
  } = useStyles$5();
  const scrollRef = reactExports.useRef(null);
  let t1;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t1 = [];
    $[0] = t1;
  } else {
    t1 = $[0];
  }
  const listRef = reactExports.useRef(t1);
  const [search, setSearch] = reactExports.useState("");
  let t2;
  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
    t2 = [];
    $[1] = t2;
  } else {
    t2 = $[1];
  }
  const [listData, setListData] = reactExports.useState(t2);
  const [selectedIdGroup, setSelectedIdGroup] = reactExports.useState(null);
  let t3;
  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
    t3 = {};
    $[2] = t3;
  } else {
    t3 = $[2];
  }
  let t4;
  if ($[3] !== filial) {
    t4 = filial ? [{
      Type: IFiltersEnumType.FilialFilter,
      NumValues: [filial == null ? void 0 : filial.Id]
    }] : [];
    $[3] = filial;
    $[4] = t4;
  } else {
    t4 = $[4];
  }
  let t5;
  if ($[5] !== SkipIds) {
    t5 = SkipIds ? SkipIds : [];
    $[5] = SkipIds;
    $[6] = t5;
  } else {
    t5 = $[6];
  }
  let t6;
  if ($[7] !== search || $[8] !== t4 || $[9] !== t5) {
    t6 = {
      Count: 20,
      Offset: 0,
      SortOrder: 0,
      SortField: 0,
      Filters: t3,
      Query: search,
      FilterConditions: t4,
      SkipIds: t5
    };
    $[7] = search;
    $[8] = t4;
    $[9] = t5;
    $[10] = t6;
  } else {
    t6 = $[10];
  }
  const [roleFilters, setRoleFilters] = reactExports.useState(t6);
  let t7;
  if ($[11] !== roleFilters.FilterConditions || $[12] !== roleFilters.Filters || $[13] !== roleFilters.Offset || $[14] !== roleFilters.SkipIds || $[15] !== roleFilters.SortField || $[16] !== roleFilters.SortOrder || $[17] !== search) {
    t7 = {
      Count: 20,
      Offset: roleFilters.Offset,
      SortOrder: roleFilters.SortOrder,
      SortField: roleFilters.SortField,
      Filters: roleFilters.Filters,
      Query: search,
      FilterConditions: roleFilters.FilterConditions,
      SkipIds: roleFilters.SkipIds
    };
    $[11] = roleFilters.FilterConditions;
    $[12] = roleFilters.Filters;
    $[13] = roleFilters.Offset;
    $[14] = roleFilters.SkipIds;
    $[15] = roleFilters.SortField;
    $[16] = roleFilters.SortOrder;
    $[17] = search;
    $[18] = t7;
  } else {
    t7 = $[18];
  }
  const {
    data,
    isSuccess,
    isLoading
  } = useGetRolesQuery(t7);
  let t8;
  if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
    t8 = (event) => {
      const value = Number(event.currentTarget.dataset.value);
      setSelectedIdGroup(value);
    };
    $[19] = t8;
  } else {
    t8 = $[19];
  }
  const handleClickItem = t8;
  let t9;
  if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
    t9 = () => {
      setSelectedIdGroup(null);
    };
    $[20] = t9;
  } else {
    t9 = $[20];
  }
  const resetRoles = t9;
  let t10;
  if ($[21] !== (data == null ? void 0 : data.Items) || $[22] !== isSuccess || $[23] !== listData || $[24] !== roleFilters.Offset) {
    t10 = () => {
      var _a, _b;
      if (((_a = data == null ? void 0 : data.Items) == null ? void 0 : _a.length) && isSuccess) {
        const convertData = (_b = data == null ? void 0 : data.Items) == null ? void 0 : _b.map(_temp);
        const convertTotalData = roleFilters.Offset > 0 ? [...listData, ...convertData] : convertData;
        listRef.current = convertTotalData;
        setListData(convertTotalData);
      }
    };
    $[21] = data == null ? void 0 : data.Items;
    $[22] = isSuccess;
    $[23] = listData;
    $[24] = roleFilters.Offset;
    $[25] = t10;
  } else {
    t10 = $[25];
  }
  let t11;
  if ($[26] !== data) {
    t11 = [data];
    $[26] = data;
    $[27] = t11;
  } else {
    t11 = $[27];
  }
  reactExports.useEffect(t10, t11);
  let t12;
  if ($[28] !== filters || $[29] !== search) {
    t12 = () => {
      var _a, _b;
      if (search) {
        const filterSearch = listRef.current.filter((item_0) => item_0.label.toLocaleLowerCase().includes(search.toLocaleLowerCase()));
        setListData(filterSearch);
        return;
      }
      setListData(listRef.current);
      if (!((_b = (_a = filters.Filters) == null ? void 0 : _a.roles) == null ? void 0 : _b.length)) {
        return;
      }
    };
    $[28] = filters;
    $[29] = search;
    $[30] = t12;
  } else {
    t12 = $[30];
  }
  let t13;
  if ($[31] !== search) {
    t13 = [search];
    $[31] = search;
    $[32] = t13;
  } else {
    t13 = $[32];
  }
  reactExports.useEffect(t12, t13);
  let t14;
  if ($[33] !== selectedIdGroup || $[34] !== setFilters) {
    t14 = () => {
      const roleIds = selectedIdGroup ? [selectedIdGroup] : [];
      const roleType = IFiltersEnumType.RoleFilter.toString();
      setFilters((prevState) => ({
        ...prevState,
        Offset: 0,
        FilterConditions: selectedIdGroup ? convertToFilterConditions({
          [roleType]: roleIds
        }) : []
      }));
    };
    $[33] = selectedIdGroup;
    $[34] = setFilters;
    $[35] = t14;
  } else {
    t14 = $[35];
  }
  let t15;
  if ($[36] !== selectedIdGroup) {
    t15 = [selectedIdGroup];
    $[36] = selectedIdGroup;
    $[37] = t15;
  } else {
    t15 = $[37];
  }
  reactExports.useEffect(t14, t15);
  let t16;
  if ($[38] !== (data == null ? void 0 : data.TotalCount) || $[39] !== roleFilters) {
    t16 = () => {
      const newOffset = roleFilters.Offset + 20;
      if ((data == null ? void 0 : data.TotalCount) && newOffset < (data == null ? void 0 : data.TotalCount)) {
        setRoleFilters({
          ...roleFilters,
          Offset: newOffset
        });
      }
    };
    $[38] = data == null ? void 0 : data.TotalCount;
    $[39] = roleFilters;
    $[40] = t16;
  } else {
    t16 = $[40];
  }
  const handleLoadMore = t16;
  const t17 = classes.root;
  let t18;
  if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
    t18 = () => resetRoles();
    $[41] = t18;
  } else {
    t18 = $[41];
  }
  let t19;
  if ($[42] !== classes.usersButton || $[43] !== classes.usersButtonLabel) {
    t19 = {
      root: classes.usersButton,
      label: classes.usersButtonLabel
    };
    $[42] = classes.usersButton;
    $[43] = classes.usersButtonLabel;
    $[44] = t19;
  } else {
    t19 = $[44];
  }
  let t20;
  if ($[45] !== t) {
    t20 = t("users.allUsers");
    $[45] = t;
    $[46] = t20;
  } else {
    t20 = $[46];
  }
  let t21;
  if ($[47] !== t20) {
    t21 = /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { span: true, size: "sm", fw: "600", children: t20 });
    $[47] = t20;
    $[48] = t21;
  } else {
    t21 = $[48];
  }
  let t22;
  if ($[49] !== totalCount) {
    t22 = /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { span: true, size: "sm", fw: "600", children: totalCount });
    $[49] = totalCount;
    $[50] = t22;
  } else {
    t22 = $[50];
  }
  let t23;
  if ($[51] !== t19 || $[52] !== t21 || $[53] !== t22) {
    t23 = /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { onClick: t18, fullWidth: true, classNames: t19, variant: "default", radius: "md", bg: "#EAECF0", h: 44, mb: 22, children: [
      t21,
      t22
    ] });
    $[51] = t19;
    $[52] = t21;
    $[53] = t22;
    $[54] = t23;
  } else {
    t23 = $[54];
  }
  const t24 = classes.control;
  let t25;
  if ($[55] !== t) {
    t25 = t("profile.roles");
    $[55] = t;
    $[56] = t25;
  } else {
    t25 = $[56];
  }
  let t26;
  if ($[57] !== t25) {
    t26 = /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { fw: "600", fz: "14", children: t25 });
    $[57] = t25;
    $[58] = t26;
  } else {
    t26 = $[58];
  }
  const t27 = classes.search;
  let t28;
  if ($[59] !== t) {
    t28 = t("selectGroup.searchRole");
    $[59] = t;
    $[60] = t28;
  } else {
    t28 = $[60];
  }
  let t29;
  if ($[61] !== classes.search || $[62] !== search || $[63] !== t28) {
    t29 = /* @__PURE__ */ jsxRuntimeExports.jsx(Search, { setSearch, className: t27, fullSize: true, value: search, placeholder: t28 });
    $[61] = classes.search;
    $[62] = search;
    $[63] = t28;
    $[64] = t29;
  } else {
    t29 = $[64];
  }
  let t30;
  if ($[65] === Symbol.for("react.memo_cache_sentinel")) {
    t30 = {
      height: "300px",
      width: "100%"
    };
    $[65] = t30;
  } else {
    t30 = $[65];
  }
  let t31;
  if ($[66] !== classes.loader || $[67] !== isLoading) {
    t31 = isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { className: classes.loader, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, { size: "sm" }) });
    $[66] = classes.loader;
    $[67] = isLoading;
    $[68] = t31;
  } else {
    t31 = $[68];
  }
  let t32;
  if ($[69] !== classes.emptyListText || $[70] !== classes.infiniteScroll || $[71] !== classes.infiniteScrollMoreData || $[72] !== data || $[73] !== handleLoadMore || $[74] !== listData || $[75] !== selectedIdGroup || $[76] !== t) {
    t32 = (listData == null ? void 0 : listData.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx(InfiniteScroll, { ref: scrollRef, dataLength: (listData == null ? void 0 : listData.length) || 20, next: handleLoadMore, hasMore: data ? (data == null ? void 0 : data.TotalCount) > (listData == null ? void 0 : listData.length) : false, loader: (listData == null ? void 0 : listData.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { className: classes.infiniteScrollMoreData, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, { size: "sm" }) }) : null, className: classes.infiniteScroll, height: "300px", children: listData == null ? void 0 : listData.map((item_1, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(GroupItem, { checked: item_1.checked, label: item_1.label, handleClick: handleClickItem, value: Number(item_1.value), selectedIdGroup }, index)) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: classes.emptyListText, children: t("requestsErrors.roleNotFound") });
    $[69] = classes.emptyListText;
    $[70] = classes.infiniteScroll;
    $[71] = classes.infiniteScrollMoreData;
    $[72] = data;
    $[73] = handleLoadMore;
    $[74] = listData;
    $[75] = selectedIdGroup;
    $[76] = t;
    $[77] = t32;
  } else {
    t32 = $[77];
  }
  let t33;
  if ($[78] !== t31 || $[79] !== t32) {
    t33 = /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: t30, children: [
      t31,
      t32
    ] });
    $[78] = t31;
    $[79] = t32;
    $[80] = t33;
  } else {
    t33 = $[80];
  }
  let t34;
  if ($[81] !== classes.control || $[82] !== t26 || $[83] !== t29 || $[84] !== t33) {
    t34 = /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { className: t24, children: [
      t26,
      t29,
      t33
    ] });
    $[81] = classes.control;
    $[82] = t26;
    $[83] = t29;
    $[84] = t33;
    $[85] = t34;
  } else {
    t34 = $[85];
  }
  let t35;
  if ($[86] !== classes.root || $[87] !== t23 || $[88] !== t34) {
    t35 = /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { className: t17, children: [
      t23,
      t34
    ] });
    $[86] = classes.root;
    $[87] = t23;
    $[88] = t34;
    $[89] = t35;
  } else {
    t35 = $[89];
  }
  return t35;
};
function _temp(item) {
  return {
    label: item.Name,
    value: item.Id,
    checked: false,
    counter: item.Counter
  };
}
const useStyles$3 = createStyles((_, __, utils) => ({
  root: {
    width: "100%",
    height: "100%",
    display: "flex",
    alignItems: "flex-start",
    flexDirection: "column",
    justifyContent: "space-between",
    [utils.largerThan("xs")]: {
      flexDirection: "row"
    }
  },
  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 useStyles$2 = createStyles((theme, _, utils) => ({
  root: {
    width: "100%",
    height: "100%",
    display: "flex",
    padding: `${theme.spacing.sm} ${theme.spacing.sm} 0px ${theme.spacing.md}`,
    [utils.largerThan("xs")]: {
      width: "60%"
    }
  },
  container: {
    width: "100%",
    height: "100%"
  },
  loader: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    width: "100%"
  },
  search: {
    marginBottom: theme.spacing.md,
    "& input": {
      border: "1px solid #EAECF0"
    }
  },
  infiniteScrollMoreData: {
    width: "100%",
    height: "50px",
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  },
  infiniteScroll: {
    "&::-webkit-scrollbar": {
      width: "8px",
      height: "10px"
    },
    "&::-webkit-scrollbar-thumb": {
      borderRadius: "8px",
      background: "#98A2B3"
    },
    "&::-webkit-scrollbar-track": {
      background: "#F9FAFB"
    },
    scrollbarColor: "#98A2B3 #F9FAFB"
  },
  emptyListText: {
    fontSize: "14px",
    textAlign: "center"
  }
}));
const useStyles$1 = createStyles((theme, _, utils) => ({
  user: {
    width: "100%",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    flexDirection: "row",
    margin: 0,
    padding: `${theme.spacing.sm} ${theme.spacing.xs}`,
    cursor: "pointer",
    marginBottom: "3px",
    "&:hover": {
      [utils.dark]: {
        backgroundColor: theme.colors.dark[7],
        color: theme.white
      },
      [utils.light]: {
        backgroundColor: theme.colors.gray[2],
        color: theme.black
      }
    }
  },
  content: {
    height: "100%",
    width: "80%",
    display: "flex",
    alignItems: "flex-start",
    justifyContent: "center",
    flexDirection: "column",
    marginLeft: theme.spacing.sm
  },
  selectedUser: {
    [utils.dark]: {
      backgroundColor: theme.colors.dark[7],
      color: theme.white
    },
    [utils.light]: {
      backgroundColor: theme.colors.gray[2],
      color: theme.black
    }
  },
  disabledUser: {
    opacity: "0.5",
    backgroundColor: theme.colors.gray[0],
    pointerEvents: "none"
  }
}));
const UserListItem = (t0) => {
  const $ = compilerRuntimeExports.c(41);
  const {
    item,
    handleClick,
    userId,
    checkedUsers,
    multiple,
    usersList
  } = t0;
  const {
    t
  } = useTranslation();
  const {
    classes,
    cx
  } = useStyles$1();
  let t1;
  if ($[0] !== item.Status || $[1] !== t) {
    t1 = getIndicatorByUserStatus(item.Status, t);
    $[0] = item.Status;
    $[1] = t;
    $[2] = t1;
  } else {
    t1 = $[2];
  }
  const {
    color
  } = t1;
  let T0;
  let isDisabled;
  let t2;
  let t3;
  if ($[3] !== checkedUsers || $[4] !== classes.disabledUser || $[5] !== classes.selectedUser || $[6] !== classes.user || $[7] !== cx || $[8] !== item.Id || $[9] !== multiple || $[10] !== userId || $[11] !== usersList) {
    isDisabled = usersList == null ? void 0 : usersList.some((user) => user.Id === item.Id);
    T0 = Box;
    t2 = item.Id;
    t3 = cx(classes.user, {
      [classes.selectedUser]: userId === item.Id && !multiple || multiple && (checkedUsers == null ? void 0 : checkedUsers.includes(item.Id))
    }, {
      [classes.disabledUser]: isDisabled && multiple
    });
    $[3] = checkedUsers;
    $[4] = classes.disabledUser;
    $[5] = classes.selectedUser;
    $[6] = classes.user;
    $[7] = cx;
    $[8] = item.Id;
    $[9] = multiple;
    $[10] = userId;
    $[11] = usersList;
    $[12] = T0;
    $[13] = isDisabled;
    $[14] = t2;
    $[15] = t3;
  } else {
    T0 = $[12];
    isDisabled = $[13];
    t2 = $[14];
    t3 = $[15];
  }
  const t4 = !isDisabled ? handleClick : void 0;
  let t5;
  if ($[16] !== item.Status) {
    t5 = (item == null ? void 0 : item.Status) === UserStatusEnum.Ban ? /* @__PURE__ */ jsxRuntimeExports.jsx(qXe, { size: "8", stroke: "4" }) : "";
    $[16] = item.Status;
    $[17] = t5;
  } else {
    t5 = $[17];
  }
  const t6 = (item == null ? void 0 : item.Status) === UserStatusEnum.Ban ? 15 : 0;
  let t7;
  if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
    t7 = {
      zIndex: 3e3
    };
    $[18] = t7;
  } else {
    t7 = $[18];
  }
  let t8;
  if ($[19] !== item) {
    t8 = /* @__PURE__ */ jsxRuntimeExports.jsx(UserAvatarWithCard, { size: 40, src: item.Avatar, user: item, hoverCardProps: t7 });
    $[19] = item;
    $[20] = t8;
  } else {
    t8 = $[20];
  }
  let t9;
  if ($[21] !== color || $[22] !== t5 || $[23] !== t6 || $[24] !== t8) {
    t9 = /* @__PURE__ */ jsxRuntimeExports.jsx(Indicator, { label: t5, size: t6, offset: 6, position: "bottom-start", color, zIndex: 100, children: t8 });
    $[21] = color;
    $[22] = t5;
    $[23] = t6;
    $[24] = t8;
    $[25] = t9;
  } else {
    t9 = $[25];
  }
  const t10 = `${item.Surname} ${item.FirstName || ""}`;
  let t11;
  if ($[26] !== t10) {
    t11 = /* @__PURE__ */ jsxRuntimeExports.jsx(OverflowTip, { size: "sm", fw: 400, children: t10 });
    $[26] = t10;
    $[27] = t11;
  } else {
    t11 = $[27];
  }
  let t12;
  if ($[28] !== item.Email) {
    t12 = /* @__PURE__ */ jsxRuntimeExports.jsx(OverflowTip, { color: "dimmed", size: "xs", children: item.Email });
    $[28] = item.Email;
    $[29] = t12;
  } else {
    t12 = $[29];
  }
  let t13;
  if ($[30] !== classes.content || $[31] !== t11 || $[32] !== t12) {
    t13 = /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { className: classes.content, children: [
      t11,
      t12
    ] });
    $[30] = classes.content;
    $[31] = t11;
    $[32] = t12;
    $[33] = t13;
  } else {
    t13 = $[33];
  }
  let t14;
  if ($[34] !== T0 || $[35] !== t13 || $[36] !== t2 || $[37] !== t3 || $[38] !== t4 || $[39] !== t9) {
    t14 = /* @__PURE__ */ jsxRuntimeExports.jsxs(T0, { "data-id": t2, className: t3, onClick: t4, children: [
      t9,
      t13
    ] });
    $[34] = T0;
    $[35] = t13;
    $[36] = t2;
    $[37] = t3;
    $[38] = t4;
    $[39] = t9;
    $[40] = t14;
  } else {
    t14 = $[40];
  }
  return t14;
};
const Users = ({
  multiple,
  setSelectedUsers,
  userId,
  users,
  filters,
  setFilters,
  setUsers,
  usersList,
  filial,
  SkipIds = []
}) => {
  const {
    t
  } = useTranslation();
  const {
    classes
  } = useStyles$2();
  const scrollRef = reactExports.useRef(null);
  const [search, setSearch] = reactExports.useState("");
  const {
    Users: Users2,
    TotalCount
  } = users;
  const debounced = useDebounce(search, 500);
  const {
    data,
    isLoading,
    isFetching
  } = useGetUsersQuery({
    Count: 20,
    Offset: filters.Offset || 0,
    SortOrder: 0,
    SortField: 0,
    Filters: filters.Filters,
    Query: debounced,
    FilterConditions: filial ? (filters.FilterConditions || []).concat({
      Type: IFiltersEnumType.FilialFilter,
      NumValues: [filial == null ? void 0 : filial.Id]
    }) : filters.FilterConditions,
    SkipIds
  });
  const [checkedUsers, setCheckedUsers] = reactExports.useState([]);
  reactExports.useEffect(() => {
    if (multiple) {
      setSelectedUsers(checkedUsers);
    }
  }, [checkedUsers]);
  const handleUserListClick = reactExports.useCallback((event) => {
    const id = Number(event.currentTarget.dataset.id);
    if (!multiple) {
      const findUser = Users2 == null ? void 0 : Users2.find((item) => item.Id === id);
      if (findUser) {
        setSelectedUsers(findUser);
      }
    } else {
      setCheckedUsers((previousUserIds) => {
        if (previousUserIds.includes(id)) {
          return previousUserIds.filter((previousUserId) => id !== previousUserId);
        } else {
          return [...previousUserIds, id];
        }
      });
    }
  }, [Users2]);
  const handleLoadMore = () => {
    setFilters((prevState) => ({
      ...prevState,
      Offset: prevState.Offset + 20
    }));
  };
  reactExports.useEffect(() => {
    if (data) {
      const usersData = (filters == null ? void 0 : filters.Offset) > 0 ? [...Users2, ...data.Users] : data.Users;
      setUsers({
        ...data,
        Users: usersData
      });
    }
  }, [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);
    }
    setFilters((prevState_0) => ({
      ...prevState_0,
      Query: search,
      Offset: 0
    }));
  }, [search]);
  return /* @__PURE__ */ jsxRuntimeExports.jsx(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("users.searchUsers") }),
    /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: {
      width: "100%",
      height: "100%"
    }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(InfiniteScroll, { ref: scrollRef, dataLength: (Users2 == null ? void 0 : Users2.length) || 20, next: handleLoadMore, hasMore: TotalCount > (Users2 == null ? void 0 : Users2.length), loader: /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: Boolean(Users2 == null ? void 0 : Users2.length) && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { className: classes.infiniteScrollMoreData, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, { size: "sm" }) }) }), className: classes.infiniteScroll, height: "417px", children: [
      isLoading || isFetching ? /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { className: classes.loader, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, { size: "sm" }) }) : null,
      (Users2 == null ? void 0 : Users2.length) === 0 && search && !isFetching && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: classes.emptyListText, children: t("userNotFound") }),
      (Users2 == null ? void 0 : Users2.length) === 0 && !search && !isFetching && /* @__PURE__ */ jsxRuntimeExports.jsx(NoDataText, {}),
      (Users2 == null ? void 0 : Users2.length) > 0 && !isLoading && (Users2 == null ? void 0 : Users2.map((item_0) => {
        return /* @__PURE__ */ jsxRuntimeExports.jsx(UserListItem, { item: item_0, userId, handleClick: handleUserListClick, checkedUsers, multiple, usersList }, item_0.Id);
      }))
    ] }) })
  ] }) });
};
const useStyles = createStyles((theme) => ({
  control: {
    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: 100
  },
  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)`
    }
  }
}));
const ControlSection = (t0) => {
  const $ = compilerRuntimeExports.c(23);
  const {
    handleClose,
    userId,
    controlSectionProps
  } = t0;
  const {
    t
  } = useTranslation();
  const {
    classes
  } = useStyles();
  let t1;
  if ($[0] !== (controlSectionProps == null ? void 0 : controlSectionProps.cancelProps) || $[1] !== handleClose) {
    t1 = () => {
      if (controlSectionProps == null ? void 0 : controlSectionProps.cancelProps.fn) {
        controlSectionProps == null ? void 0 : controlSectionProps.cancelProps.fn();
      } else {
        handleClose();
      }
    };
    $[0] = controlSectionProps == null ? void 0 : controlSectionProps.cancelProps;
    $[1] = handleClose;
    $[2] = t1;
  } else {
    t1 = $[2];
  }
  const handleCancel = t1;
  let t2;
  if ($[3] !== (controlSectionProps == null ? void 0 : controlSectionProps.confirmProps)) {
    t2 = () => {
      var _a, _b;
      ((_a = controlSectionProps == null ? void 0 : controlSectionProps.confirmProps) == null ? void 0 : _a.fn) && ((_b = controlSectionProps == null ? void 0 : controlSectionProps.confirmProps) == null ? void 0 : _b.fn());
    };
    $[3] = controlSectionProps == null ? void 0 : controlSectionProps.confirmProps;
    $[4] = t2;
  } else {
    t2 = $[4];
  }
  const handleConfirm = t2;
  const t3 = !userId;
  let t4;
  if ($[5] !== (controlSectionProps == null ? void 0 : controlSectionProps.confirmProps.btnName) || $[6] !== t) {
    t4 = (controlSectionProps == null ? void 0 : controlSectionProps.confirmProps.btnName) ?? t("add");
    $[5] = controlSectionProps == null ? void 0 : controlSectionProps.confirmProps.btnName;
    $[6] = t;
    $[7] = t4;
  } else {
    t4 = $[7];
  }
  let t5;
  if ($[8] !== handleConfirm || $[9] !== t3 || $[10] !== t4) {
    t5 = /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { size: "sm", radius: 8, w: "49%", disabled: t3, onClick: handleConfirm, children: t4 });
    $[8] = handleConfirm;
    $[9] = t3;
    $[10] = t4;
    $[11] = t5;
  } else {
    t5 = $[11];
  }
  let t6;
  if ($[12] !== (controlSectionProps == null ? void 0 : controlSectionProps.cancelProps.btnName) || $[13] !== t) {
    t6 = (controlSectionProps == null ? void 0 : controlSectionProps.cancelProps.btnName) ?? t("cancel");
    $[12] = controlSectionProps == null ? void 0 : controlSectionProps.cancelProps.btnName;
    $[13] = t;
    $[14] = t6;
  } else {
    t6 = $[14];
  }
  let t7;
  if ($[15] !== classes.cancelBtn || $[16] !== handleCancel || $[17] !== t6) {
    t7 = /* @__PURE__ */ jsxRuntimeExports.jsx(UnstyledButton, { ml: 8, className: classes.cancelBtn, w: "49%", onClick: handleCancel, children: t6 });
    $[15] = classes.cancelBtn;
    $[16] = handleCancel;
    $[17] = t6;
    $[18] = t7;
  } else {
    t7 = $[18];
  }
  let t8;
  if ($[19] !== classes.control || $[20] !== t5 || $[21] !== t7) {
    t8 = /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { className: classes.control, children: [
      t5,
      t7
    ] });
    $[19] = classes.control;
    $[20] = t5;
    $[21] = t7;
    $[22] = t8;
  } else {
    t8 = $[22];
  }
  return t8;
};
const SelectUserModal = (t0) => {
  const $ = compilerRuntimeExports.c(35);
  const {
    isOpened,
    title,
    onClose,
    setSelectedUsers,
    userId,
    controlSection,
    multipleUsers,
    controlSectionProps,
    usersList,
    filial,
    SkipUsersIds
  } = t0;
  const {
    classes
  } = useStyles$3();
  let t1;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t1 = {};
    $[0] = t1;
  } else {
    t1 = $[0];
  }
  const [users, setUsers] = reactExports.useState(t1);
  let t2;
  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
    t2 = {};
    $[1] = t2;
  } else {
    t2 = $[1];
  }
  const [filters, setFilters] = reactExports.useState(t2);
  const [totalCount, setTotalCount] = reactExports.useState(0);
  let t3;
  if ($[2] !== totalCount || $[3] !== users.TotalCount) {
    t3 = () => {
      if (users.TotalCount && totalCount === 0) {
        setTotalCount(users.TotalCount);
      }
    };
    $[2] = totalCount;
    $[3] = users.TotalCount;
    $[4] = t3;
  } else {
    t3 = $[4];
  }
  let t4;
  if ($[5] !== users) {
    t4 = [users];
    $[5] = users;
    $[6] = t4;
  } else {
    t4 = $[6];
  }
  reactExports.useEffect(t3, t4);
  let t5;
  if ($[7] !== filial || $[8] !== filters || $[9] !== totalCount) {
    t5 = /* @__PURE__ */ jsxRuntimeExports.jsx(Roles, { totalCount, filters, setFilters, filial });
    $[7] = filial;
    $[8] = filters;
    $[9] = totalCount;
    $[10] = t5;
  } else {
    t5 = $[10];
  }
  let t6;
  if ($[11] !== SkipUsersIds || $[12] !== filial || $[13] !== filters || $[14] !== multipleUsers || $[15] !== setSelectedUsers || $[16] !== userId || $[17] !== users || $[18] !== usersList) {
    t6 = multipleUsers ? /* @__PURE__ */ jsxRuntimeExports.jsx(Users, { setSelectedUsers, userId, users, filters, setFilters, setUsers, multiple: multipleUsers, usersList, filial, SkipIds: SkipUsersIds }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Users, { setSelectedUsers, userId, users, filters, setFilters, setUsers, multiple: multipleUsers, filial, SkipIds: SkipUsersIds });
    $[11] = SkipUsersIds;
    $[12] = filial;
    $[13] = filters;
    $[14] = multipleUsers;
    $[15] = setSelectedUsers;
    $[16] = userId;
    $[17] = users;
    $[18] = usersList;
    $[19] = t6;
  } else {
    t6 = $[19];
  }
  let t7;
  if ($[20] !== classes.root || $[21] !== t5 || $[22] !== t6) {
    t7 = /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { className: classes.root, children: [
      t5,
      t6
    ] });
    $[20] = classes.root;
    $[21] = t5;
    $[22] = t6;
    $[23] = t7;
  } else {
    t7 = $[23];
  }
  let t8;
  if ($[24] !== controlSection || $[25] !== controlSectionProps || $[26] !== onClose || $[27] !== userId) {
    t8 = controlSection && /* @__PURE__ */ jsxRuntimeExports.jsx(ControlSection, { userId, handleClose: onClose, controlSectionProps });
    $[24] = controlSection;
    $[25] = controlSectionProps;
    $[26] = onClose;
    $[27] = userId;
    $[28] = t8;
  } else {
    t8 = $[28];
  }
  let t9;
  if ($[29] !== isOpened || $[30] !== onClose || $[31] !== t7 || $[32] !== t8 || $[33] !== title) {
    t9 = /* @__PURE__ */ jsxRuntimeExports.jsxs(Modal, { size: "630px", opened: isOpened, title, onClose, children: [
      t7,
      t8
    ] });
    $[29] = isOpened;
    $[30] = onClose;
    $[31] = t7;
    $[32] = t8;
    $[33] = title;
    $[34] = t9;
  } else {
    t9 = $[34];
  }
  return t9;
};
export {
  GroupItem as G,
  SelectUserModal as S
};
//# sourceMappingURL=index-DFEP7Sv_.js.map
