import { useMutation, useQuery } from '@apollo/react-hooks'
import { USER_LOGOUT, CURRENT_USER } from './graphql'
import { SyntheticEvent } from 'react'

interface LogoutButtonProps {
  title?: string
}

const LogoutButton = ({ title }: LogoutButtonProps) => {
  const [logout, { loading, error }] = useMutation(USER_LOGOUT)
  const { refetch } = useQuery(CURRENT_USER)

  return (
    <button disabled={loading} onClick={async (event: SyntheticEvent) => {
      try {
        const data = await logout()
        console.log('LogoutButton', data)
        refetch()
      } catch (error) {
        console.log('LogoutButton', error)
      }
    }}>{title || 'Log out'}</button>
  )
}

export default LogoutButton