import { jsx as e, jsxs as m } from "react/jsx-runtime";
import { useLazyImage as B } from "./index-useLazyImage.js";
import { classNames as a } from "./index-classNames.js";
import { secondsToTimeDuration as M } from "./index-data-formatters.js";
import { updateImageUrlWithBaseRequest as j } from "./index-update-image-url-with-base-request.js";
import { MediaItemType as z } from "./index-MediaItem.js";
import { ComponentContainer as N } from "./index-ComponentContainer.js";
import { Icon as T, IconSize as k } from "./index-Icon.js";
import { IconNames as L } from "./index-IconNames.js";
import { Render as c } from "./index-Render.js";
import { Skeleton as U, SkeletonTypes as W } from "./index-Skeleton.js";
import { Text as x, FontWeights as w, TextTypes as O } from "./index-Text.js";
import "react";
import t from "./index-GalleryMediaItem.module.scss.js";
const Z = (f) => {
  var y, g, b, v, I, C;
  const {
    mediaItem: i,
    actions: d = [],
    format: p = "square",
    onSelect: h
  } = f;
  let {
    width: l,
    height: r,
    selectable: n,
    isSelected: s
  } = f;
  const u = i.publicThumbnailUrl ?? i.publicUrl ?? ((y = i.mediaItemContent) == null ? void 0 : y.base64EncodedContent) ?? "", S = ((g = i == null ? void 0 : i.settings) == null ? void 0 : g.toBeDeleted) ?? !1, {
    isLazyLoading: D
  } = B(u);
  return d.length && (n = !1, s = !1), l || (l = p === "square" ? 152 : 274), r || (r = p === "square" ? 152 : 154), D ? e(N, {
    className: t.mediaItemContainer,
    style: {
      width: l,
      height: r
    },
    children: e(U, {
      type: W.rectangle,
      height: r,
      width: l
    })
  }) : e(N, {
    className: t.mediaItemContainer,
    style: {
      width: l,
      height: r
    },
    onClick: () => {
      n && h && h(!s);
    },
    children: m("div", {
      className: a(t.mediaItem, S ? t.toBeDeleted : ""),
      style: {
        backgroundImage: `url(${j(u)})`,
        width: l,
        height: r
      },
      children: [e(c, {
        if: n || !!d.length,
        children: m("div", {
          className: a(t.overlayOptions, s ? t.isSelected : void 0, n ? t.selectable : void 0),
          children: [d.map((o, q) => e("div", {
            className: t.actionContainer,
            children: m("div", {
              onClick: () => {
                o.disabled || o.callback && o.callback(i);
              },
              className: a(t.overlayOptionText, o.disabled ? t.disabled : ""),
              children: [typeof o.icon == "object" ? o.icon : e(T, {
                type: k.small,
                color: "--n100",
                children: o.icon
              }), e(x, {
                fontWeight: w.bold,
                color: "--n100",
                children: o.text
              })]
            })
          }, q)), e(c, {
            if: s,
            children: e(T, {
              type: k.large,
              color: "--fn-bg-cta-fg",
              children: L.check
            })
          })]
        })
      }), e(c, {
        if: ((b = i.fileType) == null ? void 0 : b.includes("video")) || i.type === z.video,
        children: e("div", {
          className: a(t.videoMetadataContainer),
          children: e(x, {
            type: O.textCaption,
            color: "--fn-bg",
            className: a(t.videoDuration),
            children: ((v = i.settings) == null ? void 0 : v.videoDuration) ?? M((C = (I = i.metadata) == null ? void 0 : I.videoMetadata) == null ? void 0 : C.duration)
          })
        })
      })]
    })
  });
};
export {
  Z as GalleryMediaItem
};
