import { makeStyles } from "@material-ui/core/styles";
import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
import Avatar from '@mui/material/Avatar';

const useStyles = makeStyles({   
    avatarArrowWrapper: {
        position:'absolute',
        right: 20,
        top: '70vh',
        width: 56,
    },    
    avatarArrow: {
        cursor:'pointer',
        '&:hover': {
            backgroundColor: 'rgb(41, 139, 231)',
            color: '#ffffff',
        }
    },
    listSeenIcon: {
        position: 'absolute',
        top: -8,
        left: 16,
        borderRadius: '50%',
        color: '#ffffff',
        border: 'none',
        height: 24,
        width: 24,
        textAlign: 'center',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        alignContent: 'center',
        fontSize: 12,
        zIndex: 10,
        cursor:'pointer',
    },      
});

interface IArrowBack {
    isArrow: boolean,
    isNew: {new:number,mute:boolean},
    handleScrollTo: () => void,
    openPinned: boolean
}

const ArrowBack = ({ isArrow, handleScrollTo, isNew,openPinned }: IArrowBack) => {
    const classes = useStyles()

return (
    <div className={classes.avatarArrowWrapper} style={{display: isArrow ? 'block' : 'none'}}>
        <button onClick={handleScrollTo} style={{display: isNew.new&&!openPinned ? 'block' : 'none',
          background: isNew.mute ? '#a7aaa7' : '#0ac40a'}}
          className={classes.listSeenIcon}>{isNew.new}</button>
        <Avatar onClick={handleScrollTo} className={classes.avatarArrow}
          sx={{backgroundColor: '#ffffff', width: 56, height: 56,color: '#6b6b6b'}}>
          <ArrowDownwardIcon fontSize="medium" />  
        </Avatar>                    
    </div>          
    )
}

export default ArrowBack