"use client";

import { NewMessages, ViewAll } from "@/components/domains/chat";
import { Skeleton } from "@/components/ui";
import { useBalance } from "@/hooks/balance/useBalance";
import { useAppUiStore } from "@/providers/app-ui-store-provider";
import { useChats } from "@/providers/chats-provider";

import styles from "./NewMessagesSection.module.scss";

export default function NewMessagesSection() {
  const { unreadChats } = useChats();
  const { balance } = useBalance();

  const { isVisibleAll } = useAppUiStore(state => state.home.newMessages);
  const hasHydrated = useAppUiStore(state => state._hasHydrated);
  const setHomeNewMessages = useAppUiStore(state => state.setHomeNewMessages);

  if (!hasHydrated) return <NewMessagesSectionSkeleton />;

  return (
    <>
      {!!unreadChats.length && (
        <div className={styles.container}>
          {unreadChats.length > 1 && (
            <ViewAll
              count={unreadChats.length}
              isAll={isVisibleAll}
              onClick={() => {
                setHomeNewMessages({ isVisibleAll: !isVisibleAll });
              }}
            />
          )}
          <NewMessages
            chats={unreadChats}
            isVisibleAll={isVisibleAll}
            currentBalance={balance}
          />
        </div>
      )}
    </>
  );
}

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