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 ChatMessage from "./chatMessages/chatMessages";
import {
  actionChatGroup,
  actionMessage,
  actionUsers,
  actionAllMessOneUser,
} from "./chatGroups/actionChatGroup/actionChatGroup";
import history from "../history";

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

  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];
          if (allObj) return allObj.map(a);
        }
      }
    }
  }

  way1(obj, resolverName) {
    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];
          if (allObj)
            return <ChatGroupsBar id={allObj.id} login={allObj.login} />;
        }
      }
    }
  }

  componentDidMount() {
    const a = localStorage.getItem("id")
    this.props.chatGroup(a);
    this.props.message();
    // const ar = localStorage.getItem("a");
    // this.props.allMessOneUser("2");
  }

  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 className="createChat" />
              </div>

              <div className="search-input">
                <input
                  value={this.state.text}
                  onChange={(e) => this.setState({ text: e.target.value })}
                  placeholder="Введите E-mail"
                />
                <SearchOutlined
                  className="search"
                  onClick={() => this.props.users(this.state.text)}
                />
              </div>
            </div>

            <div className="chat-groups">
              {this.way1("users", "getUser") ||
                this.way("chatGroup", "getAllChatGroupsOneUser", (el) => {
                  console.log(el)
                  return (
                    <div key={el.id} onClick={() => history.push(`/my_profile/${el.id}`)}>
                      <ChatGroupsBar
                        id={el.id}
                        login={
                          +localStorage.getItem("id") !== el.autorId.id
                            ? el.autorId.login
                            : el.partnerId.login
                        }
                      />
                    </div>
                  );
                })}
            </div>
          </div>

          <div className="chat-messages">
            <ChatMessage />
            {/* {this.way("allMessOneUser", "getAllMessagesOneUser", (el) => {
              return (
                <div key={el.id} >
                  <ChatMessage
                    id={el.id}
                    // login={
                    //   +localStorage.getItem("id") !== el.autorId.id
                    //     ? el.autorId.login
                    //     : el.partnerId.login
                    // }
                  />
                </div>
              );
            })} */}
          </div>
        </div>
      </div>
    );
  }
}

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

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

export default MyProfile;