/**
 * Inbox tab main chat container component
 */

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { map } from 'lodash/fp';
import {didSetActiveTab} from '../../../tabs/actions';
import {COMMUNICATIONS} from '../../../tabs/constants';
import {LoadingRipple} from '../../../../utilities/components/LoadingRipple';
import PageLayout from '../../../components/PageLayout';
import {getCurrentThreadId} from '../../../selectors/thread';
import {fetchThreadContents} from '../../middlewares/thread-contents';
import {getIsFetchingThreadContents, getThreadContentsCollection} from '../../selectors';
import ChatMessage from '../ChatMessage';
import ThreadContent, {ThreadContentTypes} from '../../../../models/ThreadContent';
import ChatInput from '../ChatInput';

const Thread = () => {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(didSetActiveTab(COMMUNICATIONS));
  }, []);

  const threadId = useSelector(getCurrentThreadId);
  const isFetching = useSelector(getIsFetchingThreadContents);
  const collection = useSelector(getThreadContentsCollection);

  useEffect(() => {
    dispatch(fetchThreadContents(threadId));
  }, [threadId]);

  return (
    <PageLayout>
      <div id='chat-container' style={{overflowY: 'hidden'}}>
        <div className={`chat-body-container`}>
          {isFetching && <LoadingRipple isLoading />}
          {!isFetching &&
          <div className='chat-body'>
            {map(
              (each: ThreadContent) => (
                ThreadContentTypes.MESSAGE === each.type ? <ChatMessage
                  threadContent={each}
                  key={`thread_content_${each.id}`}
                /> : null
              ), collection
            )}
          </div>
          }
        </div>
        <ChatInput />
      </div>
    </PageLayout>
  );
};

export default Thread;