import { type FC } from 'react';
import { useQuery } from 'react-query';
import { useNavigate } from 'react-router-dom';

import useGeneralError from 'src/hooks/useGeneralError';
import { marketplaceKeys } from 'src/pages/dashboard/marketplace/queries';
import { marketplaceRoutes } from 'src/pages/dashboard/marketplace/routes';
import { getMyListTotalCount } from 'src/services/marketplace';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

import AlertAccordion from 'src/components/pendingApprovals/AlertAccordion';

export const MyMarketplacePostsAccordion: FC = () => {
  const { t } = useTranslation(['marketplace', 'post']);
  const navigate = useNavigate();
  const showGeneralError = useGeneralError();

  const { data } = useQuery(marketplaceKeys.mineCount(), getMyListTotalCount, {
    onError: (err: unknown) => {
      showGeneralError(err, t('marketplace:error_loading_posts'));
    },
  });

  const count = data?.data?.totalCount;

  const handleClick = () => {
    navigate(marketplaceRoutes.mine());
  };

  return (
    <AlertAccordion
      title={t('marketplace:my_posts')}
      description={''}
      buttonTitle={`${t('post:see_posts')} (${count?.toString() ?? '0'})`}
      onClick={handleClick}
    />
  );
};

export default MyMarketplacePostsAccordion;
