import "@emotion/react";
import { useEffect } from "react";
import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
import { InnerLoadingWrap } from "./LoadingWrap.js";
import check from "../../../assets/icon/check.svg.js";
import iconSpinner from "../../../assets/icon/spinner_black.svg.js";
import { fade, show } from "../../../utils/framer.js";
import { useAnimation } from "../../../node_modules/.pnpm/framer-motion@6.5.1_react-dom@17.0.2_react@17.0.2/node_modules/framer-motion/dist/es/animation/use-animation.js";
import { motion } from "../../../node_modules/.pnpm/framer-motion@6.5.1_react-dom@17.0.2_react@17.0.2/node_modules/framer-motion/dist/es/render/dom/motion.js";
const Loading = ({
  cssStyle,
  visible = true,
  spring = false,
  type = "circle",
  status = "loading",
  size = "default",
  duration = 1
}) => {
  const loadingMotion = useAnimation();
  const checkAnim = useAnimation();
  const seq = async () => {
    switch (status) {
      case "loading":
        loadingMotion.start(show);
        break;
      case "ok":
        await loadingMotion.start(fade);
        await checkAnim.start(show);
        await checkAnim.start(fade);
        break;
    }
  };
  useEffect(() => {
    seq();
  }, [status]);
  let sizeNumber = 30;
  if (typeof size === "string") {
    if (parseInt(size, 10).toString() === size) {
      sizeNumber = parseInt(size, 10);
    } else {
      switch (size) {
        case "default":
          sizeNumber = 30;
          break;
        case "large":
          sizeNumber = 54;
          break;
        case "small":
          sizeNumber = 22;
          break;
        default:
          sizeNumber = 30;
          break;
      }
    }
  } else {
    sizeNumber = size;
  }
  const InnerLoading = /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsxs(motion.div, { className: type, animate: loadingMotion, children: [
      type === "circle" && /* @__PURE__ */ jsx(
        motion.img,
        {
          animate: {
            scale: spring ? [1.01, 1.03, 1, 1.02, 1] : [1, 1, 1, 1, 1],
            rotate: [0, 90, 180, 270, 360]
          },
          transition: {
            type: "spring",
            damping: 20,
            stiffness: 50,
            repeat: Infinity,
            duration
          },
          src: iconSpinner,
          style: { opacity: visible ? 1 : 0 },
          className: "iconSpinner"
        }
      ),
      type === "dots" && /* @__PURE__ */ jsxs(Fragment, { children: [
        /* @__PURE__ */ jsx(
          motion.div,
          {
            className: "dot",
            animate: {
              scaleY: [0.85, 0.8, 0.9, 0.8, 0.85],
              y: [1, 3.5, 1, -1.5, 1]
            },
            transition: {
              duration,
              repeat: Infinity
            },
            style: { opacity: visible ? 1 : 0 }
          }
        ),
        /* @__PURE__ */ jsx(
          motion.div,
          {
            className: "dot",
            animate: {
              scaleY: [0.85, 0.8, 0.9, 0.8, 0.85],
              y: [1, 3.5, 1, -1.5, 1]
            },
            transition: {
              duration,
              repeat: Infinity,
              delay: 0.2
            },
            style: { x: -15, opacity: visible ? 1 : 0 }
          }
        ),
        /* @__PURE__ */ jsx(
          motion.div,
          {
            className: "dot",
            animate: {
              scaleY: [0.85, 0.8, 0.9, 0.8, 0.85],
              y: [1, 3.5, 1, -1.5, 1]
            },
            transition: {
              duration,
              repeat: Infinity,
              delay: 0.4
            },
            style: { x: 15, opacity: visible ? 1 : 0 }
          }
        )
      ] })
    ] }),
    /* @__PURE__ */ jsx(motion.img, { className: "check", animate: checkAnim, src: check })
  ] });
  return /* @__PURE__ */ jsx(
    InnerLoadingWrap,
    {
      css: cssStyle,
      size: sizeNumber,
      type,
      status,
      children: InnerLoading
    }
  );
};
export {
  Loading
};
//# sourceMappingURL=index.js.map
