import { makeStyles } from '@material-ui/core'
import { useState, useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import ToolBar from './ToolBar'
import ProfilePicture from './ProfilePicture'
import ProfileMenu from './ProfileMenu'
import ProfileLists from './ProfileLists'
import { asyncGetContacts } from '../../../../redux/contacts/operations'
import { getLeftIsOpen } from '../../../../redux/control/selector'
import { refreshAppTime } from '../../../../helpers'

const useStyles = makeStyles({
  container: {
    backgroundColor: '#ffffff',
    height: '100%',
    width:'100%',
    position:'relative'
  },
  scrollContainer: {
    overflowY: 'scroll',
    maxHeight: '93vh',
    width: '100%',
    '&::-webkit-scrollbar': {
      width: '0.4em'
    },
    '&::-webkit-scrollbar-track': {
      boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
      webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
      backgroundColor: '#eceeec',
    },
    '&::-webkit-scrollbar-thumb': {
      backgroundColor: '#ccc8c8',
    },
    "&::-webkit-scrollbar-thumb:focus": {
      backgroundColor: "#959595",
    },
    "&::-webkit-scrollbar-thumb:active": {
      backgroundColor: "#959595",
    },    
  },
})

const CredentialsList = () => {
  const classes = useStyles()
  const dispatch = useDispatch()
  const leftIsOpen  = useSelector(getLeftIsOpen)
  const [disabled, setDisabled] = useState<boolean>(false)

  useEffect(() => {
    const handleReset = () => leftIsOpen !== 'contacts'&&dispatch(asyncGetContacts())
    handleReset()
    const idInterval = setInterval(handleReset, refreshAppTime);
    return () => clearInterval(idInterval);
  }, [leftIsOpen, dispatch]);
  
    return (
    <div className={classes.container}>
      <ToolBar />
      <div className={classes.scrollContainer}>
        <ProfilePicture />
        <ProfileMenu disabled={disabled}/>
        <ProfileLists setDisabled={setDisabled}/>
      </div>
    </div>
  )
}

export default CredentialsList