import React from "react";
import { Node_Type } from "./../../ricos-types/index.js";
import { resolveDocumentColorToCss } from "./../../_shared/theme-color-token.js";
import { Image } from "./../../ui-components/index.js";
import { LINK_PREVIEW_VIEWER } from "../data-hooks.js";
import classes from "../statics/styles/link-preview-scss.js";
import { LINK_PREVIEW_TYPE } from "../types.js";
import { getHost, getUrlForDisplay } from "./utils.js";
const LinkPreviewViewer = ({ node, helpers }) => {
  const onLinkPreviewClick = () => {
    if (node.type === "LINK_PREVIEW") {
      helpers?.onViewerAction?.(
        LINK_PREVIEW_TYPE,
        "Click",
        node.linkPreviewData.link?.url || "",
        node.id,
        {
          type: Node_Type.LINK_PREVIEW,
          linkPreviewData: node.linkPreviewData
        }
      );
    }
  };
  const { title = "", description, thumbnailUrl, link, styles } = node.linkPreviewData;
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      className: classes.linkPreviewContainer,
      "data-hook": LINK_PREVIEW_VIEWER,
      style: {
        "--link-preview-border-width": styles?.borderWidth !== void 0 ? `${styles.borderWidth}px` : void 0,
        "--link-preview-border-color": resolveDocumentColorToCss(styles?.borderColor),
        "--link-preview-bg-color": resolveDocumentColorToCss(styles?.backgroundColor),
        "--link-preview-border-radius": styles?.borderRadius !== void 0 ? `${styles.borderRadius}px` : void 0,
        "--link-preview-link-color": resolveDocumentColorToCss(styles?.linkColor),
        "--link-preview-title-color": resolveDocumentColorToCss(styles?.titleColor),
        "--link-preview-subtitle-color": resolveDocumentColorToCss(styles?.subtitleColor)
      }
    },
    /* @__PURE__ */ React.createElement(
      "figure",
      {
        className: `${classes.linkPreview} ${styles?.thumbnailPosition === "END" ? classes.thumbnailEnd : styles?.thumbnailPosition === "START" ? classes.thumbnailStart : styles?.thumbnailPosition === "TOP" ? classes.thumbnailTop : ""}`,
        onClick: onLinkPreviewClick,
        style: {
          height: "auto",
          alignItems: styles?.thumbnailPosition === "TOP" ? "center" : void 0
        }
      },
      thumbnailUrl && styles?.thumbnailPosition !== "HIDDEN" && /* @__PURE__ */ React.createElement(
        Image,
        {
          containerProps: {
            className: styles?.thumbnailPosition === "TOP" ? classes.linkPreviewResponsiveImage : classes.linkPreviewImage
          },
          uri: thumbnailUrl,
          width: 400,
          height: 200,
          displayMode: "fill",
          alt: title
        }
      ),
      /* @__PURE__ */ React.createElement("section", { className: classes.linkPreviewInfo }, /* @__PURE__ */ React.createElement("div", { className: classes.linkPreviewUrl, dir: "auto" }, getUrlForDisplay(getHost(link?.url) || link?.url || "")), /* @__PURE__ */ React.createElement("figcaption", { className: classes.linkPreviewTitle, dir: "auto" }, title), description && /* @__PURE__ */ React.createElement("div", { className: classes.linkPreviewDescription, dir: "auto" }, description))
    )
  );
};
export {
  LinkPreviewViewer
};
//# sourceMappingURL=link-preview-viewer.js.map
