import {useState} from 'react'
import PropTypes from 'prop-types'
import Link from 'next/link'
import {signOut} from 'next-auth/client'
import {withStyles, makeStyles, Tooltip, Fab, Zoom} from '@material-ui/core'
import ExitToAppIcon from '@material-ui/icons/ExitToApp'

import Alet from '../alet'

const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'

const useStyles = makeStyles(() => ({
  dekoneksyon: {
    position: props => props.position,
    top: props => props.top,
    left: props => props.left
  }
}))

const DekoneksonTooltip = withStyles(() => ({
  tooltip: {
    fontSize: 18
  }
}))(Tooltip)

function Dekoneksyon({chimen, tooltipPlacement, ...props}) {
  const classes = useStyles(props)
  const [esOuve, meteEsOuve] = useState(false)

  const handleDekonekte = event => {
    event.preventDefault()
    signOut({callbackUrl: `${siteUrl}${chimen}`})
  }

  return (
    <>
      <Link href='/api/auth/signout'>
        <DekoneksonTooltip title='Dékoneksyon' placement={tooltipPlacement} TransitionComponent={Zoom}>
          <Fab
            className={classes.dekoneksyon}
            color='secondary'
            aria-label='logout'
            size='small'
            onClick={() => meteEsOuve(true)}
          >
            <ExitToAppIcon />
          </Fab>
        </DekoneksonTooltip>
      </Link>
      <Alet esOuve={esOuve} meteEsOuve={meteEsOuve} handleKonfime={handleDekonekte} />
    </>
  )
}

Dekoneksyon.defaultProps = {
  tooltipPlacement: 'left'
}

Dekoneksyon.propTypes = {
  chimen: PropTypes.string.isRequired,
  tooltipPlacement: PropTypes.string
}

export default Dekoneksyon