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

// 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 moment from 'moment';
import styleIdentifiers from './messageCard.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type MessageCardProps = StateProps & DispatchProps & OwnProps;

const MessageCard = (props: MessageCardProps) => {
  const {
    otherPerson,
    item: { createdAt, message, sentBy },
    item,
  } = props;
  // mapStateToProps
  const lg = useSelector((state: StoreState) => state.content.lg);

  const profile = useSelector(
    (state: StoreState) => state.account.profile && state.account.profile.data,
  );
  // Allow to dispatch actions
  const dispatch = useDispatch();

  const writer;

  const sentByMe = sentBy === profile._id;

  return (
    <div className={styles('message-card-wrapper', sentByMe && 'right-position')}>
      <div className={styles('header-container')}>
        <div className={styles('message-name')}>
          {sentByMe && <TextItem path="pages.messages.you" />}
          {!sentByMe && <TextItem path={otherPerson || 'pages.messages.noName'} />}
        </div>
        <div className={styles('date-container')}>
          <TextItem path={moment(createdAt).format('DD/MM/YYYY HH:mm')} />
        </div>
      </div>
      <div className={styles('message-content')}>
        <div className={styles('message-wrapper', sentByMe && 'right')}>
          <div className={styles('message-text', sentByMe && 'right')}>
            <TextItem path={message} />
          </div>
        </div>
      </div>
    </div>
  );
};

export default MessageCard;
