'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-8277cbb3.js');
const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
const index_module = require('./index.module-f8c8495f.js');

function useGoogleSignIn(props) {
  const [loaded, setLoaded] = domContextHooks_module.useState(false);
  const [googleButtonDiv, setGoogleButtonDiv] = domContextHooks_module.useState(null);
  const [buttonWidth, setButtonWidth] = domContextHooks_module.useState(400);
  let timeoutId = null;
  // Update the width based on the container's size
  const updateWidth = () => {
    if (googleButtonDiv) {
      setButtonWidth(googleButtonDiv.clientWidth);
    }
  };
  domContextHooks_module.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]);
  domContextHooks_module.useEffect(() => {
    const cb = () => {
      // @ts-expect-error
      window.onGoogleLibraryLoad = null;
      const sdk = index_module.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;
  }, []);
  domContextHooks_module.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) {
    index.registerInstance(this, hostRef);
    this.initComplete = index.createEvent(this, "initComplete", 7);
    this.googleButtonDiv = null;
    domContextHooks_module.h$1(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 } = index_module.isDemo()
      ? useDemoGoogleSignIn(this)
      : useGoogleSignIn(this);
    return (index.h("div", { ref: setGoogleButtonDiv, style: { width: "100%" } }));
  }
  get el() { return index.getElement(this); }
};
function useDemoGoogleSignIn(props) {
  const [loaded, setLoaded] = domContextHooks_module.useState(false);
  const [googleButtonDiv, setGoogleButtonDiv] = domContextHooks_module.useState(null);
  domContextHooks_module.useEffect(() => {
    const cb = () => {
      // @ts-expect-error
      window.onGoogleLibraryLoad = null;
      setLoaded(true);
    };
    // @ts-expect-error
    if (window.google)
      cb();
    // @ts-expect-error
    window.onGoogleLibraryLoad = cb;
  }, []);
  domContextHooks_module.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,
  };
}

exports.sqm_google_sign_in = GoogleSignIn;
