import React, { useState, useEffect } from 'react';
import moment from 'moment';

// Redux part
import { useSelector, useDispatch } from 'react-redux';
import { StoreState } from 'store/rootReducer';

// Import actions here

import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import DateItem from 'components/items/DateItem';
import find from 'lodash/find';
import Avatar from 'components/items/Avatar';
import styleIdentifiers from './conversationCard.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type ConversationCardProps = StateProps & DispatchProps & OwnProps;

const ConversationCard = (props: ConversationCardProps) => {
  const {
    action,
    item,
    item: { sendFrom, image, _id },
    date,
    selectedConvers,
  } = props;
  // mapStateToProps
  const lg = useSelector((state: StoreState) => state.content.lg);
  // Allow to dispatch actions
  const dispatch = useDispatch();

  const profile = useSelector(
    (state: StoreState) => state.account.profile && state.account.profile.data,
  );

  const otherGuy = find(item.getAccounts, account => {
    return account._id !== profile._id;
  });

  if (!otherGuy) return false;

  const name = `${otherGuy.firstName} ${otherGuy.lastName}`;

  const text = otherGuy?.firstName?.charAt(0) + otherGuy?.lastName?.charAt(0);

  return (
    <div
      className={styles('conversation-card', selectedConvers === _id && 'active')}
      onClick={() => action(_id, name)}
    >
      <div className={styles('left')}>
        <Avatar className={styles('avatar')} profile={otherGuy} medium />
      </div>
      <div className={styles('right')}>
        <div className={styles('text', 'name')}>{name}</div>
        {date && (
          <div className={styles('date')}>
            <DateItem date={date} format="LL" />
          </div>
        )}
      </div>
    </div>
  );
};

export default ConversationCard;
