"use client";

import { useTranslations } from "next-intl";

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 { ChatItemsList, CorrespondenceStarted } from "..";

export default function CorrespondenceStartedWrapper() {
  const t = useTranslations("Chat");
  const { startedChats } = useChats();
  const { balance } = useBalance();

  const { isVisibleAll } = useAppUiStore(
    state => state.chats.correspondenceStarted
  );
  const hasHydrated = useAppUiStore(state => state._hasHydrated);
  const setChatsCorrespondenceStarted = useAppUiStore(
    state => state.setChatsCorrespondenceStarted
  );

  if (!hasHydrated) return <CorrespondenceStartedSkeleton />;

  return (
    <>
      {!!startedChats.length && (
        <ChatItemsList
          title={t("correspondence_started.title")}
          viewAllProps={{
            count: startedChats.length,
            isAll: isVisibleAll,
            onClick: () => {
              setChatsCorrespondenceStarted({
                isVisibleAll: !isVisibleAll,
              });
            },
          }}
          isVisibleViewAll={startedChats.length > 1}
        >
          <CorrespondenceStarted
            chats={startedChats}
            isVisibleAll={isVisibleAll}
            currentBalance={balance}
          />
        </ChatItemsList>
      )}
    </>
  );
}

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