import React, { Component } from "react";
import { connect } from "react-redux";

import {
  actionChatGroup,
  actionMessage,
} from "./actionChatGroup/actionChatGroup";
import "./chatGroups.css";

const ChatGroupMessage = ({message}) => {
  return (
    <div className="last-message">
      <span>{message}</span>
      <div className="unread-messages">5</div>
    </div>
  );
};

const ChatGroups = ({ id, login, state }) => {
  const way = (obj, resolverName, a) => {
    const stateObj = state[obj];
    for (var keys in stateObj) {
      for (var keyData in stateObj[keys]) {
        if (keyData === "data") {
          const allObj = stateObj[keys][keyData][resolverName];
          return allObj.map(a);
        }
      }
    }
  };

  return (
    <>
      <div className="groups" onClick={() => console.log(id)}>
        <div className="avatar">
          {/* <img src={props.src} /> */}
          <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" />
        </div>

        <div className="data">
          <div className="userName">
            <span>{login}</span>
            <span className="date">00:00</span>
          </div>

          {/* {way("message", "getAllMessages", (el) => (
            <ChatGroupMessage
              key={el.id}
              message={el.message}
            />
          ))} */}
          {/* <ChatGroupMessage /> */}

          {/* <div className="last-message"> */}
          {/* <span>{props.message}</span> */}
          {/* <div className="unread-messages">5</div>
          </div> */}
        </div>
      </div>
    </>
  );
};

const ChatGroupsBar = ({ id, login }) => (
  <ConnectedChatGroups id={id} login={login} />
);

const ConnectedChatGroups = connect(
  (state) => {
    return { state };
  },
  {
    chatGroup: actionChatGroup,
    message: actionMessage,
  }
)(ChatGroups);

export default ChatGroupsBar;
