import {useState} from 'react'
import {styled} from '@mui/material/styles'
import PropTypes from 'prop-types'
import Link from 'next/link'
import {signOut} from 'next-auth/client'
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
  }
}))

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

const DekoneksonTooltip = Tooltip

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

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

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

Dekoneksyon.defaultProps = {
  tooltipPlacement: 'left'
}

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

export default Dekoneksyon