import { MutableRefObject, useEffect } from "react";
import { useTranslation } from "react-i18next";
import useSound from "use-sound";
import { useSiteStore } from "src/Stores";
import Notify from "src/assets/Notify.ogg";
import SiteComponent from "src/site/SiteComponent";

export default function useSiteComponent(
  siteYellsView: MutableRefObject<HTMLDivElement | null>
) {
  const {
    targetSiteID,
    getSiteView,
    setVisible,
    setEventHandler,
    setEventCloseHandler,
  } = useSiteStore();
  const { t } = useTranslation();
  const [play] = useSound(Notify);

  useEffect(() => {
    const onVisibilityModified = () => {
      if (setVisible()) {
        const siteView = getSiteView(targetSiteID);
        if (siteView) {
          siteView.wasNotify = false;
        }
      }
    };

    document.addEventListener("visibilitychange", onVisibilityModified);

    return () => {
      document.removeEventListener("visibilitychange", onVisibilityModified);
    };
  }, [getSiteView, setVisible, targetSiteID]);

  useEffect(() => {
    setVisible();
    setEventHandler(siteYellsView, t, play);
    setEventCloseHandler(siteYellsView);
  }, [
    play,
    setEventCloseHandler,
    setEventHandler,
    setVisible,
    siteYellsView,
    t,
  ]);

  useEffect(() => {
    SiteComponent.connect();

    return () => {
      SiteComponent.disconnect();
    };
  }, []);
}