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

import AlertInfo from '../../../reusableComponents/AlertInfo'
import ChatItem from './ChatItem';
import { notification,playNotificationWithoutPermission,sortByRecent } from '../../../../helpers'
import { getStateMemo } from '../../../../redux/chats/selector'
import { getChatMemo } from '../../../../redux/chat/selector'
import { asyncGetChats } from '../../../../redux/chats/operations'
import { asyncStartChatById } from '../../../../redux/chat/operations'
import { actionRemoveChat } from '../../../../redux/chat/action'
import { actionScroll, actionIsOpen } from '../../../../redux/control/action'
import { getIsOpen } from '../../../../redux/control/selector';
import { TChats } from '../../../../typescript/redux/chats/types';

const useStyles = makeStyles({
  list: {
    width: '100%',
    maxHeight: '890px',
    overflowY: 'scroll',
  '&::-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 ChatsList = ({sort}:{sort:boolean}) => {
  const classes = useStyles()
  const dispatch = useDispatch()
  const ref = useRef<any>(null)
  const [sortedChats, setSortedChats] = useState<TChats>([]);
  const { total, chats } = useSelector(getStateMemo)
  const chat = useSelector(getChatMemo)
  const isOpen = useSelector(getIsOpen)

  const handleListItemClick = (companionId: string) => {
    isOpen&&dispatch(actionIsOpen(''))
    dispatch(asyncStartChatById(companionId))
  }

  const handleNewMsgs = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, companionId: string) => {
    e.stopPropagation()
    dispatch(actionScroll(true))
    isOpen&&dispatch(actionIsOpen(''))
    dispatch(asyncStartChatById(companionId))
  }

  useEffect(() => {
    dispatch(asyncGetChats())
    const handleReset = () => dispatch(asyncGetChats())
    const idInterval = setInterval(handleReset, 3000);
    return () => clearInterval(idInterval);
  }, [dispatch]);

  useEffect(() => {
    const handleNotification= (companionId: string) => {
      dispatch(asyncStartChatById(companionId))
      dispatch(actionScroll(true))
    }
    const sorted = sortByRecent(chats,sort)
    setSortedChats(sorted)
    if (chat.companionId&&!sorted.find((el) => el.companionId === chat.companionId))dispatch(actionRemoveChat())
    if (ref.current) {
      ref.current.forEach(({total,seen}: any,i:number) => {
        const oldDifferent = total - seen
        const chat = sorted[i]
        if(chat === undefined) return
        const newDifferent = chat.total - chat.seen
        if (newDifferent > oldDifferent && !chat.mute) {
          playNotificationWithoutPermission('http://localhost:3000/recive.mp3')
          notification(chat.name,() => handleNotification(chat.companionId))
        } 
      })
    }
      ref.current = sorted
  }, [chats, chat,sort, dispatch]) 

  return total !== '0' ? (
    <List className={classes.list} component="nav"
      aria-label="main mailbox folders">
      {sortedChats.map((el) => <ChatItem key={el.number} chat={el}  
       handleListItemClick={handleListItemClick} handleNewMsgs={handleNewMsgs}/>)}
    </List>
  ):<AlertInfo name='You do not have any chats yet!' />;
}

export default ChatsList