import { jsx as s, jsxs as x } from "react/jsx-runtime";
import { useRef as N, useState as f, useEffect as k, Children as v, cloneElement as S, createElement as $ } from "react";
import a from "lodash/isUndefined";
import { mergeProps as z } from "../Util/index.js";
import { styled as g } from "../Theme/index.js";
import C from "./BaseScreenshot/index.js";
import "./devices.css";
const u = {
  "iphone-x": {
    borderRadius: 32,
    width: 342,
    scale: 0.78
  },
  "iphone-8": {
    borderRadius: 0,
    width: 336,
    scale: 0.78
  },
  "ipad-pro": {
    borderRadius: 0,
    width: 560,
    scale: 0.62
  },
  "imac-pro": {
    borderRadius: 0,
    width: 624,
    scale: 0.56
  },
  macbook: {
    borderRadius: 0,
    width: 740,
    scale: 0.47
  },
  "macbook-pro": {
    borderRadius: 0,
    width: 740,
    scale: 0.47
  },
  "surface-pro": {
    borderRadius: 0,
    width: 561,
    scale: 0.62
  },
  "surface-book": {
    borderRadius: 0,
    width: 728,
    scale: 0.47
  },
  "surface-studio": {
    borderRadius: 0,
    width: 640,
    scale: 0.55
  },
  "galaxy-s8": {
    borderRadius: 0,
    width: 321,
    scale: 0.8
  },
  "google-pixel": {
    borderRadius: 0,
    width: 360,
    scale: 0.72
  },
  "google-pixel-2-xl": {
    borderRadius: 0,
    width: 360,
    scale: 0.72
  },
  "apple-watch": {
    borderRadius: 0,
    width: 200,
    scale: 1
  }
}, j = {
  img: ["alt", "title", "src", "srcSet", "sizes", "loading", "key", "children"],
  video: ["alt", "title", "muted", "autoplay", "loop", "key", "children"]
}, E = (t) => [
  $(
    t.type,
    j[t.type].reduce((e, i) => (e[i] = t.props[i], e), {})
  )
], b = (t, e = !0) => {
  for (let i = 0; i < t.length; i++) {
    const r = t[i];
    if (["img", "video"].includes(r.type))
      return E(r);
    if (r.props && r.props.children) {
      const n = v.toArray(r.props.children), o = b(n, !1);
      if (o)
        return o;
    }
  }
  return e ? t : null;
};
function w(t) {
  const e = Object.assign({}, t);
  a(e.type) && (e.type = "iphone-x"), a(e.className) && (e.className = ""), a(e.style) && (e.style = {}), a(e.width) && (e.width = 0), a(e.height) && (e.height = 0);
  const i = z(e, w, ["style", "width", "height"]), { type: r, children: n, style: o, className: c, width: p, height: m, ...l } = i, { zIndex: h = 0, borderRadius: d = 0 } = u[r] || {};
  return /* @__PURE__ */ x(
    O,
    {
      ...l,
      type: r,
      className: `device device-${r} ${c}`.trim(),
      style: o,
      contentRadius: d,
      contentZIndex: h,
      children: [
        /* @__PURE__ */ s("div", { className: "device-frame", children: /* @__PURE__ */ s("div", { className: "device-content", children: b(v.toArray(n))?.map((y, R) => S(y, { key: R })) }) }),
        /* @__PURE__ */ s("div", { className: "device-stripe" }),
        /* @__PURE__ */ s("div", { className: "device-header" }),
        /* @__PURE__ */ s("div", { className: "device-sensors" }),
        /* @__PURE__ */ s("div", { className: "device-btns" }),
        /* @__PURE__ */ s("div", { className: "device-power" })
      ]
    }
  );
}
const O = g("div")`
  @media (max-width: ${(t) => u[t.type].width}px) {
    transform-origin: 0 0;
    transform: scale(${(t) => u[t.type].scale});
  }
  .device-content {
    overflow: hidden;
  }
  .device-content video,
  .device-content img {
    border-radius: ${(t) => t.contentRadius}px;
    background-color: #fff;
    background-position: center center;
    background-size: cover;
    object-fit: cover;
    width: 100.1%;
    height: 100.1%;
  }
`;
function H({ ...t }) {
  const e = N(null), [i, r] = f(), [n, o] = f(null);
  return k(() => {
    let c = null;
    const p = () => {
      const { clientWidth: m } = e.current, { clientWidth: l, clientHeight: h } = e.current.children[0], d = m / l;
      d < 1 ? (o(d), r(d * h)) : (o(null), r(void 0));
    };
    return e.current && (c = new ResizeObserver(p), c.observe(e.current)), () => {
      c && c.disconnect();
    };
  }, [e.current]), /* @__PURE__ */ s(P, { ref: e, style: { height: i }, children: /* @__PURE__ */ s(w, { ...t, style: { transform: n ? `scale(${n})` : void 0 } }) });
}
const P = g("div")`
  div[type] {
    transform: scale(1);
    transform-origin: 0 0;
  }
`;
function Z({ type: t, src: e = "", children: i, sx: r = {}, ...n }) {
  const o = t.toLowerCase();
  return ["phone", "macbook"].includes(o) ? /* @__PURE__ */ s(C, { type: o, sx: r, ...n, children: i || (e ? /* @__PURE__ */ s("img", { src: e, alt: "screenshot" }) : null) }) : /* @__PURE__ */ s(H, { type: t, sx: { ...r, margin: "auto" }, ...n, children: i || (e ? /* @__PURE__ */ s("img", { src: e, alt: "screenshot" }) : null) });
}
export {
  Z as default
};
