import { jsxs as a, jsx as t, Fragment as F } from "react/jsx-runtime";
import { useRef as I } from "react";
import o from "prop-types";
import { useTheme as q, useMediaQuery as m, Typography as f, Portal as A, CircularProgress as O } from "@mui/material";
import W from "../Avatar/index.js";
import Z from "../Icon/index.js";
import E from "../Button/index.js";
import H from "../Img/index.js";
import { styled as Q } from "../Theme/index.js";
function U(e, s = 1) {
  let c = e;
  const r = ["", "k", "m", "b"];
  let i = 0;
  for (; c > 1e3 && i < r.length - 1; )
    c = (c / 1e3).toFixed(s), i += 1;
  return e && `${c}${r[i]}`;
}
const G = Q("div")`
  &.arcblock-blocklet {
    padding: 0 16px;
    background: ${(e) => e.theme.palette.common.white};
    overflow: hidden;
    box-shadow: 0px 0px 8px #f0f0f0;
    &:hover {
      box-shadow: 0px 2px 12px #f0f0f0;
    }
  }
  .arcblock-blocklet__content {
    padding: 16px 0 0 0;
  }
  .arcblock-blocklet__content--main {
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  .arcblock-blocklet__content--body {
    overflow: hidden;
    flex: 1;
    display: flex;
    align-items: flex-start;
  }
  .arcblock-blocklet__addons {
    padding: 16px 0;
  }
  .arcblock-blocklet__cover {
    width: 80px;
    height: 80px;
    margin-right: 12px;
    overflow: hidden;
    border-radius: 12px;
    /* see: https://stackoverflow.com/questions/49066011/overflow-hidden-with-border-radius-not-working-on-safari */
    transform: translateZ(0);
  }
  .arcblock-blocklet__button--hover {
    &:not(.Mui-disabled) {
      position: relative;
      z-index: 1;
      &::before {
        content: '';
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        transition: opacity 0.3s;
      }
      &:hover::before {
        opacity: 0;
      }
      &::after {
        content: '';
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        background-color: ${(e) => e.theme.palette.primary.main};
        transform: scale(0.1);
        opacity: 0;
        z-index: -1;
        transition:
          transform 0.3s,
          opacity 0.3s,
          background-color 0.3s;
      }
      &:hover::after {
        opacity: 1;
        transform-origin: center;
        transform: scale(1);
      }
    }

    &:not(.Mui-disabled) {
      background-color: transparent !important;
      color: ${(e) => e.theme.palette.primary.main};
    }
    &:not(.Mui-disabled) {
      &:hover {
        color: ${(e) => e.theme.palette.common.white};
      }
    }
  }
  .arcblock-blocklet__info {
    flex: 1;
    overflow: hidden;
    .arcblock-blocklet__button {
      margin-top: 16px;
      display: inline-block;
    }
  }
  .arcblock-blocklet__title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .arcblock-blocklet__describe {
    margin: 0 0 2px 0;
    color: #999;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .arcblock-blocklet__addons {
    display: flex;
    justify-content: space-between;
    color: #999;
    font-size: 14px;
    position: relative;
  }
  .arcblock-blocklet__addons--item {
    white-space: nowrap;
  }
  &.arcblock-blocklet--size-md {
    &:hover {
      position: relative;
    }
    .arcblock-blocklet__title {
      height: 2.3em;
      margin-bottom: 3px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: initial;
      white-space: initial;
      word-break: break-all;
    }
    .arcblock-blocklet__describe {
      white-space: normal;
      height: 2.86em;
    }
    .arcblock-blocklet__button {
      margin-top: 5px;
    }
  }
  &.arcblock-blocklet--size-sm,
  &.arcblock-blocklet--size-xs {
    .arcblock-blocklet__cover {
      width: 40px;
      height: 40px;
      border-radius: 6px;
    }
    .arcblock-blocklet__content {
      padding: 16px 0;
    }
    .arcblock-blocklet__addons {
      padding: 8px 0;
      .arcblock-blocklet__addons--item {
        font-size: 12px;
      }
    }
  }
  &.arcblock-blocklet--size-xs {
    .arcblock-blocklet__addons {
      display: none !important;
    }
  }
`;
function v({ name: e }) {
  return /* @__PURE__ */ t(Z, { name: e, color: "inherit", size: 15, style: { marginRight: 8 } });
}
v.propTypes = {
  name: o.string.isRequired
};
function J({
  title: e,
  did: s = void 0,
  description: c = null,
  cover: r = null,
  size: i = "auto",
  addons: w = [],
  button: h = null,
  buttonText: y = "Install",
  buttonDisabled: u = !1,
  buttonLoading: b = !1,
  isStickyButton: z = !1,
  onButtonClick: _ = null,
  onMainClick: N = null,
  className: C = null,
  scaleClickZone: $ = 1.5,
  ...M
}) {
  const x = (l, k = () => !1) => (d, ...j) => {
    k() ? (d.preventDefault(), d.stopPropagation()) : l instanceof Function && (d.preventDefault(), d.stopPropagation(), l(...j));
  }, S = x(_, () => !!(h || u || b)), T = x(N), p = q(), B = m(p.breakpoints.down("md")), P = m(p.breakpoints.down("lg")), D = m(p.breakpoints.up("lg")), n = i === "auto" ? B ? "xs" : P ? "sm" : "md" : i, R = i === "auto" ? D ? 80 : 40 : i === "md" ? 80 : 40, g = I(null);
  return /* @__PURE__ */ a(
    G,
    {
      ...M,
      scaleClickZone: $,
      className: `${C} arcblock-blocklet arcblock-blocklet--size-${n}`,
      children: [
        /* @__PURE__ */ t("div", { className: "arcblock-blocklet__content", children: /* @__PURE__ */ t("div", { className: "arcblock-blocklet__content--main", onClick: T, ref: g, children: /* @__PURE__ */ a("div", { className: "arcblock-blocklet__content--body", children: [
          r ? /* @__PURE__ */ t("div", { className: "arcblock-blocklet__cover", children: /* @__PURE__ */ t(H, { src: r }) }) : s && /* @__PURE__ */ t("div", { className: "arcblock-blocklet__cover", children: /* @__PURE__ */ t(W, { did: s, size: R }) }),
          /* @__PURE__ */ a("div", { className: "arcblock-blocklet__info", children: [
            /* @__PURE__ */ t(f, { component: "h3", variant: "h3", className: "arcblock-blocklet__title", title: e, children: e }),
            c && /* @__PURE__ */ t(f, { component: "div", variant: "body2", className: "arcblock-blocklet__describe", title: c, children: c }),
            ["md", "sm", "xs"].includes(n) && /* @__PURE__ */ t(A, { container: g.current, disablePortal: n === "md", children: /* @__PURE__ */ t(
              "div",
              {
                className: "arcblock-blocklet__button",
                onClick: S,
                style: { display: z ? "block" : "" },
                children: h || _ && /* @__PURE__ */ a(
                  E,
                  {
                    className: "arcblock-blocklet__button--hover",
                    variant: "outlined",
                    color: "primary",
                    size: "small",
                    disabled: u || b,
                    style: n === "md" ? { padding: "3px 20px", fontSize: "14px" } : { padding: "3px 15px", minWidth: "54px", fontSize: "13px" },
                    children: [
                      b && /* @__PURE__ */ t(
                        O,
                        {
                          size: n === "md" ? 15 : 13,
                          style: { marginRight: 3, color: "inherit" }
                        }
                      ),
                      y
                    ]
                  }
                )
              }
            ) })
          ] })
        ] }) }) }),
        /* @__PURE__ */ t("div", { className: "arcblock-blocklet__addons", children: w.map((l, k) => /* @__PURE__ */ t(
          f,
          {
            component: "span",
            variant: "caption",
            className: "arcblock-blocklet__addons--item",
            title: l.title,
            children: l.empty ? null : /* @__PURE__ */ a(F, { children: [
              /* @__PURE__ */ t(v, { name: l.icon }),
              l.pretty ? U(l.value) : l.value
            ] })
          },
          k
        )) })
      ]
    }
  );
}
J.propTypes = {
  title: o.string.isRequired,
  did: o.string,
  isStickyButton: o.bool,
  description: o.string,
  cover: o.string,
  buttonText: o.string,
  buttonDisabled: o.bool,
  buttonLoading: o.bool,
  button: o.element,
  addons: o.arrayOf(o.object),
  size: o.oneOf(["xs", "sm", "md", "auto"]),
  onButtonClick: o.func,
  onMainClick: o.func,
  className: o.string,
  scaleClickZone: o.number
};
export {
  J as default
};
