import React, { Component, Fragment } from "react";
import Button from "components/Button.jsx";
import classNames from "classname";
import avatar from "../assest/avatar.png";
import openSocket from "socket.io-client";
import { Link, withRouter } from "react-router-dom";
import decode from "jwt-decode";
import { domain } from "components/helper/const";
import auth from "components/helper/auth";
import ChatInfo from 'components/ChatModal'
import axios from 'axios'
import "./style.scss";

const Auth = new auth();
let historyHandled = false;
const socket = openSocket(domain);

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      height: window.innerHeight,
      message: [],
      roomList: [],
      msgBoX: "",
      usersTyping: [],
      userName: decode(localStorage.getItem("current")).name,
      userId: decode(localStorage.getItem("current")).id,
      userEmail: decode(localStorage.getItem("current")).email,
      usersTyping: [],
      showProfileModal: false,
      roomName: "",
      lastMsg: [],
      users: []
    };
  }

  scrollToBottom = () => {
    this.messagesEnd.scrollIntoView({ behavior: "smooth", block: "end", inline: "end" });
  };

  showModal = () => {
    this.setState({ show: true });
  };

  hideModal = () => {
    this.setState({ show: false });
  };

  handleSubmit = async event => {
    event.preventDefault();
    console.log("sent message");
    const { message } = this.state;

    const seed = {
      userName: this.state.userName,
      roomID: window.location.pathname.replace("/chat/", ""),
      message: this.state.msgBoX,
      userID: decode(localStorage.getItem("current")).id,
      avatar: { avatar }
    };

    socket.emit("send-chat-message", seed);
    this.setState({ msgBoX: "" });
  };

  getNonMembers = async (members) => {
    console.log(members)
    const userList = await axios.get('http://' + domain + '/users/')
    console.log(userList)
    let seed = []

    for (let i in (userList.data)) {
      seed[i] = {
        id: (userList.data[i])._id,
        name: (userList.data[i]).usr_fname + ' ' + (userList.data[i]).usr_lname
      }

    }

    console.log(seed)

    for (let i = 0; i <= seed.length - 1; i++) {
      for (let j = 0; j < (members).length; j++) {
        if (seed[i] != null && seed[i].name === (members[j]).name) {
          seed.splice(i, 1);
        }
      }
    }

    this.setState({
      users: seed
    })


    console.log(seed)
  }


  handleHistory(socket, data) {
    historyHandled = true;

    const { message } = this.state;
    if (data) {
      this.setState({ message: [] });

      for (let i = 0; i < Object.assign(data).length; i++) {
        let isItMe;
        if (data[i].userID == decode(localStorage.getItem("current")).id) isItMe = true;

        const newMsg = {
          author: data[i].username,
          body: data[i].message,
          userID: data[i].userID,
          avatar: data[i].avatar,
          me: isItMe
        };

        message.push(newMsg);
      }
      this.setState({ message: message });
      socket.removeListener("chats", this.handleHistory());
    }
  }

  componentDidMount = async () => {
    this.scrollToBottom();

    await socket.emit('clear-message')

    const roomInfo = await axios.get('http://' + domain + '/chat/getInfo/' + (window.location.pathname).replace('/chat/', ''))
    this.setState({
      roomName: roomInfo.data[0].name,
      message: [],
    })
    this.getNonMembers(roomInfo.data[0].members)
    await socket.emit("currentuserid", decode(localStorage.getItem("current")).id);
    await socket.emit(
      "new-user",
      window.location.pathname.replace("/chat/", ""),
      this.state.name,
      decode(localStorage.getItem("current")).id
    );
    await socket.on("roomGrant", data => {
      // if(data=='false') this.props.history.replace("/admin");
    });
    socket.emit("currentUser", {
      user: this.state.name,
      status: "online",
      room: window.location.pathname.replace("/chat/", "")
    });
    socket.on("roomList", data => {
      this.setState({
        roomList: data
      });
    });

    if (!historyHandled) {
      socket.on("chats", data => {
        if (data) {
          this.handleHistory(socket, data);
        }
      });
    }

    Auth.get("utils/get/rooms/" + window.location.pathname.replace("/chat/", "")).then(
      result => {
        console.log("aijo babub  aijo", result);
        this.setState({
          roomName: result.data.result[0].name
        });
      }
    );

    socket.on("hello world", () => {
      console.log("hello world");
    });

    socket.on("naya-message", data => {
      let message = this.state.message;
      console.log(message);
      let isItMe = false;
      if (data.userID == decode(localStorage.getItem("current")).id) isItMe = true;

      const newMsg = {
        author: data.username,
        body: data.message,
        userID: data.userID,
        avatar: data.avatar,
        me: isItMe
      };

      message.push(newMsg);
      this.setState({ message: message });
    });

    socket.on("user-connected", name => {
      // appendMessage(${name} connected haha)
    });

    socket.on("user-disconnected", name => {
      // appendMessage(${name} disconnected)
    });

    socket.on("onlineUser", data => {
      let online = [];
      for (let i in data) {
        if (data[i].room === window.location.pathname) {
          online.push(data[i].user);
        }
      }
      // onlineUserSection.innerHTML = 'Online Users : ' + online
    });

    socket.on("roomJoined", data => {
      // document.getElementById("currentRoom").innerHTML = 'Current Room : ' + data
    });

    socket.on("listOfRooms", data => {
      // document.getElementById('listRoom').innerHTML = data
    });

    socket.on("displayTyping", data => {
      this.setState({
        usersTyping: data
      });

      let user =data.split(" ");

      console.log(data)

      document.getElementById("users_typing").innerHTML = user[0]+" is Typing";
    });

    socket.on("clearTyping", data => {
      this.setState({
        usersTyping: []
      });
      document.getElementById("users_typing").innerHTML = "";
    });
    window.addEventListener("resize", this._onResize);
  };

  componentDidUpdate() {
    this.scrollToBottom();
  }
  handleReload() {
    setTimeout(() => {
      document.location.reload();
    }, 5);
  }

  handleMemberChange(event) {

    let index = event.nativeEvent.target.selectedIndex;
    this.setState({
      memberToAdd: {
        id: event.nativeEvent.target[index].value,
        name: event.nativeEvent.target[index].text
      }
    })
  }

  addMembersToGroup = async (event) => {
    await axios({
      method: 'put',
      url: 'http://' + domain + '/chat/addToRoom/' + (window.location.pathname).replace('/chat/', '') + '/u/',
      data: this.state.memberToAdd
    });
  };

  render() {
    const { height, message, roomList, users, roomName } = this.state;

    const style = {
      height: height
    };
    let temp = [];

    console.log(message)

    return (
      <div style={style} className="sockat-app">
        <div className="header">
          <div className="left">
            <h3 className="action">Messages</h3>
          </div>
          <div className="content">
            <h2 className="group-name">{roomName}</h2>
          </div>
          <div className="input-wrap mr-3">
            <Link to="/admin/chatrooms/">
              <Button buttonName="< Chat Room" />
            </Link>
          </div>
        </div>

        <div className="main">
          <Fragment>
            <div className="sidebar-left">
              <div className="chanels">
                {roomList.map((room, index) => {
                  return (
                    <div key={index} className="room-list">
                      <div className="room-header">
                        {((window.location.pathname).replace('/chat/', '') == room._id) ? <ChatInfo
                          roomID={roomList[index]._id}
                          roomName={roomList[index].name}
                          roomAccess={roomList[index].access}
                          no_of_user={roomList[index].no_of_user}
                          inMembers={roomList[index].members}
                          userList={users}
                          created_at={roomList[index].created_at}
                          created_by={roomList[index].created_by}
                          handleMembers={this.addMembersToGroup}
                          handlePassChange={
                            event => this.handleMemberChange(event)
                          }
                        /> : false}
                        <Link to={`/chat/${room._id}`}>
                          <p
                            className="room-name"
                            onClick={this.handleReload}
                          >
                            {room.name}
                          </p>
                        </Link>
                        <p className="room-access">
                          {room.access.toUpperCase()}
                        </p>
                      </div>
                      <div className="room-footer">
                        {this.state.message.map(data => {
                          temp = [...temp, data.body];
                        })}
                        <p className="room-message">
                          {temp[temp.length - 1]}
                        </p>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
            <div className="content">
              <div className="messages">

                {message.map((message, index) => {
                  return (
                    <div
                      key={index}
                      className={classNames("message", {
                        me: message.me
                      })}
                    >
                      <div className="message-body">
                        <Link to={`/admin/view-profile/${message.userID}`}>
                          <div className="message-author">
                            {message.me ? "" : message.author}
                          </div>
                        </Link>
                        <div className="message-text">
                          <p>{message.body} </p>
                        </div>
                      </div>
                    </div>
                  );
                })}
                <div
                  style={{ float: "left", clear: "both" }}
                  ref={el => {
                    this.messagesEnd = el;
                  }}
                />
              </div>

              <div id="users_typing" className="users_typing" />

              <div className="message-input-input">
                <form className="message-form" onSubmit={this.handleSubmit}>
                  <input
                    type="text"
                    className="message__input"
                    value={this.state.msgBoX}
                    onChange={event => {
                      socket.emit("userIsTyping", {
                        user: this.state.userName,
                        room: window.location.pathname.replace("/chat/", "")
                      });

                      this.setState({ msgBoX: event.target.value });
                    }}
                    onKeyUp={event => {
                      socket.emit("userIsNotTyping", {
                        user: this.state.userName,
                        room: window.location.pathname.replace("/chat/", "")
                      });
                    }}
                    onKeyDown={event => {
                      socket.emit("userIsTyping", {
                        user: this.state.userName,
                        room: window.location.pathname.replace("/chat/", "")
                      });
                    }}
                    placeholder="Enter message here..."
                    required
                  />
                  <button className="message__button--send">
                    <i className="icon-go" />
                  </button>
                </form>
              </div>
            </div>
          </Fragment>
        </div>
      </div>
    );
  }
}