import { ReactNode } from 'react'
import { Helmet as ReactHelmet } from 'react-helmet'
import { isDevelopment } from '../../constants'

const isLocalHost = process.env.NODE_ENV === 'development'

const freshDeskInnerHtml = `
          window.fwSettings = {
            widget_id: 85000000149,
         }
          !(function () {
            window.openFreshDeskWidget = function openFreshDeskWidget() {
            FreshworksWidget('open', 'ticketForm')
          }
         if ('function' != typeof window.FreshworksWidget) {
          var n = function () {
            n.q.push(arguments)
          }
          ;(n.q = []), (window.FreshworksWidget = n)
         }
          FreshworksWidget('hide', 'launcher')
        })()

`

const getbeamerInnerHtml = `
var beamer_config = {
		product_id : "ThEQzGKL56777",
    
	};
`

const getBeamerStyles = `
#beamerSelector {
  height: 42px;
  width: 42px;
  top: 12px;
  right: 120px;
  box-shadow: none;
  background-color: #121212;

}
`

const getInnerHtml = (user: any) => {
  if (isLocalHost) {
    return ''
  }
  const fcWidgetMessengerConfig = {
    config: {
      headerProperty: {
        hideChatButton: true,
      },
    },
  }

  const phone = user?.mobile?.substring(user?.mobile?.length - 10)

  return `
    window.fcWidgetMessengerConfig = ${JSON.stringify(fcWidgetMessengerConfig)}
    window.fcSettings = {
        onInit: function() {
          console.log('Fresh Chat Init')
          window.fcWidget.setExternalId('${user?.email}')
          window.fcWidget.user.setFirstName('${user?.fullName}')
          window.fcWidget.user.setEmail('${user?.email}')
          window.fcWidget.user.setPhone('${phone}')
        }
      }
      
      `
}

interface IHelmetProps {
  appTitle: string
  favicon: string
  description?: string
  user: any
  extraMetaTags?: ReactNode
}

export default function Helmet({
  appTitle,
  favicon,
  description,
  user,
  extraMetaTags,
}: IHelmetProps) {
  return (
    <ReactHelmet htmlAttributes={{ lang: 'en' }}>
      <title>{appTitle}</title>
      <meta charSet="utf-8" />
      <meta name="description" content={description} />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      {extraMetaTags}
      <link rel="icon" href={favicon} />
      <link rel="apple-touch-icon" href={favicon} />
      <style>{getBeamerStyles}</style>
      <script>{getbeamerInnerHtml}</script>
      {isDevelopment && (
        <script
          type="text/javascript"
          src="https://app.getbeamer.com/js/beamer-embed.js"
        ></script>
      )}

      {/* {!isLocalHost && (
        <script
          type="text/javascript"
          src="//in.fw-cdn.com/30814322/430238.js"
          defer
        />
      )} */}
      {/* {!isLocalHost && <script defer>{getInnerHtml(user)}</script>} */}
      {/* {!isLocalHost && (
        <script async defer>
          {freshDeskInnerHtml}
        </script>
      )} */}
      {/* {!isLocalHost && (
        <script
          type="text/javascript"
          src="https://ind-widget.freshworks.com/widgets/85000000149.js"
          defer
        ></script>
      )} */}
    </ReactHelmet>
  )
}
