import { Box, LinearProgressBar, Text } from "@wix/design-system";
import React from "react";
import { AI_IMAGE_MODAL_FEED_LOADER } from "../data-hooks.js";
import styles from "./ai-image-modal-scss.js";
const GREY_LOADER_GIF_SRC = "https://static.wixstatic.com/media/977934_dc09a6a38d8445f1994b1d5736899a96~mv2.gif";
const WHITE_LOADER_GIF_SRC = "https://static.wixstatic.com/media/977934_2ddbf4faffce475f9d9011b98abc464b~mv2.gif";
const Loader = ({
  width,
  height,
  paddingLeft,
  paddingRight,
  paddingTop,
  paddingBottom,
  maxProgress,
  duration,
  showPercentage,
  backgroundColor,
  loadingText
}) => {
  const [progress, setProgress] = React.useState(0);
  React.useEffect(() => {
    if (progress >= 93) {
      return;
    }
    const intervalDuration = 100;
    const totalSteps = duration / intervalDuration;
    const increment = maxProgress / totalSteps;
    const interval = setInterval(() => {
      setProgress((prevProgress) => {
        const nextProgress = Math.min(prevProgress + increment, maxProgress);
        if (nextProgress >= maxProgress) {
          clearInterval(interval);
        }
        return nextProgress;
      });
    }, intervalDuration);
    return () => clearInterval(interval);
  }, [progress]);
  return /* @__PURE__ */ React.createElement(
    Box,
    {
      width: "100%",
      paddingLeft,
      paddingRight,
      paddingTop,
      paddingBottom,
      dataHook: AI_IMAGE_MODAL_FEED_LOADER
    },
    /* @__PURE__ */ React.createElement(
      Box,
      {
        width,
        height,
        backgroundColor: backgroundColor === "grey" ? "#eff3f6" : backgroundColor,
        direction: "vertical",
        align: "center",
        verticalAlign: "middle",
        borderRadius: 8,
        gap: "SP2"
      },
      /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(
        "img",
        {
          width: 82,
          height: 82,
          src: backgroundColor === "grey" ? GREY_LOADER_GIF_SRC : WHITE_LOADER_GIF_SRC,
          alt: loadingText
        }
      )),
      /* @__PURE__ */ React.createElement(Box, { direction: "horizontal", gap: "SP3" }, /* @__PURE__ */ React.createElement(Box, { width: 100, verticalAlign: "middle", className: styles.progressIndicator }, /* @__PURE__ */ React.createElement(LinearProgressBar, { value: progress })), showPercentage && /* @__PURE__ */ React.createElement(Box, { width: 20, verticalAlign: "middle" }, /* @__PURE__ */ React.createElement(Text, { size: "tiny", weight: "bold" }, Math.floor(progress), "%"))),
      loadingText && /* @__PURE__ */ React.createElement(Text, { size: "tiny" }, loadingText)
    )
  );
};
export {
  Loader
};
//# sourceMappingURL=loader.js.map
