import { makeStyles } from '@material-ui/core'
import { useState } from 'react'
import ToolBar from './ToolBar'
import ProfilePicture from './ProfilePicture'
import ProfileMenu from './ProfileMenu'
import ProfileLists from './ProfileLists'

const useStyles = makeStyles({
    containerAbsolute: {
        position: 'absolute',
        top: 58,
        width: 506,
        borderLeft: 'solid 0.5px #9c9c9c',
        maxHeight: '905px',
        minHeight: '905px',
        overflowY: 'scroll',
        overflowX: 'hidden',
        backgroundColor:'#ffffff'
    }
})

const CredentialsList= () => {
  const classes = useStyles()
  const [sort, setSort] = useState<boolean>(false)
  const handleSort = () => setSort(!sort)
    return (
    <div>
        <ToolBar />
        <div className={classes.containerAbsolute}>
          <ProfilePicture />
          <ProfileMenu sort={sort} handleSort={handleSort}/>
          <ProfileLists sort={sort}/>
     </div>
   </div>
  )
}

export default CredentialsList