import { useEffect } from "react";
import { useNavigate, useParams } from "react-router-dom";
import useNavStore from "../store/navStore";

export const useUrlSync = () => {
  const navigate = useNavigate();
  const { celexId: paramCelexId, articleId: paramArticleId } = useParams();

  const celexId = useNavStore.use.celexId();
  const setCelexId = useNavStore.use.setCelexId();
  const articleId = useNavStore.use.articleId();
  const setArticleId = useNavStore.use.setArticleId();

  // Effect to read from URL when URL changes
  useEffect(() => {
    if (paramCelexId && paramCelexId !== celexId) {
      setCelexId(paramCelexId);
    }

    if (paramArticleId) {
      const parsedArticleId = paramArticleId ? parseInt(paramArticleId) : null;
      if (parsedArticleId && parsedArticleId !== articleId) {
        setArticleId(parsedArticleId);
      }
    } else {
      // If no articleId in URL, reset Zustand state
      setArticleId(null);
    }
  }, [paramArticleId, paramArticleId]);

  // Update the URL when Zustand changes
  useEffect(() => {
    if (!celexId) {
      return;
    }
    let targetUrl = `/${celexId}`;
    if (articleId !== null) {
      targetUrl += `/articles/${articleId}`;
    }
    navigate(targetUrl);
  }, [navigate, celexId, articleId]); // Only sync URL when Zustand changes
};