import { jsx as o, jsxs as r } from "react/jsx-runtime";
import { isValidElement as f } from "react";
import t from "prop-types";
import { useTheme as C, useMediaQuery as S, Typography as n, CircularProgress as I } from "@mui/material";
import B from "../Avatar/index.js";
import P from "../Button/index.js";
import A from "../Img/index.js";
import { styled as D } from "../Theme/index.js";
import { strippedString as g } from "./utils.js";
const F = D("div")`
  &.arcblock-blocklet {
    padding: ${(e) => e.theme.spacing(2)} ${(e) => e.theme.spacing(2)} 0
      ${(e) => e.theme.spacing(2)};
  }
  .arcblock-blocklet__content {
    cursor: pointer;
    display: flex;
    ${(e) => e.theme.breakpoints.up("sm")} {
      align-items: center;
    }
  }
  .arcblock-blocklet__cover {
    width: 64px;
    height: 64px;
    margin-right: ${(e) => e.theme.spacing(2)};
    overflow: hidden;
    border-radius: 12px;
    /* see: https://stackoverflow.com/questions/49066011/overflow-hidden-with-border-radius-not-working-on-safari */
    transform: translateZ(0);
    ${(e) => e.theme.breakpoints.up("sm")} {
      width: 80px;
      height: 80px;
      margin-bottom: 12px;
    }
  }
  .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%;
        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;
    border-bottom: 1px solid ${(e) => e.theme.palette.divider};
    padding-bottom: ${(e) => e.theme.spacing(2)};
  }
  .arcblock-blocklet__text {
    height: 65px;
    overflow: hidden;
  }
  /* 设置多行文本溢出显示省略号 兼容fireFox、safari */
  .arcblock-blocklet__title {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .arcblock-blocklet__describe {
    margin-top: ${(e) => e.theme.spacing(0.5)};
    color: ${(e) => e.theme.palette.grey[600]};
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
    max-height: 34px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
  }
  .arcblock-blocklet__version {
    color: ${(e) => e.theme.palette.grey[600]};
    font-size: 12px;
  }
`;
function H({
  title: e = "",
  did: c = null,
  description: l = "",
  cover: s = null,
  version: p = null,
  button: m = null,
  buttonText: u = "Install",
  buttonDisabled: d = !1,
  buttonLoading: a = !1,
  onButtonClick: b = null,
  onMainClick: v = null,
  className: _ = null,
  ...x
}) {
  const h = (k, M = () => !1) => (i, ...T) => {
    M() ? (i.preventDefault(), i.stopPropagation()) : k instanceof Function && (i.preventDefault(), i.stopPropagation(), k(...T));
  }, w = h(b, () => !!(m || d || a)), y = C(), $ = S(y.breakpoints.up("sm")), N = h(v), z = $ ? 80 : 64;
  return /* @__PURE__ */ o(F, { className: `${_} arcblock-blocklet`, ...x, children: /* @__PURE__ */ r("div", { className: "arcblock-blocklet__content", onClick: N, children: [
    s ? /* @__PURE__ */ o("div", { className: "arcblock-blocklet__cover", children: /* @__PURE__ */ o(A, { src: s }) }) : c && /* @__PURE__ */ o("div", { className: "arcblock-blocklet__cover", children: /* @__PURE__ */ o(B, { did: c, size: z }) }),
    /* @__PURE__ */ r("div", { className: "arcblock-blocklet__info", children: [
      /* @__PURE__ */ r("div", { className: "arcblock-blocklet__text", children: [
        f(e) ? /* @__PURE__ */ o(n, { component: "h3", variant: "h3", className: "arcblock-blocklet__title", children: e }) : /* @__PURE__ */ o(
          n,
          {
            component: "h3",
            variant: "h3",
            className: "arcblock-blocklet__title",
            title: g(e),
            dangerouslySetInnerHTML: { __html: e }
          }
        ),
        f(l) ? /* @__PURE__ */ o(n, { component: "div", variant: "body2", className: "arcblock-blocklet__describe", children: l }) : /* @__PURE__ */ o(
          n,
          {
            component: "div",
            variant: "body2",
            className: "arcblock-blocklet__describe",
            title: g(l),
            dangerouslySetInnerHTML: { __html: l }
          }
        )
      ] }),
      /* @__PURE__ */ r(
        "div",
        {
          style: {
            display: "flex",
            alignItems: "center",
            marginTop: "10px",
            flexFlow: "wrap"
          },
          children: [
            /* @__PURE__ */ o("div", { onClick: w, style: { marginRight: "12px" }, children: m || b && /* @__PURE__ */ r(
              P,
              {
                className: "arcblock-blocklet__button--hover",
                variant: "outlined",
                color: "primary",
                size: "small",
                disabled: d || a,
                style: {
                  padding: "3px 6px",
                  fontSize: "14px",
                  minWidth: "92px",
                  textAlign: "center"
                },
                children: [
                  a && /* @__PURE__ */ o(I, { size: 15, style: { marginRight: 3, color: "inherit" } }),
                  u
                ]
              }
            ) }),
            /* @__PURE__ */ o("div", { className: "arcblock-blocklet__version", children: p && `v${p}` })
          ]
        }
      )
    ] })
  ] }) });
}
H.propTypes = {
  title: t.string || t.node,
  did: t.string,
  description: t.string || t.node,
  cover: t.string,
  buttonText: t.string,
  buttonDisabled: t.bool,
  buttonLoading: t.bool,
  button: t.element,
  version: t.string,
  onButtonClick: t.func,
  onMainClick: t.func,
  className: t.string
};
export {
  H as default
};
