import { E as compilerRuntimeExports, r as reactExports, j as jsxRuntimeExports } from "./vendor-react-DYNCg6N5.js";
import { c as createStyles, a0 as SimpleGrid, O as Badge, h as ActionIcon, b as Box } from "./vendor-mantine-h0WlM2Mj.js";
import { w as qXe } from "./vendor-icons-xWhXK_Ui.js";
import { O as themeColors } from "./index-DfebxkL9.js";
import { A as AddButton } from "./index-72JBTuLT.js";
import { S as SelectGroupModal } from "./index-Ds4Bnwmy.js";
import { u as useTranslation } from "./vendor-i18n-wisIXUFi.js";
const useStyles = createStyles((theme) => ({
  root: {
    height: "100%",
    width: "100%"
  },
  container: {
    display: "flex",
    flexDirection: "column",
    alignItems: "flex-start",
    justifyContent: "center"
  },
  title: {
    fontSize: "16px",
    marginBottom: theme.spacing.md,
    fontWeight: 600
  },
  groupButton: {
    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)`
    }
  },
  control: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-start",
    marginTop: theme.spacing.md
  },
  addBtn: {
    borderRadius: "8px",
    border: `1px solid ${theme.colors.brandGray[0]}`,
    "&:hover": {
      backgroundColor: "#f6f7f8"
    },
    "& .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,
    marginBottom: theme.spacing.xs,
    border: "none",
    textTransform: "inherit",
    height: "28px",
    fontSize: "14px",
    padding: theme.spacing.xs,
    fontWeight: 400
  }
}));
const Roles = (t0) => {
  const $ = compilerRuntimeExports.c(39);
  const {
    form,
    fieldName,
    Roles: Roles2,
    isLimitedAccess,
    isEditPage,
    disabled
  } = t0;
  const {
    t
  } = useTranslation();
  const {
    classes
  } = useStyles();
  const [addUserInGroupModal, setAddUserInGroupModal] = reactExports.useState(false);
  let t1;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t1 = {};
    $[0] = t1;
  } else {
    t1 = $[0];
  }
  const [selectedGroup, setSelectedGroup] = reactExports.useState(t1);
  let t2;
  if ($[1] !== Roles2 || $[2] !== fieldName || $[3] !== form) {
    t2 = (roles) => {
      const filtered = roles == null ? void 0 : roles.filter((obj) => !(Roles2 == null ? void 0 : Roles2.some((item) => item.Id === obj.Id)));
      filtered == null ? void 0 : filtered.map((role) => {
        form.insertListItem(fieldName, {
          ...role,
          IsRemovable: true
        });
      });
      setAddUserInGroupModal(false);
    };
    $[1] = Roles2;
    $[2] = fieldName;
    $[3] = form;
    $[4] = t2;
  } else {
    t2 = $[4];
  }
  const handleAddRole = t2;
  let t3;
  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
    t3 = () => {
      setAddUserInGroupModal(false);
    };
    $[5] = t3;
  } else {
    t3 = $[5];
  }
  const closeAddUserInGroupModal = t3;
  let t4;
  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
    t4 = () => {
      setAddUserInGroupModal(true);
    };
    $[6] = t4;
  } else {
    t4 = $[6];
  }
  const openAddUserInGroupModal = t4;
  const t5 = classes.root;
  let t6;
  if ($[7] !== classes.addBtn || $[8] !== disabled || $[9] !== isLimitedAccess || $[10] !== t) {
    t6 = isLimitedAccess ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(SimpleGrid, { cols: {
      base: 1,
      xs: 2
    }, w: "100%", children: /* @__PURE__ */ jsxRuntimeExports.jsx(AddButton, { className: classes.addBtn, onClick: openAddUserInGroupModal, mb: "16px", "data-cy": "addRoleBtn", disabled, children: t("profile.addRole") }) });
    $[7] = classes.addBtn;
    $[8] = disabled;
    $[9] = isLimitedAccess;
    $[10] = t;
    $[11] = t6;
  } else {
    t6 = $[11];
  }
  let t7;
  if ($[12] !== Roles2 || $[13] !== classes.badge || $[14] !== fieldName || $[15] !== form || $[16] !== isEditPage || $[17] !== isLimitedAccess) {
    t7 = Roles2 == null ? void 0 : Roles2.map((item_0, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { className: classes.badge, variant: "outline", rightSection: !isLimitedAccess && (!isEditPage || item_0.IsRemovable) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ActionIcon, { "data-id": item_0.Id, size: 16, variant: "transparent", onClick: () => form.removeListItem(`${fieldName}`, index), children: /* @__PURE__ */ jsxRuntimeExports.jsx(qXe, { size: 16, color: themeColors.brandGray[0] }) }) : null, "data-cy": `${item_0.Name}`, children: item_0.Name }, item_0.Id));
    $[12] = Roles2;
    $[13] = classes.badge;
    $[14] = fieldName;
    $[15] = form;
    $[16] = isEditPage;
    $[17] = isLimitedAccess;
    $[18] = t7;
  } else {
    t7 = $[18];
  }
  let t8;
  if ($[19] !== t7) {
    t8 = /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { children: t7 });
    $[19] = t7;
    $[20] = t8;
  } else {
    t8 = $[20];
  }
  let t9;
  if ($[21] !== classes.container || $[22] !== t6 || $[23] !== t8) {
    t9 = /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { className: classes.container, children: [
      t6,
      t8
    ] });
    $[21] = classes.container;
    $[22] = t6;
    $[23] = t8;
    $[24] = t9;
  } else {
    t9 = $[24];
  }
  let t10;
  if ($[25] !== t) {
    t10 = t("profile.addRole");
    $[25] = t;
    $[26] = t10;
  } else {
    t10 = $[26];
  }
  let t11;
  if ($[27] !== Roles2) {
    t11 = Roles2 || [];
    $[27] = Roles2;
    $[28] = t11;
  } else {
    t11 = $[28];
  }
  let t12;
  if ($[29] !== addUserInGroupModal || $[30] !== handleAddRole || $[31] !== selectedGroup || $[32] !== t10 || $[33] !== t11) {
    t12 = /* @__PURE__ */ jsxRuntimeExports.jsx(SelectGroupModal, { isOpened: addUserInGroupModal, title: t10, onClose: closeAddUserInGroupModal, setSelectedGroup, selectedGroup, setGroups: handleAddRole, groups: t11 });
    $[29] = addUserInGroupModal;
    $[30] = handleAddRole;
    $[31] = selectedGroup;
    $[32] = t10;
    $[33] = t11;
    $[34] = t12;
  } else {
    t12 = $[34];
  }
  let t13;
  if ($[35] !== classes.root || $[36] !== t12 || $[37] !== t9) {
    t13 = /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { className: t5, children: [
      t9,
      t12
    ] });
    $[35] = classes.root;
    $[36] = t12;
    $[37] = t9;
    $[38] = t13;
  } else {
    t13 = $[38];
  }
  return t13;
};
export {
  Roles as R
};
//# sourceMappingURL=index-DOixMRp5.js.map
