import React, { useState, useEffect } from "react";
import Chat from "twilio-chat";
import { Chat as ChatUI } from "@progress/kendo-react-conversational-ui";

const ChatApp = props => {
  const [error, setError] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [messages, setMessages] = useState([]);
  const [client, setClient] = useState(null);
  const [channel, setChannel] = useState(null);

  const user = {
    id: props.username,
    name: props.username
  };

  const handleError = error => setError("Could not load chat.");

  const twilioMessageToKendoMessage = message => ({
    text: message.body,
    author: { id: message.author, name: message.author },
    timestamp: message.timestamp
  });

  const messagesLoaded = messagePage =>
    setMessages(messagePage.items.map(twilioMessageToKendoMessage));

  const messageAdded = message =>
    setMessages([...messages, twilioMessageToKendoMessage(message)]);

  const sendMessage = event => channel.sendMessage(event.message.text);

  const setupChatClient = _client => {
    setClient(_client);
  };

  useEffect(() => {
    if (channel)
      channel
        .join()
        .catch(() => {})
        .then(() => {
          setIsLoading(false);
          channel.getMessages().then(messagesLoaded);
          channel.on("messageAdded", messageAdded);
        })
        .catch(handleError);
  }, [channel]);

  useEffect(() => {
    if (client) {
      // To effect
      client
        .getChannelByUniqueName("general")
        .then(_channel => _channel)
        .catch(error => {
          if (error.body.code === 50300) {
            return client.createChannel({ uniqueName: "general" });
          } else {
            handleError(error);
          }
        })
        .then(_channel => {
          setChannel(_channel);
        });
    }
  }, [client]);

  useEffect(() => {
    fetch("/chat/token", {
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      method: "POST",
      body: `identity=${encodeURIComponent(props.username)}`
    })
      .then(res => res.json())
      .then(data => Chat.create(data.token))
      .then(setupChatClient)
      .catch(handleError);
    return () => {
      client.shutdown();
    };
  }, []);

  if (error) {
    return <p>{error}</p>;
  } else if (isLoading) {
    return <p>Loading chat...</p>;
  }
  return (
    <ChatUI
      user={user}
      messages={messages}
      onMessageSend={sendMessage}
      width={500}
    />
  );
};

export default ChatApp;