import { getEnvironmentSDK } from "@saasquatch/component-boilerplate";
import { useState, useEffect } from "@saasquatch/stencil-hooks";
export function useGoogleSignIn(props) {
  const [loaded, setLoaded] = useState(false);
  const [googleButtonDiv, setGoogleButtonDiv] = useState(null);
  const [buttonWidth, setButtonWidth] = useState(400);
  let timeoutId = null;
  // Update the width based on the container's size
  const updateWidth = () => {
    if (googleButtonDiv) {
      setButtonWidth(googleButtonDiv.clientWidth);
    }
  };
  useEffect(() => {
    if (!googleButtonDiv)
      return;
    // Create a ResizeObserver to track width changes
    const resizeObserver = new ResizeObserver(() => {
      // Mimic debounce for efficiency
      if (timeoutId) {
        clearTimeout(timeoutId);
      }
      timeoutId = setTimeout(() => {
        updateWidth();
      }, 50);
    });
    resizeObserver.observe(googleButtonDiv);
    updateWidth();
    return () => resizeObserver.disconnect();
  }, [googleButtonDiv]);
  useEffect(() => {
    const cb = () => {
      // @ts-expect-error
      window.onGoogleLibraryLoad = null;
      const sdk = getEnvironmentSDK();
      if (sdk.type !== "SquatchPortal")
        return;
      const cb = (res) => {
        props.initComplete.emit(res);
      };
      //@ts-expect-error
      google.accounts.id.initialize({
        //@ts-expect-error: link component-env/boilerplate for new types
        client_id: sdk.env.googleOAuthId,
        callback: cb,
      });
      setLoaded(true);
    };
    // @ts-expect-error
    if (window.google)
      cb();
    // @ts-expect-error
    window.onGoogleLibraryLoad = cb;
  }, []);
  useEffect(() => {
    if (!googleButtonDiv || !loaded)
      return;
    //@ts-expect-error
    google.accounts.id.renderButton(googleButtonDiv, {
      theme: "outline",
      size: "large",
      text: props.text,
      height: 40,
      width: buttonWidth,
    });
  }, [googleButtonDiv, loaded, buttonWidth]);
  return {
    setGoogleButtonDiv,
  };
}
