marriage/src/components/Componentes/questions-list-overlay.tsx

"use client";

import { useCallback, useEffect, useState } from "react";
import QuestionsListClient from "@/app/questions-list/questions-list-client";
import SectionOverlayHost from "@/components/Componentes/section-overlay-host";
import { useHardwareBackHandler } from "@/hooks/use-hardware-back-handler";

export type QuestionsListOverlayProps = {
  open: boolean;
  onClose: () => void;
  onReady?: () => void;
  premount?: boolean;
};

/**
 * Hook to manage Questions List ("Edit Profile") slide-in overlay state.
 * Syncs with browser history (?edit_profile=open) and intercepts hardware back in Flutter.
 */
export function useQuestionsListOverlay() {
  const [isQuestionsOpen, setIsQuestionsOpen] = useState(false);

  useEffect(() => {
    const readFromUrl = () => {
      if (typeof window === "undefined") return;
      const params = new URLSearchParams(window.location.search);
      setIsQuestionsOpen(
        params.get("edit_profile") === "open" ||
          params.get("questions") === "open",
      );
    };

    readFromUrl();
    window.addEventListener("popstate", readFromUrl);
    return () => window.removeEventListener("popstate", readFromUrl);
  }, []);

  const openQuestions = useCallback(() => {
    setIsQuestionsOpen(true);
    if (typeof window !== "undefined") {
      const url = new URL(window.location.href);
      url.searchParams.set("edit_profile", "open");
      window.history.replaceState({ edit_profile: "open" }, "", url.toString());
    }
  }, []);

  const closeQuestions = useCallback(() => {
    setIsQuestionsOpen(false);
    if (typeof window !== "undefined") {
      const url = new URL(window.location.href);
      if (
        url.searchParams.get("edit_profile") === "open" ||
        url.searchParams.get("questions") === "open"
      ) {
        url.searchParams.delete("edit_profile");
        url.searchParams.delete("questions");
        window.history.replaceState({}, "", url.toString());
      }
    }
  }, []);

  // Intercept hardware back in Flutter WebView when questions overlay is open
  useHardwareBackHandler(() => {
    closeQuestions();
    return true; // handled: keep WebView screen open
  }, isQuestionsOpen);

  return {
    isQuestionsOpen,
    openQuestions,
    closeQuestions,
  };
}

export function QuestionsListOverlay({
  open,
  onClose,
  onReady,
  premount = true,
}: QuestionsListOverlayProps) {
  return (
    <SectionOverlayHost open={open} onClose={onClose} premount={premount}>
      <QuestionsListClient
        onClose={onClose}
        isOverlay={true}
        onReady={onReady}
      />
    </SectionOverlayHost>
  );
}

export default QuestionsListOverlay;