import { jsxs as b, jsx as o } from "react/jsx-runtime";
import { useState as l, useRef as $, useEffect as c } from "react";
import { useTheme as M, Skeleton as E } from "@mui/material";
import n from "prop-types";
import F from "react-lottie-player";
import P from "lodash/noop";
import { styled as R } from "../Theme/index.js";
function W({
  animationData: m = null,
  size: s = 256,
  message: r = "",
  messageDuration: f = 5e3,
  messageLoop: T = !0,
  tips: a = [],
  tipsDuration: u = 5e3,
  maybeDuration: v = 12e4,
  speed: h = 1,
  increaseSpeed: x = 0,
  ...I
}) {
  const g = M(), [d, N] = l(0), [y, k] = l(h), [w, A] = l(0), [O, S] = l(null), [j, p] = l(!m), C = $((/* @__PURE__ */ new Date()).getTime());
  Array.isArray(r) || (r = [r]), c(() => {
    m || (p(!0), (async () => {
      try {
        const e = await (g.palette.mode === "dark" ? import("./dark-animation.json.js") : import("./default-animation.json.js"));
        S(e.default || e), p(!1);
      } catch (e) {
        console.error("Failed to load animation:", e), p(!1);
      }
    })());
  }, [m, g.palette.mode]), c(() => {
    if (!r)
      return;
    let t = 0;
    const e = setInterval(() => {
      t++, t >= r.length && (T ? t = 0 : t = r.length - 1), A(t);
    }, f);
    return () => {
      clearInterval(e);
    };
  }, [r, f]), c(() => {
    if (!a.length)
      return P;
    const t = setTimeout(() => {
      let e = d + 1;
      e >= a.length && (e = 0), N(e);
    }, u);
    return () => clearTimeout(t);
  }, [a, u, d]), c(() => {
    const t = setTimeout(() => {
      let i = ((/* @__PURE__ */ new Date()).getTime() - C.current) / v;
      i > 1 && (i = 1);
      const D = h + x * i;
      k(D);
    }, 1e3);
    return () => clearTimeout(t);
  }, [y]);
  const L = (t) => {
    let e = "message-before";
    return w === t ? e = "show-message" : w < t && (e = "message-after"), e;
  };
  return /* @__PURE__ */ b(q, { ...I, children: [
    j ? /* @__PURE__ */ o("div", { style: { width: s, height: s, display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ o(E, { variant: "rounded", width: s * 0.4, height: s * 0.4 }) }) : /* @__PURE__ */ o(
      F,
      {
        loop: !0,
        animationData: m || O,
        play: !0,
        speed: y,
        style: {
          width: s,
          height: s
        }
      }
    ),
    r && /* @__PURE__ */ o("div", { className: "waiter-message", children: r.map((t, e) => {
      const i = L(e);
      return /* @__PURE__ */ b(
        "div",
        {
          children: [
            /* @__PURE__ */ o("span", { className: `message-block ${i}`, children: t }),
            /* @__PURE__ */ o("span", { className: `placeholder-message ${i}`, children: t })
          ]
        },
        e
      );
    }) }),
    a.length ? /* @__PURE__ */ o("div", { className: "waiter-tips-container", children: a.map((t, e) => /* @__PURE__ */ o(
      "div",
      {
        className: `waiter-tips-block ${d === e ? "show-tips" : ""}`,
        children: t
      },
      e
    )) }) : ""
  ] });
}
W.propTypes = {
  animationData: n.oneOfType([n.object, n.oneOf([null])]),
  size: n.oneOfType([n.number, n.string]),
  message: n.oneOfType([n.string, n.arrayOf(n.node)]),
  messageDuration: n.number,
  messageLoop: n.bool,
  tips: n.arrayOf(n.node),
  tipsDuration: n.number,
  speed: n.number,
  maybeDuration: n.number,
  increaseSpeed: n.number
};
const q = R("div")`
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .waiter-message {
    position: relative;
    width: 100%;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    text-align: center;
    overflow: hidden;
    .message-block {
      position: absolute;
      left: 0;
      width: 100%;
      opacity: 0;
      transition: all ease 0.3s;
      user-select: none;
      &.message-before {
        transform: translate(-20px, 0);
      }
      &.message-after {
        transform: translate(20px, 0);
      }
      &.show-message {
        transform: translate(0, 0);
        opacity: 1;
        user-select: text;
        z-index: 2;
      }
    }

    .placeholder-message {
      user-select: none;
      display: none;
      opacity: 0;
      &.show-message {
        display: block;
      }
    }
  }

  .waiter-tips-container {
    position: relative;
    margin-top: auto;
    width: 100%;
    .waiter-tips-block {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      opacity: 0;
      pointer-events: none;
      z-index: 1;
      transform: translate(-20px, 0);
      transition: all ease 0.4s;
      &.show-tips {
        opacity: 1;
        pointer-events: auto;
        z-index: 2;
        transform: translate(0, 0);
      }
    }
  }
`;
export {
  W as default
};
