import React from "react";
import { useQuery } from "@apollo/react-hooks";
import { gql } from "apollo-boost";
import { GQLMessage } from "./gql-types";

export default function Chatroom() {
  const {
    loading: localLoading,
    error: localError,
    data: localData
  } = useQuery(gql`
    {
      currentChat {
        workspace
        channel
      }
    }
  `);
  const variables = {
    workspace: localData.currentChat?.workspace || "",
    channel: localData.currentChat?.channel || ""
  };
  const {
    loading: remoteLoading,
    error: remoteError,
    data: remoteData
  } = useQuery(
    gql`
      query Messages($workspace: String!, $channel: String!) {
        messages(
          workspace: $workspace
          order: DATE_ASC
          filter: { channel: $channel }
        ) {
          messages {
            content
            username
            userRealname
            time
            messageId
          }
        }
      }
    `,
    {
      variables
    }
  );

  if (localLoading || remoteLoading) {
    return <div>Loading</div>;
  }
  if (localData.currentChat == null) {
    return <div>Select a channel from the left menu</div>;
  }

  if (localError) {
    return <div>{localError.message}</div>;
  }
  if (remoteError) {
    return <div>{remoteError.message}</div>;
  }

  return (
    <div>
      <ul className="chatlog">
        {remoteData.messages.messages.map((msg: GQLMessage) => (
          <li key={msg.messageId}>
            <article className="message">
              <header>
                {msg.userRealname} ({msg.username}) ({msg.messageId})
              </header>
              <p>{msg.content}</p>
            </article>
          </li>
        ))}
      </ul>
    </div>
  );
}