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

import ChatListRecent from './ChatListRecent'
import FilesList from './FilesList';
import MediaList from './MediaList';
import TextList from './TextList';
import AudioList from './AudioList'
import VideoList from './VideoList';
import { asyncGetAllMessages } from '../../../../redux/allMessages/operations';
import { asyncGetChats } from '../../../../redux/chats/operations';
import { getStateMemo } from '../../../../redux/chats/selector';
import { getAllMessagesMemo } from '../../../../redux/allMessages/selector';
import { getIsOpen } from '../../../../redux/control/selector';
import { sortByRecent,handleSort } from '../../../../helpers';
import { asyncStartChatById } from '../../../../redux/chat/operations';
import { actionIsOpen } from '../../../../redux/control/action';
import { TAllMessages } from '../../../../typescript/redux/allMessages/types';
import { TChats } from '../../../../typescript/redux/chats/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,
 },
})

interface ISearchLists {
  value: string,
  setValue: (value: string) => void,
  sort: boolean
}

const SearchLists = ({ value,setValue,sort }: ISearchLists) => {
    const classes = useStyles()
    const dispatch = useDispatch()
    const { chats } = useSelector(getStateMemo)
    const messagesMemo = useSelector(getAllMessagesMemo)
    const isOpen = useSelector(getIsOpen)
    const [isActive, setIsActive] = useState<number>(0)
    const handleIsActive = (_e: React.SyntheticEvent<Element, Event>, newValue: number): void => {
      setIsActive(newValue)
      setValue('')
    }
    const Icon = ({ name }: { name: string }) => <span className={classes.icon}>{name}</span>
    const Label = () => <span className={classes.underline}>__</span>
    const handleListItemClick = (companionId: string) => {
      isOpen&&dispatch(actionIsOpen(''))
      dispatch(asyncStartChatById(companionId))
    }
    const filterChats= (arr:any) => arr.filter((el:any) => {
      const credentials = el.name + ' ' + el.lastName
      if(credentials.toLowerCase().includes(value.toLowerCase())) return el
    })
  const filterMessages = (arr: any) => arr.filter((el: any) => {
      if (!el.fullType && el.message.toLowerCase().includes(value.toLowerCase())) {
        return el
      } else if (el.fullType&& el.fullType.toLowerCase().includes(value.toLowerCase())) {
        return el
      }
    })  
    useEffect(() => {
      dispatch(asyncGetAllMessages())
      dispatch(asyncGetChats())
      const handleReset = () => {
         dispatch(asyncGetAllMessages())
         dispatch(asyncGetChats())
      }
    const idInterval = setInterval(handleReset, 5000);
    return () => clearInterval(idInterval);
    }, [dispatch]);
  
    const filteredAndSorted:TChats = filterChats(sortByRecent(chats,sort))
    const allMessagesMemo:TAllMessages = filterMessages(handleSort('updatedAt',messagesMemo,sort))
  
    return (
    <>
      <BottomNavigation
        showLabels
        value={isActive}
        onChange={handleIsActive}
        className={classes.bottomNavigation}
      >
          <BottomNavigationAction label={<Label />} icon={<Icon name='Chats' />} />
          <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 && <ChatListRecent value={value}
              filteredAndSorted={filteredAndSorted} handleListItemClick={handleListItemClick} />}
            {isActive === 1 && <FilesList allMessagesMemo={allMessagesMemo} value={value}/>}
            {isActive === 2 && <MediaList allMessagesMemo={allMessagesMemo} value={value}/>}
            {isActive === 3 && <TextList allMessagesMemo={allMessagesMemo} value={value}/>}
            {isActive === 4 && <AudioList allMessagesMemo={allMessagesMemo} value={value}/>}
            {isActive === 5 && <VideoList allMessagesMemo={allMessagesMemo} value={value}/>}
    </>      
    )
}

export default SearchLists