import { r as registerInstance, e as createEvent, h as h$1, g as getElement } from './index-38ad4957.js';
import { k as useState, f as useEffect, n as h } from './dom-context-hooks.module-50442785.js';
import { g as getEnvironmentSDK, i as isDemo } from './index.module-b23fdad8.js';

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,
  };
}

const GoogleSignIn = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.initComplete = createEvent(this, "initComplete", 7);
    this.googleButtonDiv = null;
    h(this);
  }
  disconnectedCallback() { }
  connectedCallback() {
    const src = "https://accounts.google.com/gsi/client";
    if (!document.head.querySelector(`script[src="${src}"]`)) {
      const script = document.createElement("script");
      script.src = "https://accounts.google.com/gsi/client";
      script.async = true;
      document.head.appendChild(script);
    }
  }
  render() {
    const { setGoogleButtonDiv } = isDemo()
      ? useDemoGoogleSignIn(this)
      : useGoogleSignIn(this);
    return (h$1("div", { ref: setGoogleButtonDiv, style: { width: "100%" } }));
  }
  get el() { return getElement(this); }
};
function useDemoGoogleSignIn(props) {
  const [loaded, setLoaded] = useState(false);
  const [googleButtonDiv, setGoogleButtonDiv] = useState(null);
  useEffect(() => {
    const cb = () => {
      // @ts-expect-error
      window.onGoogleLibraryLoad = null;
      setLoaded(true);
    };
    // @ts-expect-error
    if (window.google)
      cb();
    // @ts-expect-error
    window.onGoogleLibraryLoad = cb;
  }, []);
  useEffect(() => {
    if (!googleButtonDiv || !loaded)
      return;
    const cb = () => {
      props.initComplete.emit({ credential: null });
    };
    // @ts-expect-error
    google.accounts.id.initialize({
      client_id: "PLACEHOLDER",
      cb: () => { },
    });
    //@ts-expect-error
    google.accounts.id.renderButton(googleButtonDiv, {
      theme: "outline",
      size: "large",
      text: props.text,
      click_listener: cb,
    });
  }, [googleButtonDiv, loaded]);
  return {
    setGoogleButtonDiv,
  };
}

export { GoogleSignIn as sqm_google_sign_in };
