import * as React from 'react';
import appConfig from 'config/app';
import useAuthentication from 'hooks/useAuthentication';
import useCloud from 'hooks/useCloud';
import Chatwoot from './Chatwoot.ee';
const LiveChat = () => {
  const isCloud = useCloud();
  const { isAuthenticated } = useAuthentication();
  const [isLoaded, setLoaded] = React.useState(false);
  const [isReady, setReady] = React.useState(false);
  const shouldShow = isCloud && isAuthenticated;
  React.useLayoutEffect(() => {
    window.addEventListener(
      'chatwoot:ready',
      function () {
        setReady(true);
      },
      { once: true },
    );
  }, []);
  React.useLayoutEffect(
    function addChatwootScript() {
      if (!shouldShow) return;
      window.chatwootSettings = {
        hideMessageBubble: true,
        position: 'right',
        type: 'standard',
        launcherTitle: 'Give us feedback',
      };
      const g = document.createElement('script');
      const s = document.getElementsByTagName('script')[0];
      g.src = appConfig.chatwootBaseUrl + '/packs/js/sdk.js';
      g.defer = true;
      g.async = true;
      if (s.parentNode) {
        s.parentNode.insertBefore(g, s);
      }
      g.onload = function () {
        setLoaded(true);
      };
    },
    [shouldShow],
  );
  if (!shouldShow || !isLoaded) return <React.Fragment />;
  return <Chatwoot ready={isReady} />;
};
export default LiveChat;