import useTranslation from "next-translate/useTranslation"
import InfiniteScroll from "react-infinite-scroll-component"

import { Loader } from "../../design/Loader"
import { Message } from "./Message"
import { useMessages } from "../../../contexts/Messages"
import { Emoji } from "../../Emoji"

export const Messages: React.FC = () => {
  const { t } = useTranslation()
  const { messages, hasMore, nextPage } = useMessages()

  if (messages.length === 0) {
    return (
      <div
        id="messages"
        className="scrollbar-firefox-support mt-8 flex w-full flex-1 flex-col overflow-y-auto text-center text-lg transition-all"
      >
        <p>
          {t("application:nothing-here")} <Emoji value=":ghost:" size={20} />
        </p>
        <p>{t("application:start-chatting-kill-ghost")}</p>
      </div>
    )
  }

  return (
    <div
      id="messages"
      className="scrollbar-firefox-support flex w-full flex-1 flex-col-reverse overflow-y-auto transition-all"
    >
      <InfiniteScroll
        scrollableTarget="messages"
        className="messages-list !overflow-x-hidden"
        dataLength={messages.length}
        next={nextPage}
        inverse
        hasMore={hasMore}
        loader={<Loader />}
      >
        {messages.map((message) => {
          return <Message key={message.id} message={message} />
        })}
      </InfiniteScroll>
    </div>
  )
}