"use client";
import { jsx as o, jsxs as P } from "react/jsx-runtime";
import { useState as m, useRef as p, useEffect as x, useCallback as l } from "react";
import { cn as T } from "../../../../utils/cn/cn.es.js";
import r from "../../../../components/AdvancedGallery/components/VideoSlide/videoSlide.module.css";
import { Icon as E } from "../../../Icon/Icon.es.js";
import { EIconName as I } from "../../../Icon/constants.es.js";
import { AudioButton as g } from "../../../AudioButton/AudioButton.es.js";
const k = ({ item: n, isActive: c, onClick: a }) => {
  const [u, s] = m(!1), [f, i] = m(!0), e = p(null), v = p(null);
  x(() => {
    const t = e.current;
    if (!t) return;
    const d = () => {
      s(!1);
    };
    return c ? (t.muted = !0, i(!0), t.play().then(() => {
      s(!0);
    })) : (t.pause(), t.currentTime = 0, s(!1)), t.addEventListener("ended", d), () => {
      t.removeEventListener("ended", d);
    };
  }, [c]);
  const y = l(
    (t) => {
      t.stopPropagation(), e.current && (e.current.play(), s(!0)), a();
    },
    [a]
  ), h = l((t) => {
    t.stopPropagation(), e.current && (e.current.muted = !e.current.muted, i(e.current.muted));
  }, []), N = l(() => {
    e.current && n.videoType === "complex" && (u ? (e.current.pause(), s(!1)) : (e.current.play(), s(!0))), a();
  }, [n.videoType, u, a]);
  return /* @__PURE__ */ o("div", { className: r.root, ref: v, onClick: N, children: /* @__PURE__ */ P("div", { className: r.videoContainer, children: [
    /* @__PURE__ */ o(
      "video",
      {
        ref: e,
        src: n.url,
        playsInline: !0,
        autoPlay: !0,
        muted: !0,
        loop: !0,
        controls: !1,
        poster: n.preview,
        className: T(r.video, !u && r.mediaHidden)
      }
    ),
    n.videoType === "complex" && !u && /* @__PURE__ */ o("div", { className: r.playButton, children: /* @__PURE__ */ o("button", { className: r.customPlayButton, onClick: y, children: /* @__PURE__ */ o(E, { className: r.icon, name: I.ALT_PLAY }) }) }),
    n.videoType === "complex" && u && /* @__PURE__ */ o("div", { className: r.audioButton, children: /* @__PURE__ */ o(g, { isMuted: f, onClick: h }) })
  ] }) });
};
export {
  k as VideoSlide
};
