import { HelpOutline } from '@mui/icons-material'
import { Button } from '@mui/material'
import { UserStore } from '../../../../shared-state'

export default function FreshDeskHelpButton() {
  const { user } = UserStore.useState()

  // const handleOpenFreshDeskWidget = () => {
  //   try {
  //     ;(window as any)?.openFreshDeskWidget()
  //   } catch (error) {
  //     // eslint-disable-next-line no-console
  //     console.error('Error launching Freshdesk')
  //   }
  // }

  const _window = window as any

  var openWidget = function () {
    const el = document.getElementById('fc_frame')
    if (el) {
      el.style.visibility = 'visible'
    }
    _window.fcWidget.open()
    initEvents()
  }
  var initEvents = function () {
    const el = document.getElementById('custom_fc_button')
    _window.fcWidget.on('widget:opened', function (resp) {
      if (el) {
        el.style.visibility = 'hidden'
      }
    })
    _window.fcWidget.on('widget:closed', function (resp) {
      if (el) {
        el.style.visibility = 'visible'
      }
    })
  }

  if (!user) return null
  return (
    <Button
      variant="text"
      color="secondary"
      onClick={openWidget}
      startIcon={<HelpOutline />}
      sx={{ padding: '20px' }}
    >
      Help
    </Button>
  )
}
