import React, { Component, useState, useEffect } from "react";
import { TeamOutlined, FormOutlined, SearchOutlined } from "@ant-design/icons";
import { connect } from "react-redux";
import "./myProfile.css";

import ChatGroupsBar from "./chatGroups/chatGroups";
import ChatMessages from "./chatMessages/chatMessages";
import {
  actionChatGroup,
  actionMessage,
} from "./chatGroups/actionChatGroup/actionChatGroup";

class MyProfile1 extends Component {
  constructor(props) {
    super(props);
    this.state = { text: "" };
  }

  // chatGroups() {
  //   const stateChatGroup = this.props.state.chatGroup;
  //   for (var keys in stateChatGroup) {
  //     for (var keyData in stateChatGroup[keys]) {
  //       if (keyData === "data") {
  //         const allChatGroups = stateChatGroup[keys][keyData].getAllChatGroups;
  //         return allChatGroups.map((el) => (
  //           <ChatGroupsBar key={el.id} id={el.id} login={el.inId.login} />
  //         ));
  //       }
  //     }
  //   }
  // }

  // chatGroupsMessage() {
  //   const stateMessages = this.props.state.message;
  //   for (var keys in stateMessages) {
  //     for (var keyData in stateMessages[keys]) {
  //       if (keyData === "data") {
  //         const allMessages = stateMessages[keys][keyData].getAllMessages;
  //         return allMessages.map((el) => (
  //           <ChatMessages
  //             key={el.id}
  //             id={el.id}
  //             login={el.inId.login}
  //             message={el.message}
  //           />
  //         ));
  //       }
  //     }
  //   }
  // }

  way(obj, resolverName, a) {
    const stateObj = this.props.state[obj];
    for (var keys in stateObj) {
      for (var keyData in stateObj[keys]) {
        if (keyData === "data") {
          const allObj = stateObj[keys][keyData][resolverName];
          console.log(allObj);
          return allObj.map(a);
        }
      }
    }
  }

  componentDidMount() {
    this.props.chatGroup();
    this.props.message();
  }

  render() {
    return (
      <div className="container">
        <div className="my-profile">
          <div className="chat-sidebar">
            <div className="create-chat">
              <div>
                <div>
                  <TeamOutlined />
                  <span className="span">Список чатов</span>
                </div>
                <FormOutlined />
              </div>

              <div className="search-input">
                <input
                  value={this.state.text}
                  onChange={(e) => this.setState({ text: e.target.value })}
                  placeholder="Поиск..."
                />
                <SearchOutlined />
              </div>
            </div>

            <div className="chat-groups">
              {this.way("chatGroup", "getAllChatGroups", (el) => (
                <ChatGroupsBar key={el.id} id={el.id} login={el.outId.login} />
              ))}
            </div>
          </div>

          <div className="chat-messages">
            {this.way("message", "getAllMessages", (el) => (
              <ChatMessages
                key={el.id}
                id={el.id}
                login={el.inId.login}
                message={el.message}
              />
            ))}
          </div>
        </div>
      </div>
    );
  }
}

const MyProfile = (props) => <ConnectedChatGroups />;

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

export default MyProfile;
