import { jsxs as a, Fragment as ie, jsx as e } from "react/jsx-runtime";
import { useTranslateProvider as se } from "@/common/languageTranslator/TranslationContext";
import p from "@/common/fontAwesomeIcons/FontAwesomeIcons";
import { Paper as N, Box as i, Typography as s, Button as b, Chip as j, TextField as F, InputAdornment as de, Divider as ce, List as pe, ListItem as ue, ListItemButton as fe, ListItemText as he, Tooltip as G, IconButton as K, Dialog as me, DialogTitle as xe, DialogContent as ye, Autocomplete as be, DialogActions as ge } from "@mui/material";
import J from "@mui/material/Grid2";
import u from "prop-types";
import { useState as l, useEffect as X, Suspense as Ce, lazy as ve } from "react";
import { useForm as Te } from "react-hook-form";
const Ie = ve(() => import("./TableDetails-DzREeJkm.js"));
function Se({
  tableList: t,
  tablesInfo: w,
  allTableList: x,
  allTablesInfo: D,
  formSubmitted: $,
  reloadComponents: H
}) {
  const [W, V] = l(""), [g, C] = l(""), [v, Y] = l({}), [z, T] = l({}), [f, _] = l({}), [q, I] = l({}), y = t ? t.filter((o) => o.toLowerCase().includes(W.toLowerCase())) : [], [U, h] = l(!1), [Z, S] = l(!1), [d, M] = l(), [R, m] = l(!1), [L, O] = l(!1), [ee, P] = l(!1), { translate: A } = se();
  Te({
    defaultValues: {
      field1: "",
      field2: "",
      field3: ""
    }
  }), X(() => {
    let o = {}, n = {};
    C(t[0]), o = B(w), Y((r) => ({ ...r, ...o })), n = B(D), _((r) => ({ ...r, ...n }));
  }, [w, D]), X(() => {
    T(() => v[t[0]]), I(() => f[t[0]]);
  }, [v, f]);
  const oe = (o) => {
    const n = o.toLowerCase();
    return n.includes("int") || n.includes("timestamp") || n === "boolean" || n.includes("serial") || n.includes("date") ? "INTEGER" : (n.includes("char") || n.includes("text") || n.includes("varchar"), "TEXT");
  }, B = (o) => {
    const n = {};
    return o.forEach((r) => {
      const c = JSON.parse(r.columnInfo), te = Object.keys(c).map((Q) => ({
        name: Q,
        type: oe(c[Q])
      })), le = r.mediaConfiguration !== void 0 ? JSON.parse(r.mediaConfiguration) : null;
      n[r.tableName] = {
        columnInfo: te,
        modifiedOnQuery: r.modifiedOnQuery ? r.modifiedOnQuery : null,
        primaryKey: r.primaryKey ? r.primaryKey : null,
        selectQuery: r.selectQuery ? r.selectQuery : null,
        userData: r.userData !== void 0 ? r.userData : null,
        hasMedia: r.hasMedia !== void 0 ? r.hasMedia : null,
        mediaConfiguration: le,
        syncByDefault: r.syncByDefault ? r.syncByDefault : !1
      };
    }), n;
  }, re = () => {
    m(!1), S(!0), M();
  }, ne = () => {
    h(!1), m(!0);
  }, E = () => {
    S(!1);
  }, ae = () => {
    if (d) {
      const o = { ...f[d] };
      o && (o.columnInfo = []), C(d), T(() => o), I(() => f[d]), O(!0), m(!1), h(!0);
    }
    S(!1), M(() => "");
  }, k = (o) => {
    C(o), T(() => v[o]), I(() => f[o]), h(!1), m(!1), O(!1);
  };
  return /* @__PURE__ */ a(ie, { children: [
    /* @__PURE__ */ a(
      N,
      {
        elevation: 0,
        sx: {
          p: { xs: 2.5, md: 3 },
          mt: 2,
          mb: 3,
          border: "1px solid",
          borderColor: "divider",
          borderRadius: 3,
          backgroundColor: "background.paper"
        },
        children: [
          /* @__PURE__ */ a(i, { sx: { display: "flex", flexDirection: "column", gap: 3 }, children: [
            /* @__PURE__ */ a(
              i,
              {
                sx: {
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "flex-start",
                  flexWrap: "wrap",
                  gap: 2
                },
                children: [
                  /* @__PURE__ */ a(i, { sx: { minWidth: { xs: "100%", lg: "40%" } }, children: [
                    /* @__PURE__ */ e(s, { variant: "h5", sx: { fontWeight: 800, color: "text.primary", mb: 0.5 }, children: A("Database Management") }),
                    /* @__PURE__ */ e(s, { variant: "body2", color: "text.secondary", children: "Manage synced tables, create new entities, and configure mobile database schemas." })
                  ] }),
                  /* @__PURE__ */ a(i, { sx: { display: "flex", alignItems: "center", gap: 1.5, flexWrap: "wrap" }, children: [
                    /* @__PURE__ */ e(
                      b,
                      {
                        variant: "outlined",
                        size: "small",
                        sx: {
                          borderRadius: 2,
                          fontWeight: 600,
                          px: 2,
                          textTransform: "none",
                          borderColor: "divider",
                          color: "text.primary",
                          "&:hover": { backgroundColor: "action.hover", borderColor: "text.disabled" }
                        },
                        startIcon: /* @__PURE__ */ e(p, { iconName: "faRotate" }),
                        onClick: () => re(),
                        children: "Sync Table"
                      }
                    ),
                    /* @__PURE__ */ e(
                      b,
                      {
                        size: "small",
                        variant: "contained",
                        sx: {
                          borderRadius: 2,
                          fontWeight: 600,
                          px: 2,
                          boxShadow: "none",
                          textTransform: "none"
                        },
                        startIcon: /* @__PURE__ */ e(p, { iconName: "faPlus" }),
                        onClick: () => ne(),
                        children: "Create Table"
                      }
                    )
                  ] })
                ]
              }
            ),
            /* @__PURE__ */ a(
              i,
              {
                sx: {
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "center",
                  flexWrap: "wrap",
                  gap: 2,
                  backgroundColor: "action.hover",
                  p: 1.5,
                  borderRadius: 2.5,
                  border: "1px solid",
                  borderColor: "divider"
                },
                children: [
                  /* @__PURE__ */ a(i, { sx: { display: "flex", alignItems: "center", gap: 1.5 }, children: [
                    /* @__PURE__ */ e(
                      j,
                      {
                        label: `${(t == null ? void 0 : t.length) || 0} Synced`,
                        size: "small",
                        color: "primary",
                        variant: "filled",
                        sx: { fontWeight: 700, borderRadius: 2, px: 0.5 }
                      }
                    ),
                    /* @__PURE__ */ e(
                      j,
                      {
                        label: `${(x == null ? void 0 : x.length) || 0} Total`,
                        size: "small",
                        variant: "outlined",
                        sx: { fontWeight: 600, borderRadius: 2, px: 0.5, borderColor: "divider" }
                      }
                    )
                  ] }),
                  /* @__PURE__ */ e(
                    F,
                    {
                      value: W,
                      size: "small",
                      placeholder: "Search synced tables...",
                      onChange: (o) => V(o.target.value),
                      InputProps: {
                        startAdornment: /* @__PURE__ */ e(de, { position: "start", children: /* @__PURE__ */ e(p, { iconName: "faMagnifyingGlass" }) }),
                        sx: {
                          backgroundColor: "background.paper",
                          borderRadius: 2,
                          minWidth: 260
                        }
                      }
                    }
                  )
                ]
              }
            )
          ] }),
          /* @__PURE__ */ e(ce, { sx: { my: 3 } }),
          /* @__PURE__ */ a(J, { container: !0, spacing: 2.5, children: [
            /* @__PURE__ */ e(J, { size: 3, children: /* @__PURE__ */ a(
              N,
              {
                variant: "outlined",
                sx: {
                  borderRadius: 2.5,
                  overflow: "hidden",
                  maxHeight: "72vh",
                  display: "flex",
                  flexDirection: "column"
                },
                children: [
                  /* @__PURE__ */ a(
                    i,
                    {
                      sx: {
                        px: 2,
                        py: 1.5,
                        backgroundColor: "action.hover",
                        borderBottom: "1px solid",
                        borderColor: "divider"
                      },
                      children: [
                        /* @__PURE__ */ e(s, { variant: "subtitle2", sx: { fontWeight: 700, color: "text.primary" }, children: A("Synced Tables") }),
                        /* @__PURE__ */ a(s, { variant: "caption", color: "text.secondary", children: [
                          y.length,
                          " of ",
                          (t == null ? void 0 : t.length) || 0,
                          " tables"
                        ] })
                      ]
                    }
                  ),
                  /* @__PURE__ */ e(i, { sx: { overflowY: "auto", flex: 1 }, children: y.length ? /* @__PURE__ */ e(pe, { disablePadding: !0, children: y.map((o, n) => {
                    const r = g === o;
                    return /* @__PURE__ */ e(
                      ue,
                      {
                        disablePadding: !0,
                        secondaryAction: /* @__PURE__ */ a(
                          i,
                          {
                            sx: {
                              display: "flex",
                              gap: 0.25,
                              opacity: r ? 1 : 0,
                              transition: "opacity 0.2s"
                            },
                            children: [
                              /* @__PURE__ */ e(G, { title: "Edit table", arrow: !0, placement: "top", children: /* @__PURE__ */ e(
                                K,
                                {
                                  size: "small",
                                  onClick: (c) => {
                                    c.stopPropagation(), k(o), h(!0);
                                  },
                                  sx: {
                                    color: "primary.main",
                                    "&:hover": { backgroundColor: "primary.50" }
                                  },
                                  children: /* @__PURE__ */ e(p, { iconName: "faPen", className: "text-[0.75rem]" })
                                }
                              ) }),
                              /* @__PURE__ */ e(G, { title: "Delete table", arrow: !0, placement: "top", children: /* @__PURE__ */ e(
                                K,
                                {
                                  size: "small",
                                  onClick: (c) => {
                                    c.stopPropagation(), k(o), P(!0);
                                  },
                                  sx: {
                                    color: "error.main",
                                    "&:hover": { backgroundColor: "error.50" }
                                  },
                                  children: /* @__PURE__ */ e(p, { iconName: "faTrash", className: "text-[0.75rem]" })
                                }
                              ) })
                            ]
                          }
                        ),
                        sx: {
                          borderBottom: n === y.length - 1 ? "none" : "1px solid",
                          borderColor: "divider",
                          "&:hover .MuiBox-root": { opacity: "1 !important" }
                        },
                        children: /* @__PURE__ */ e(
                          fe,
                          {
                            selected: r,
                            onClick: () => k(o),
                            sx: {
                              py: 1,
                              px: 2,
                              transition: "all 0.15s ease",
                              "&.Mui-selected": {
                                backgroundColor: "primary.50",
                                borderLeft: "3px solid",
                                borderLeftColor: "primary.main",
                                "&:hover": { backgroundColor: "primary.100" }
                              },
                              "&:hover": { backgroundColor: "action.hover" }
                            },
                            children: /* @__PURE__ */ e(
                              he,
                              {
                                primary: /* @__PURE__ */ e(
                                  s,
                                  {
                                    variant: "body2",
                                    sx: {
                                      fontWeight: r ? 600 : 400,
                                      color: r ? "primary.dark" : "text.primary",
                                      fontSize: "0.82rem",
                                      overflow: "hidden",
                                      textOverflow: "ellipsis",
                                      whiteSpace: "nowrap",
                                      maxWidth: "160px"
                                    },
                                    children: o
                                  }
                                )
                              }
                            )
                          }
                        )
                      },
                      n + 1
                    );
                  }) }) : /* @__PURE__ */ a(i, { sx: { p: 3, textAlign: "center" }, children: [
                    /* @__PURE__ */ e(p, { iconName: "faInbox", className: "text-[2rem] text-gray-300" }),
                    /* @__PURE__ */ e(s, { variant: "body2", color: "text.secondary", sx: { mt: 1 }, children: t.length < 1 ? "No tables synced" : "No tables match your search." })
                  ] }) })
                ]
              }
            ) }),
            /* @__PURE__ */ e(Ce, { children: (!!g && !!z || R) && /* @__PURE__ */ e(
              Ie,
              {
                tableInfo: z,
                table: g,
                isEditMode: U,
                updateEditMode: h,
                tableCompleteInfo: q,
                formSubmitted: $,
                reloadComponents: H,
                isCreateTableMode: R,
                isSyncTableMode: L,
                updateCreateTableMode: m,
                openDeleteModal: ee,
                setOpenDeleteModal: P
              }
            ) })
          ] })
        ]
      }
    ),
    /* @__PURE__ */ a(
      me,
      {
        open: Z,
        onClose: E,
        maxWidth: "sm",
        fullWidth: !0,
        PaperProps: {
          sx: { borderRadius: 3, p: 1 }
        },
        children: [
          /* @__PURE__ */ a(xe, { sx: { fontWeight: 700, pb: 1 }, children: [
            "Sync a Table",
            /* @__PURE__ */ e(s, { variant: "body2", color: "text.secondary", children: "Select an existing database table to sync with the mobile app." })
          ] }),
          /* @__PURE__ */ e(ye, { children: /* @__PURE__ */ e(
            be,
            {
              options: x.filter((o) => !t.includes(o)),
              getOptionLabel: (o) => o,
              value: d,
              onChange: (o, n) => M(n),
              renderInput: (o) => /* @__PURE__ */ e(
                F,
                {
                  ...o,
                  label: "Table",
                  placeholder: "Search and select a table...",
                  size: "small",
                  sx: { mt: 1 }
                }
              )
            }
          ) }),
          /* @__PURE__ */ a(ge, { sx: { px: 3, pb: 2 }, children: [
            /* @__PURE__ */ e(
              b,
              {
                onClick: E,
                variant: "outlined",
                size: "small",
                sx: { borderRadius: 2, textTransform: "none" },
                children: "Cancel"
              }
            ),
            /* @__PURE__ */ e(
              b,
              {
                variant: "contained",
                size: "small",
                onClick: () => ae(),
                disabled: !d,
                sx: { borderRadius: 2, textTransform: "none", boxShadow: "none" },
                children: "Sync Table"
              }
            )
          ] })
        ]
      }
    )
  ] });
}
Se.propTypes = {
  tableList: u.any,
  tablesInfo: u.any,
  allTableList: u.any,
  allTablesInfo: u.any,
  formSubmitted: u.bool,
  reloadComponents: u.any
};
export {
  Se as default
};
//# sourceMappingURL=TableList-B9hr05Hs.js.map
