import React, {useState} from 'react'
import {useHistory} from 'react-router-dom'
import {useDispatch, useSelector} from 'react-redux'
import {Loader} from '../Loader/Loader'
import {auth} from '../../redux/outstaffingSlice'
import {getRole} from '../../redux/roleSlice'

import './logoutButton.scss'

export const LogoutButton = () => {
  const [isLoggingOut, setIsLoggingOut] = useState(false);
  const dispatch = useDispatch();
  const userRole = useSelector(getRole);
  const history = useHistory();

  return (
      <div className='logout-button'>
        <button
            onClick={() => {
              setIsLoggingOut(true);
              localStorage.clear();
              dispatch(auth(false));
              setIsLoggingOut(false);
              history.push(userRole === 'ROLE_DEV' ? '/authdev' : '/auth')
            }}
        >
          {isLoggingOut ? <Loader/> : 'Выйти'}{' '}
        </button>
      </div>
  )
};