import { jsxs as o, jsx as e } from "react/jsx-runtime";
import { useState as c, useRef as D, useEffect as I, useMemo as fe, useCallback as me, Suspense as Q, lazy as X } from "react";
import { useTranslateProvider as pe } from "@/common/languageTranslator/TranslationContext";
import { api as M } from "@/common/interceptors/AxiosInterceptor";
import h from "@/common/services/util/GeneralUtil";
import { getNotifications as G, getAllRoleList as he } from "@/common/services/GlobalApis";
import ge from "@/common/syncWithServer/SyncWithServerDialog";
import { showToast as S } from "@/common/toaster/toaster";
import ye from "@/views/custom-components/CustomConfirmationModal";
import { debounce as be, Card as xe, Typography as H, Box as A, FormControlLabel as J, Checkbox as q, TextField as Ne, Button as ve } from "@mui/material";
import { Grid as k } from "@mui/system";
import w from "prop-types";
import { useSelector as Y } from "react-redux";
import { getUseSkeleton as Z } from "@/store/reducers/SkeletonReducer";
import we from "@/hooks/useTrackEvent";
import Ce from "@/views/custom-components/CustomizedTable/CustomizedTableV2";
import { faPen as Te, faBars as Ie } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon as K } from "@fortawesome/react-fontawesome";
import { getAssignedFeatures as Se } from "@/utils/feature";
const Ae = ({ id: s, state: r }) => M.put(
  h.isTecho ? `notificationtype/toggleActive?id=${s}&is_active=${r === "INACTIVE" ? "true" : "false"}` : `notificationtype/${s}?is_active=${r === "INACTIVE" ? "true" : "false"}`
), Xe = (s) => M.post(h.isTecho ? "notificationtype/create" : "notificationtype", s), Ye = (s) => M.post(h.isTecho ? "notificationtype/update" : "notificationtype", s), ee = ({ children: s, isLoading: r }) => !Y(Z) || !r ? s : /* @__PURE__ */ o("div", { className: "flex flex-col gap-2", children: [
  /* @__PURE__ */ o("div", { className: "flex space-between justify-between m-[0px]", children: [
    /* @__PURE__ */ e("div", { className: "bg-gray-300 animate-pulse rounded-sm w-[130px] h-[40px]" }),
    /* @__PURE__ */ o("div", { className: "flex", children: [
      /* @__PURE__ */ e("div", { className: "bg-gray-300 animate-pulse rounded-sm w-[150px] h-[40px] mx-[5px]" }),
      /* @__PURE__ */ e("div", { className: "bg-gray-300 animate-pulse rounded-sm w-[100px] h-[40px]" })
    ] })
  ] }),
  /* @__PURE__ */ e("div", { className: "bg-gray-300 animate-pulse rounded-sm w-full h-100" })
] });
ee.propTypes = {
  children: w.any,
  isLoading: w.any
};
const ke = ({ children: s, isLoading: r }) => !Y(Z) || !r ? s : /* @__PURE__ */ o("div", { className: "flex flex-col w-full md:w-[650px] bg-white ", children: [
  /* @__PURE__ */ e("div", { className: "px-2 py-2 flex  items-center  ", children: /* @__PURE__ */ e("div", { className: "bg-gray-300 animate-pulse rounded-sm w-60 h-10" }) }),
  /* @__PURE__ */ e("hr", {}),
  /* @__PURE__ */ o("div", { className: "flex flex-col w-full space-y-2 p-2", children: [
    /* @__PURE__ */ o("div", { className: "flex flex-col space-y-2", children: [
      /* @__PURE__ */ e("button", { className: "bg-gray-300 animate-pulse rounded-sm w-40 h-5  mr-[100px]" }),
      /* @__PURE__ */ e("button", { className: "bg-gray-300 animate-pulse rounded-sm w-full h-10 " })
    ] }),
    /* @__PURE__ */ o("div", { className: "flex flex-col space-y-2 ", children: [
      /* @__PURE__ */ e("button", { className: "bg-gray-300 animate-pulse rounded-sm w-40 h-5  mr-[100px]" }),
      /* @__PURE__ */ e("button", { className: "bg-gray-300 animate-pulse rounded-sm w-full h-10 " })
    ] }),
    /* @__PURE__ */ o("div", { className: "flex flex-col space-y-2 ", children: [
      /* @__PURE__ */ e("button", { className: "bg-gray-300 animate-pulse rounded-sm w-40 h-5  mr-[100px]" }),
      /* @__PURE__ */ e("button", { className: "bg-gray-300 animate-pulse rounded-sm w-full h-10 " })
    ] }),
    /* @__PURE__ */ o("div", { className: "flex flex-col space-y-2 ", children: [
      /* @__PURE__ */ e("button", { className: "bg-gray-300 animate-pulse rounded-sm w-40 h-5  mr-[100px]" }),
      /* @__PURE__ */ e("button", { className: "bg-gray-300 animate-pulse rounded-sm w-full h-10 " })
    ] }),
    /* @__PURE__ */ o("div", { className: "flex flex-col space-y-2 ", children: [
      /* @__PURE__ */ e("button", { className: "bg-gray-300 animate-pulse rounded-sm w-40 h-5 mr-[100px]" }),
      /* @__PURE__ */ e("button", { className: "bg-gray-300 animate-pulse rounded-sm w-full h-10 " })
    ] })
  ] }),
  /* @__PURE__ */ e("hr", {}),
  /* @__PURE__ */ o("div", { className: "px-2 py-2 w-full flex space-x-3 items-center justify-end ", children: [
    /* @__PURE__ */ e("div", { className: "bg-gray-300 animate-pulse rounded-sm w-20 h-10" }),
    /* @__PURE__ */ e("div", { className: "bg-gray-300 animate-pulse rounded-sm w-20 h-10" })
  ] })
] });
ke.propTypes = {
  children: w.any,
  isLoading: w.any
};
const Me = X(() => import("./ManageNotification-EQgnOO0U.js")), Ee = X(() => import("./NotificationFlywayQuery-BY8Zzml_.js"));
function Oe() {
  const s = we(), [r, N] = c(""), [C, E] = c([]), [O, g] = c([]), [y, u] = c(""), [n, v] = c({}), [T, te] = c([]), { translate: f } = pe(), [L, _] = c(null), [B, p] = c(!1), [d, ae] = c({}), ie = [
    {
      field: "notificationName",
      label: "Name",
      sortable: !0,
      sortOrder: "asc",
      align: "left"
    },
    {
      field: "code",
      label: "Code",
      sortable: !0,
      sortOrder: "asc",
      align: "left"
    },
    {
      field: "notificationType",
      label: "Type",
      align: "left",
      render: (t) => /* @__PURE__ */ e(H, { mt: 0.5, children: t.notificationType === "WEB" ? "WEB" : "MOBILE" })
    },
    {
      field: "state",
      label: "State",
      sortable: !0,
      sortOrder: "asc",
      align: "left"
    },
    { field: "Actions", label: "Actions", align: "left" }
  ], [oe, se] = c(ie), [b, ne] = c(!0), [x, le] = c(!0), F = D(b), V = D(x);
  I(() => {
    F.current = b;
  }, [b]), I(() => {
    V.current = x;
  }, [x]);
  const ce = async () => {
    try {
      p((i) => !i), await Ae({ id: n.id, state: n.state }), u("");
      const { data: t } = await G();
      E(t), g(t), S({
        type: "success",
        message: `State succesfully changed from  ${(n == null ? void 0 : n.state) === "INACTIVE" ? "inactive" : "active"} to ${(n == null ? void 0 : n.state) === "INACTIVE" ? "active" : "inactive"}`
      }), p((i) => !i);
    } catch (t) {
      S({
        type: "error",
        message: `Error ${t}`
      }), p((i) => !i);
    }
  }, re = fe(() => (t) => {
    const i = [];
    (!h.isTecho || d != null && d["update.manage.notificationlist"]) && i.push({
      label: "",
      icon: /* @__PURE__ */ e(
        K,
        {
          icon: Te,
          "data-testid": "notificationlist-button-edit"
        }
      ),
      onClick: (a) => {
        u(1), v(a);
      }
    });
    const l = [];
    return (!h.isTecho || d != null && d["update.manage.notificationlist"]) && (l.push({
      label: f(
        t.state === "ACTIVE" ? "Mark as Inactive" : "Mark as Active"
      ),
      onClick: (a) => {
        v(a), u(2);
      }
    }), l.push({
      label: f("Sync With Server"),
      onClick: (a) => {
        if (!a.uuid) {
          S({
            type: "info",
            message: "No configuration found. Please open the respective feature item and save it."
          });
          return;
        }
        u(4), _(a == null ? void 0 : a.uuid), v(a);
      }
    }), l.push({
      label: f("Show Flyway Query"),
      onClick: (a) => {
        u(3), v(a);
      }
    })), l.length > 0 && i.push({
      label: "",
      icon: /* @__PURE__ */ e(
        K,
        {
          icon: Ie,
          "data-testid": "notificationlist-button-menu"
        }
      ),
      menuItems: l
    }), i;
  }, [d, f]), $ = me(
    be((t) => {
      const i = C.filter(
        (l) => {
          var a;
          return ((a = l.notificationName) == null ? void 0 : a.toLowerCase().includes(t)) && l.state === (F.current ? "ACTIVE" : "INACTIVE") && l.notificationType === (V.current ? "MO" : "WEB");
        }
      );
      s("search_tracking", {
        searchTerm: t,
        results_count: i.length,
        search_type: "Page Search"
      }), g(i);
    }, 500),
    [C, s]
  ), de = (t) => {
    const i = t.target.value.toLowerCase();
    N(i), $(i);
  }, ue = (t) => {
    const i = t.sortOrder === "asc" ? "desc" : "asc";
    se(
      (a) => a.map((m) => m.field === t.field ? { ...m, sortOrder: i } : m)
    );
    const l = [...O].sort((a, m) => {
      var U, W;
      const j = (U = a[t.field]) == null ? void 0 : U.toString().toLowerCase(), z = (W = m[t.field]) == null ? void 0 : W.toString().toLowerCase();
      return j < z ? i === "asc" ? -1 : 1 : j > z ? i === "asc" ? 1 : -1 : 0;
    });
    g(l);
  }, P = async () => {
    try {
      p((a) => !a);
      const { data: t } = await G();
      E(t);
      const i = t.filter((a) => a.notificationType === "MO" && a.state === "ACTIVE");
      if (g(i), !T.length) {
        const { data: a } = await he();
        te(a);
      }
      const { data: l } = await Se("techo.manage.notification");
      ae(JSON.parse(l)), p((a) => !a), N("");
    } catch (t) {
      console.error("error", t), p((i) => !i);
    }
  };
  I(() => {
    P();
  }, []);
  const R = (t, i) => {
    const l = i === "status" ? t : b, a = i === "notificationType" ? t : x;
    ne(l), le(a), r ? $(r) : g(
      C.filter(
        (m) => m.state === (l ? "ACTIVE" : "INACTIVE") && m.notificationType === (a ? "MO" : "WEB")
      )
    );
  };
  return /* @__PURE__ */ o(
    xe,
    {
      variant: "elevation",
      container: !0,
      className: "mt-6 p-3 flex flex-col space-y-3 shadow-xl",
      children: [
        /* @__PURE__ */ e(Q, { children: /* @__PURE__ */ e(
          Me,
          {
            open: y === 1 || y === 5,
            handleClose: () => u(""),
            data: y === 1 ? n : null,
            roleData: T,
            setNotifications: P,
            "data-testid": "notification-list-managenotification-dialog"
          }
        ) }),
        /* @__PURE__ */ e(Q, { children: /* @__PURE__ */ e(
          Ee,
          {
            open: y === 3,
            handleClose: () => u(""),
            data: n,
            roleData: T
          }
        ) }),
        /* @__PURE__ */ e(
          ye,
          {
            title: "CONFIRM ACTION",
            open: y === 2,
            description: `Are you sure you want to change the state ${(n == null ? void 0 : n.state) === "INACTIVE" ? "inactive" : "active"} to ${(n == null ? void 0 : n.state) === "INACTIVE" ? "active" : "inactive"}`,
            handleClick: ce,
            handleClose: () => u(""),
            dataTestId: "notification-list-customconfirmationmodal-dialog"
          }
        ),
        /* @__PURE__ */ e(
          ge,
          {
            isOpen: !!L,
            handleClose: () => _(() => null),
            featureUUID: L,
            dataTestId: "notification-list-syncwithserverdialog-dialog"
          }
        ),
        /* @__PURE__ */ o(ee, { isLoading: B, children: [
          /* @__PURE__ */ o(k, { container: !0, className: "flex justify-between", children: [
            /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e(
              H,
              {
                variant: "body2",
                className: "font-bold font-sans text-lg text-customBlue uppercase",
                "data-testid": "notification-list-typography-title",
                children: f("Notification Configuration")
              }
            ) }),
            /* @__PURE__ */ o(A, { className: "flex flex-col sm:flex-row sm:items-center gap-3 w-full sm:w-auto", children: [
              /* @__PURE__ */ o(A, { className: "flex items-center gap-3", children: [
                /* @__PURE__ */ e(
                  J,
                  {
                    control: /* @__PURE__ */ e(
                      q,
                      {
                        checked: b,
                        onChange: (t) => R(t.target.checked, "status"),
                        "data-testid": "notifications-checkbox-include-active"
                      }
                    ),
                    label: f("Active"),
                    slotProps: {
                      typography: {
                        className: "custom-label"
                      }
                    }
                  }
                ),
                /* @__PURE__ */ e(
                  J,
                  {
                    control: /* @__PURE__ */ e(
                      q,
                      {
                        checked: x,
                        onChange: (t) => R(t.target.checked, "notificationType"),
                        "data-testid": "notifications-checkbox-include-mobile"
                      }
                    ),
                    label: f("Mobile"),
                    slotProps: {
                      typography: {
                        className: "custom-label"
                      }
                    }
                  }
                )
              ] }),
              /* @__PURE__ */ o(A, { className: "flex items-center gap-3 w-full sm:w-auto", children: [
                /* @__PURE__ */ e(
                  Ne,
                  {
                    id: "searchQuery",
                    placeholder: "Search Text",
                    size: "small",
                    onChange: de,
                    className: "m-0 p-0 bg-white",
                    value: r,
                    "data-testid": "notification-list-textfield-search",
                    sx: {
                      "& .MuiInputBase-root": {
                        height: "2.4em",
                        width: { xs: "100%", sm: "190px" }
                      },
                      flex: { xs: 1, sm: 1 }
                    }
                  }
                ),
                (!h.isTecho || (d == null ? void 0 : d["create.manage.notificationlist"])) && /* @__PURE__ */ e(
                  ve,
                  {
                    size: "small",
                    variant: "contained",
                    onClick: () => {
                      s("button_click", {
                        button_name: "notification-list-add-button",
                        button_type: "navigate",
                        button_id: "notification-list-button-add"
                      }), u(5);
                    },
                    "data-testid": "notification-list-button-add",
                    sx: { whiteSpace: "nowrap" },
                    children: f("Add")
                  }
                )
              ] })
            ] })
          ] }),
          /* @__PURE__ */ e(k, { size: { xs: 12 }, children: /* @__PURE__ */ e(
            Ce,
            {
              columns: oe,
              actions: re,
              tableData: O,
              paginationConfig: {
                pagination: !1
              },
              styleConfig: {
                tableStyle: {
                  maxHeight: 40
                }
              },
              handleSort: ue,
              isLoading: B,
              dataTestId: "notification-list-customizedtable"
            }
          ) })
        ] })
      ]
    }
  );
}
const Ze = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
  __proto__: null,
  default: Oe
}, Symbol.toStringTag, { value: "Module" }));
export {
  ke as M,
  Ze as N,
  Xe as c,
  Ye as u
};
//# sourceMappingURL=NotificationList-BZwvgsf6.js.map
