import BottomNavigation from '@mui/material/BottomNavigation';
import BottomNavigationAction from '@mui/material/BottomNavigationAction';
import { useState } from 'react';
import { useSelector } from 'react-redux';
import { makeStyles } from '@material-ui/core'

import AudioList from './AudioList';
import MediaList from './MediaList';
import FilesList from './FilesList';
import TextList from './TextList';
import VideoList from './VideoList'
import { getMessagesMemo } from '../../../../../../../redux/messages/selector'
import { handleSort } from '../../../../../../../helpers';
import { TMessages } from '../../../../../../../typescript/redux/messages/types'

const useStyles = makeStyles({
    bottomNavigation: {
        boxShadow: '0px 1px 1px 1px rgba(120,120,120,0.63)',
    },
    icon: {
        fontSize: 17,
        lineHeight: 0,
        marginBottom: 0,
        fontWeight:600
    },
    underline: {
        fontSize: 45,
        lineHeight: 0,
    },
})

const ProfileLists = ({sort}:{sort:boolean}) => {
    const classes = useStyles()
    const messagesMemo = useSelector(getMessagesMemo)
    const [isActive, setIsActive] = useState<number>(0)
    const handleIsActive = (_e: React.SyntheticEvent<Element, Event>, newValue: number): void => setIsActive(newValue)
    const Icon = ({ name }: { name: string }) => <span className={classes.icon}>{name}</span>
    const Label = () => <span className={classes.underline}>__</span>
    const sortedMessages:TMessages = handleSort('updatedAt',messagesMemo,sort)
    return (
    <>
      <BottomNavigation
        showLabels
        value={isActive}
        onChange={handleIsActive}
        className={classes.bottomNavigation}
        >
            <BottomNavigationAction label={<Label/>} icon={<Icon name='Files' />} />   
            <BottomNavigationAction label={<Label/>} icon={<Icon name='Media' />} />
            <BottomNavigationAction label={<Label/>} icon={<Icon name='Text' />} />
            <BottomNavigationAction label={<Label />} icon={<Icon name='Audio' />} />
            <BottomNavigationAction label={<Label/>} icon={<Icon name='Video' />} />

            </BottomNavigation>
            {isActive === 0 && <FilesList messagesMemo={sortedMessages}/>}            
            {isActive === 1 && <MediaList messagesMemo={sortedMessages}/>}
            {isActive === 2 && <TextList messagesMemo={sortedMessages}/>}
            {isActive === 3 && <AudioList messagesMemo={sortedMessages} />}
            {isActive === 4 && <VideoList messagesMemo={sortedMessages}/>}
    </>      
    )
}

export default ProfileLists