import { isDemo } from "@saasquatch/component-boilerplate";
import { useEffect, useState, withHooks } from "@saasquatch/stencil-hooks";
import { Component, Event, h, Prop, Element, } from "@stencil/core";
import { useGoogleSignIn } from "./useGoogleSignIn";
/**
 * @uiName Google Sign-In Button
 * @description Requires <script src="https://accounts.google.com/gsi/client" async></script> be added to the <head> section.
 * @undocumented
 */
export class GoogleSignIn {
  constructor() {
    this.googleButtonDiv = null;
    withHooks(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("div", { ref: setGoogleButtonDiv, style: { width: "100%" } }));
  }
  static get is() { return "sqm-google-sign-in"; }
  static get encapsulation() { return "shadow"; }
  static get properties() { return {
    "text": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Button text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "text",
      "reflect": false
    },
    "googleButtonDiv": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "HTMLElement | null",
        "resolved": "HTMLElement",
        "references": {
          "HTMLElement": {
            "location": "global"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "defaultValue": "null"
    }
  }; }
  static get events() { return [{
      "method": "initComplete",
      "name": "initComplete",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
  static get elementRef() { return "el"; }
}
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,
  };
}
