import { jsxs as m, jsx as e } from "react/jsx-runtime";
/* empty css                                */
import { mr2 as f, alignItemsCenter as l, justifyContentCenter as u, mb3 as I, dFlex as p, dFlexColumn as C } from "./index-general.module.js";
import { classNames as a } from "./index-classNames.js";
import { Icon as h, IconSize as M } from "./index-Icon.js";
import { IconNames as y } from "./index-IconNames.js";
import { Modal as b } from "./index-Modal.js";
import { ModalBody as g } from "./index-ModalBody.js";
import { ModalHeader as v } from "./index-ModalHeader.js";
import { Text as x } from "./index-Text.js";
import { useState as N, useEffect as F } from "react";
import { ErrorImagesList as k } from "./index-ErrorImagesList.js";
const q = (i) => {
  const {
    close: s,
    mediaItems: o,
    mediaItemsErrors: d = {}
  } = i, [r, n] = N(0);
  return F(() => {
    if (o) {
      for (const t of o)
        if (!t.isInvalid) {
          n((c) => c + 1);
          continue;
        }
    }
  }, []), m(b, {
    ...i,
    className: "GalleryFeedbackModal",
    children: [e(v, {
      closeFn: s,
      hideCloseButtonOnMobile: !1
    }), e(g, {
      children: m("div", {
        className: a(C, l, "gallery-feedback-modal-body"),
        children: [r > 0 ? m("div", {
          className: a(p, I, u, l),
          children: [e(h, {
            className: f,
            hasCircle: !0,
            type: M.small,
            color: "--s500",
            children: y.check
          }), e(x, {
            replacements: {
              imagesCount: r
            },
            children: "<b>%imagesCount%</b> images were successfully added to the gallery."
          })]
        }) : null, e(k, {
          validMediaItemsCount: r,
          mediaItemsErrors: d,
          invalidMediaItemsCount: o.filter((t) => t.isInvalid).length
        })]
      })
    })]
  });
};
export {
  q as GalleryFeedbackModal
};
