'use client'

import PropTypes from 'prop-types'
import {useEffect, useState} from 'react'
import {signOut} from 'next-auth/react'
import {useRouter} from 'next/navigation'
import Box from '@mui/material/Box'
import Stack from '@mui/material/Stack'
import Fab from '@mui/material/Fab'
import {styled} from '@mui/material/styles'
import Tooltip, {tooltipClasses} from '@mui/material/Tooltip'
import LogoutIcon from '@mui/icons-material/Logout'
import LoginIcon from '@mui/icons-material/Login'
import PersonAddIcon from '@mui/icons-material/PersonAdd'
import {createDirectus, realtime, staticToken} from '@directus/sdk'
import ConfirmationAlert from './confirmation-alert.js'

const apiWsUrl = process.env.DIRECTUS_API_WS_URL || process.env.NEXT_PUBLIC_DIRECTUS_API_WS_URL

const LightTooltip = styled(({className, ...props}) => (
  <Tooltip {...props} classes={{popper: className}} />
))(({theme}) => ({
  [`& .${tooltipClasses.tooltip}`]: {
    backgroundColor: theme.palette.common.white,
    color: 'rgba(0, 0, 0, 0.87)',
    boxShadow: theme.shadows[1],
    fontSize: 15,
  },
}))

export default function Sign({session, navButton}) {
  const router = useRouter()
  const [isOpen, setIsOpen] = useState(false)

  const directusClientWS = createDirectus(apiWsUrl)
    .with(staticToken(session?.user?.accessToken))
    .with(realtime())

  const handleSignout = () => {
    setIsOpen(false)
    signOut()
  }

  async function subscribe() {
    const {subscription} = await directusClientWS.subscribe('directus_versions', {
      event: 'create',
      query: {
        fields: ['*'],
        filter: {
          collection: {
            _eq: 'titres'
          }
        }
      }
    })

    for await (const item of subscription) {
      console.log('New version created:', item)
    }
  }

  useEffect(() => {
    let cleanup = () => {}

    if (session) {
      (async () => {
        try {
          await directusClientWS.connect()

          directusClientWS.onWebSocket('open', () => {
            console.log({event: 'onopen'})
            subscribe()
          })

          directusClientWS.onWebSocket('message', message => {
            if (message.type === 'auth' && message.status === 'ok') {
              console.log({event: 'onmessage', message})
            }
          })

          directusClientWS.onWebSocket('close', () => {
            console.log({event: 'onclose'})
          })

          directusClientWS.onWebSocket('error', error => {
            console.log({event: 'onerror', error})
          })

          cleanup = () => {
            directusClientWS.disconnect()
          }
        } catch (error) {
          console.error('WebSocket connection error:', error)
        }
      })()
    }

    return () => cleanup()
  }, [session]) // eslint-disable-line react-hooks/exhaustive-deps

  return (
    <>
      <Box sx={{display: 'flex', justifyContent: session ? 'start' : 'center', marginTop: 2}}>
        {session ? (
          <Stack direction='row' spacing={2}>
            <LightTooltip title='Se déconnecter' placement='right'>
              <Fab size='large' color='error' onClick={() => setIsOpen(true)}>
                <LogoutIcon fontSize='large' />
              </Fab>
            </LightTooltip>
            <LightTooltip title={navButton.title} placement='right'>
              <Fab sx={{mr: 3}} size='large' color={navButton.color} onClick={() => router.push(navButton.path)}>
                {navButton.icon}
              </Fab>
            </LightTooltip>
          </Stack>
        ) : (
          <Stack direction='row' spacing={2}>
            <LightTooltip title='Se connecter' placement='left'>
              <Fab size='large' color='success' onClick={() => router.push('/login')}>
                <LoginIcon fontSize='large' />
              </Fab>
            </LightTooltip>
            <LightTooltip title='S’enregistrer' placement='right'>
              <Fab size='large' color='success' onClick={() => router.push('/register')}>
                <PersonAddIcon fontSize='large' />
              </Fab>
            </LightTooltip>
          </Stack>
        )}
      </Box>
      <ConfirmationAlert
        title='Se déconnecter'
        description='Vous êtes sur le point de vous déconnecter. Voulez-vous continuer ?'
        isOpen={isOpen}
        setIsOpen={setIsOpen}
        handleConfirmation={handleSignout}
      />
    </>
  )
}

Sign.propTypes = {
  session: PropTypes.object,
  navButton: PropTypes.object.isRequired
}