"use client";

import { useTranslations } from "next-intl";

import { Skeleton } from "@/components/ui";
import { useAppUiStore } from "@/providers/app-ui-store-provider";
import { useChats } from "@/providers/chats-provider";

import { ChatItemsList, NewMessages } from "..";

export default function NewMessagesWrapper() {
  const t = useTranslations("Chat");
  const { unreadChats } = useChats();

  const { isVisibleAll } = useAppUiStore(state => state.chats.newMessages);
  const hasHydrated = useAppUiStore(state => state._hasHydrated);
  const setChatsNewMessages = useAppUiStore(state => state.setChatsNewMessages);

  if (!hasHydrated) return <NewMessagesWrapperSkeleton />;

  return (
    <>
      {!!unreadChats.length && (
        <ChatItemsList
          title={t("new_messages")}
          viewAllProps={{
            count: unreadChats.length,
            isAll: isVisibleAll,
            onClick: () => {
              setChatsNewMessages({ isVisibleAll: !isVisibleAll });
            },
          }}
          isVisibleViewAll={unreadChats.length > 1}
        >
          <NewMessages chats={unreadChats} isVisibleAll={isVisibleAll} />
        </ChatItemsList>
      )}
    </>
  );
}

export const NewMessagesWrapperSkeleton = () => {
  return <Skeleton style={{ height: 300, width: "100%" }} />;
};