ContributionGeneric.tsx

"use client";
import React, { useRef, useState, useEffect } from "react";
import { useContributionTracking } from "./tracking";
import { isAgreementSupported, isAgreementValid } from "./contributionUtils";
import { ContributionGenericContent } from "./ContributionGenericContent";
import { Contribution } from "./type";
import {
  useLocalStorageForAgreementOnPageLoad,
  getAgreementFromLocalStorage,
} from "../utils/useLocalStorage";
import { useRouter } from "next/navigation";
import { ContributionGenericAgreementSearch } from "./ContributionGenericAgreementSearch";

type Props = {
  contribution: Contribution;
};

export function ContributionGeneric({ contribution }: Props) {
  const router = useRouter();
  const [hash, setHash] = useState("");
  const personalizeTitleRef = useRef<HTMLParagraphElement>(null);
  const getTitle = () => `/contribution/${slug}`;
  const { slug, isNoCDT, relatedItems } = contribution;

  const [displayGeneric, setDisplayGeneric] = useState(false);

  const [selectedAgreement, setSelectedAgreement] =
    useLocalStorageForAgreementOnPageLoad();
  const {
    emitAgreementTreatedEvent,
    emitAgreementUntreatedEvent,
    emitDisplayAgreementContent,
    emitDisplayGeneralContent,
  } = useContributionTracking();
  const genericTitleRef = useRef<HTMLDivElement>(null);

  const scrollToTitle = () => {
    setTimeout(() => {
      genericTitleRef?.current?.scrollIntoView({ behavior: "smooth" });
      genericTitleRef?.current?.focus();
    }, 100);
  };

  useEffect(() => {
    setHash(window.location.hash);
  }, []);

  useEffect(() => {
    if (hash === "#retour") {
      setTimeout(() => {
        personalizeTitleRef?.current?.focus();
      }, 100);
    }
  }, [hash]);

  useEffect(() => {
    if (window.location.hash === "#retour") return;

    const storedAgreement = getAgreementFromLocalStorage();
    if (storedAgreement && isAgreementValid(contribution, storedAgreement)) {
      const targetUrl =
        slug === "les-conges-pour-evenements-familiaux"
          ? `/contribution/${slug}/${storedAgreement.slug || storedAgreement.num}`
          : `/contribution/${storedAgreement.num}-${slug}`;
      router.replace(targetUrl);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <>
      <ContributionGenericAgreementSearch
        personalizeTitleRef={personalizeTitleRef}
        contribution={contribution}
        onAgreementSelect={(agreement) => {
          setSelectedAgreement(agreement);
          setDisplayGeneric(false);
          if (!agreement) return;

          if (isAgreementSupported(contribution, agreement)) {
            emitAgreementTreatedEvent(agreement.num);
          } else {
            emitAgreementUntreatedEvent(agreement.num);
          }
        }}
        onDisplayClick={(isAgreementSelected) => {
          setDisplayGeneric(!displayGeneric);
          if (!isAgreementSelected) {
            setDisplayGeneric(true);
            scrollToTitle();
            if (selectedAgreement) {
              emitDisplayGeneralContent(getTitle());
            }
          } else {
            emitDisplayAgreementContent(getTitle());
          }
        }}
        selectedAgreement={selectedAgreement}
        trackingActionName={getTitle()}
      />

      {!isNoCDT && !isAgreementValid(contribution, selectedAgreement) && (
        <ContributionGenericContent
          ref={genericTitleRef}
          contribution={contribution}
          relatedItems={relatedItems}
          displayGeneric={displayGeneric}
          alertText={
            selectedAgreement &&
            !isAgreementSupported(contribution, selectedAgreement) && (
              <p>
                <strong>
                  Cette réponse correspond à ce que prévoit le code du travail,
                  elle ne tient pas compte des spécificités de la{" "}
                  {selectedAgreement.shortTitle}
                </strong>
              </p>
            )
          }
        />
      )}
    </>
  );
}