import { Button, Card, Input, Icon } from "antd";
import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import twilio from "twilio";
import {
  closeConversation,
  toggleConversationVisible
} from "../../redux/messaging/messaging.actions";
import PhoneFormatter from "../../utils/PhoneFormatter";
import "./chat-conversation.styles.scss"; //https://bootsnipp.com/snippets/exR5v
import { MdSend } from "react-icons/md";
import { useTranslation } from "react-i18next";

const client = twilio(
  "ACf1b1aaf0e04740828b49b6e58467d787",
  "0bea5e29a6d77593183ab1caa01d23de"
);

const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
});
const mapDispatchToProps = dispatch => ({
  toggleConversationVisible: conversationId =>
    dispatch(toggleConversationVisible(conversationId)),
  closeConversation: phone => dispatch(closeConversation(phone))
});
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(function ChatConversationComponent({
  conversation,
  toggleConversationVisible,
  closeConversation
}) {
  const { t } = useTranslation();

  const [messages, setMessages] = useState([]);

  useEffect(() => {
    client.messages.list({ limit: 20 }, (error, items) => {
      setMessages(
        items.reduce((acc, value) => {
          acc.push({
            sid: value.sid,
            direction: value.direction,
            body: value.body
          });
          return acc;
        }, [])
      );
    });
    return () => {};
  }, [setMessages]);
  return (
    <div>
      <Card
        title={
          conversation.open ? (
            <div style={{ display: "flex" }}>
              <div
                onClick={() => toggleConversationVisible(conversation.phone)}
              >
                <PhoneFormatter>{conversation.phone}</PhoneFormatter>
              </div>
              <Button
                type="danger"
                shape="circle-outline"
                onClick={() => closeConversation(conversation.phone)}
              >
                X
              </Button>
            </div>
          ) : null
        }
        style={{
          width: conversation.open ? "400px" : "175px",
          margin: "0px 10px"
        }}
        size="small"
      >
        {conversation.open ? (
          <div>
            <div className="messages" style={{ height: "400px" }}>
              <ul>
                {messages.map(item => (
                  <li
                    key={item.sid}
                    className={`${
                      item.direction === "inbound" ? "sent" : "replies"
                    }`}
                  >
                    <p> {item.body}</p>
                  </li>
                ))}
              </ul>
            </div>
            <Input.Search
              placeholder={t("messaging.labels.typeamessage")}
              enterButton={<Icon component={MdSend} />}
            />
          </div>
        ) : (
          <div style={{ display: "flex" }}>
            <div onClick={() => toggleConversationVisible(conversation.phone)}>
              <PhoneFormatter>{conversation.phone}</PhoneFormatter>
            </div>
            <Button
              type="dashed"
              shape="circle-outline"
              onClick={() => closeConversation(conversation.phone)}
            >
              X
            </Button>
          </div>
        )}
      </Card>
    </div>
  );
});