import { jsxs as t, jsx as e } from "react/jsx-runtime";
import { Icon as d } from "@iconify/react";
import { useTheme as u, Box as i, Button as a } from "@mui/material";
import r from "prop-types";
function y({ optionalComponent: n, index: p, installStatus: l = "", hasPermission: m, t: s }) {
  const { palette: x } = u(), h = () => {
    window.open(n?.installUrl, "_blank");
  }, f = () => {
    window.open(n?.storeUrl, "_blank");
  }, g = () => {
    window.location.reload();
  }, c = l === "stopped" || l === "running", o = 60;
  return /* @__PURE__ */ t(i, { children: [
    p === 0 ? null : /* @__PURE__ */ e(i, { sx: { width: "100%", height: "1px", backgroundColor: "grey.100" } }),
    /* @__PURE__ */ t(
      i,
      {
        sx: {
          padding: "20px 24px",
          paddingTop: 0.5,
          marginTop: 2,
          display: "flex",
          flexDirection: "row",
          justifyContent: "start",
          alignItems: "flex-start"
        },
        children: [
          /* @__PURE__ */ e(
            "img",
            {
              style: { width: o, height: o, minWidth: o, minHeight: o },
              src: n.logoUrl,
              alt: n.meta.title
            }
          ),
          /* @__PURE__ */ t(
            i,
            {
              sx: {
                display: "flex",
                flexDirection: "column",
                justifyContent: "start",
                alignItems: "start",
                marginLeft: 2
              },
              children: [
                /* @__PURE__ */ t(
                  i,
                  {
                    sx: {
                      fontSize: "16px",
                      fontWeight: "bold",
                      cursor: "pointer",
                      ".link-icon": {
                        opacity: 0
                      },
                      ":hover .link-icon": {
                        opacity: 1
                      }
                    },
                    onClick: () => f(n.meta?.did),
                    children: [
                      n.meta.title,
                      /* @__PURE__ */ t(
                        i,
                        {
                          sx: {
                            paddingLeft: 1,
                            fontSize: "13px",
                            fontWeight: "400"
                          },
                          component: "span",
                          children: [
                            n.meta.version,
                            /* @__PURE__ */ e(
                              d,
                              {
                                className: "link-icon",
                                icon: "fluent:open-20-filled",
                                style: {
                                  color: x.primary.main,
                                  fontSize: 16,
                                  transform: "translate(6px, 3px)",
                                  transition: "all 0.3s"
                                }
                              }
                            )
                          ]
                        }
                      )
                    ]
                  }
                ),
                /* @__PURE__ */ e(i, { sx: { marginTop: 0, opacity: 0.7 }, children: n.meta.description }),
                /* @__PURE__ */ e(i, { sx: { display: m ? "flex" : "none", flexDirection: "row", gap: 1 }, children: l ? /* @__PURE__ */ e(i, { sx: { marginTop: 2, opacity: 0.7 }, children: c ? /* @__PURE__ */ e(a, { variant: "contained", onClick: g, children: s("componentInstallerRefresh") }, "refresh") : /* @__PURE__ */ e(
                  a,
                  {
                    disabled: !0,
                    sx: { color: "text.primary" },
                    startIcon: /* @__PURE__ */ e(d, { icon: "line-md:loading-loop", style: { color: "text.primary", fontSize: 16 } }),
                    variant: "contained",
                    children: l
                  },
                  "status"
                ) }) : /* @__PURE__ */ e(
                  a,
                  {
                    sx: { marginTop: 2 },
                    variant: "contained",
                    className: "button",
                    onClick: () => h(n.meta?.did),
                    children: s("componentInstallerInstall")
                  },
                  "install"
                ) }),
                c ? /* @__PURE__ */ e(i, { sx: { marginTop: 2, opacity: 0.7 }, children: s("componentInstallerSuccessInstalled") }) : null
              ]
            }
          )
        ]
      }
    )
  ] });
}
y.propTypes = {
  t: r.func.isRequired,
  optionalComponent: r.object.isRequired,
  index: r.number.isRequired,
  installStatus: r.string,
  hasPermission: r.bool.isRequired
};
export {
  y as default
};
