import { useEffect } from "react"
import { useDispatch } from "react-redux"
import ToolBar from "./ToolBar"
import SettingsPicture from "./SettingsPicture"
import SettingsMenu from "./SettingsMenu"
import { asyncCurrentUser } from '../../../../redux/authorization/operations'
import { refreshAppTime } from '../../../../helpers'

interface ISettingsBar {
  handleClick:() => void
}

const SettingsBar = ({ handleClick }: ISettingsBar) => {
  const dispatch = useDispatch()

  useEffect(() => {
    const handleReset = () => dispatch(asyncCurrentUser())
    handleReset()
    const idInterval = setInterval(handleReset, refreshAppTime);
    return () => clearInterval(idInterval);
  }, [dispatch]);
  
  return (
    <div style={{backgroundColor: '#f3f2f2',height:'100%',width:'100%'}}>
      <ToolBar handleClick={handleClick}/>
      <SettingsPicture />
      <SettingsMenu/>
    </div>
    )
}

export default SettingsBar