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

import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import HuCardContainer from '@material-hu/components/design-system/CardContainer';

import useGeneralError from 'src/hooks/useGeneralError';
import MyMarketplacePostsButton from 'src/pages/dashboard/marketplace/components/MyMarketplacePostsButton';
import { getMyListTotalCount } from 'src/services/marketplace';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

import { marketplaceKeys } from '../queries';

export const MyMarketplacePostsCard: FC = () => {
  const { t } = useTranslation(['marketplace', 'general']);
  const showGeneralError = useGeneralError();

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

  const count = data?.data?.totalCount;

  return (
    <HuCardContainer
      fullWidth
      padding={16}
    >
      <Stack sx={{ gap: 2 }}>
        <Stack
          sx={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}
        >
          <Typography
            variant="globalM"
            fontWeight="fontWeightSemiBold"
          >
            {t('marketplace:my_posts')}
          </Typography>
          <MyMarketplacePostsButton />
        </Stack>
        <Typography
          variant="globalXL"
          fontWeight="fontWeightSemiBold"
        >
          {count}
        </Typography>
      </Stack>
    </HuCardContainer>
  );
};

export default MyMarketplacePostsCard;
