import {useState} from 'react'
import {styled} from '@mui/material/styles'
import PropTypes from 'prop-types'
import {signOut} from 'next-auth/react'
import {Tooltip, Fab, Zoom} from '@mui/material'
import ExitToAppIcon from '@mui/icons-material/ExitToApp'

import Alet from '../alet'

const PREFIX = 'Dekoneksyon'

const classes = {
  tooltip: `${PREFIX}-tooltip`,
  dekoneksyon: `${PREFIX}-dekoneksyon`
}

const Root = styled('div')(() => ({
  [`& .${classes.dekoneksyon}`]: {
    position: props => props.position,
    top: props => props.top,
    left: props => props.left,
    zIndex: 0
  }
}))

const DekoneksonTooltip = Tooltip

function Dekoneksyon({tooltipPlacement}) {
  const [esOuve, meteEsOuve] = useState(false)

  return (
    (
      <Root>
        <DekoneksonTooltip
          title='Se déconnecter'
          placement={tooltipPlacement}
          TransitionComponent={Zoom}
          classes={{
            tooltip: classes.tooltip
          }}
        >
          <Fab
            className={classes.dekoneksyon}
            color='error'
            aria-label='logout'
            size='small'
            onClick={() => meteEsOuve(true)}
          >
            <ExitToAppIcon />
          </Fab>
        </DekoneksonTooltip>
        <Alet esOuve={esOuve} meteEsOuve={meteEsOuve} handleKonfime={() => signOut()} />
      </Root>
    )
  )
}

Dekoneksyon.propTypes = {
  tooltipPlacement: PropTypes.string
}

export default Dekoneksyon