import { type FC, useEffect } from 'react';
import { Helmet } from 'react-helmet-async';
import { useMutation } from 'react-query';

import Box from '@material-hu/mui/Box';
import Container from '@material-hu/mui/Container';
import Stack from '@material-hu/mui/Stack';
import { type Theme, useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';
import useMediaQuery from '@material-hu/mui/useMediaQuery';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import MarketplacePostAddButton from 'src/pages/dashboard/marketplace/components/MarketplacePostAddButton';
import MarketplacePostList from 'src/pages/dashboard/marketplace/components/MarketplacePostList';
import MyMarketplacePostsAccordion from 'src/pages/dashboard/marketplace/components/MyMarketplacePostsAccordion';
import MyMarketplacePostsCard from 'src/pages/dashboard/marketplace/components/MyMarketplacePostsCard';
import { clearMarketplaceNotifications as clearNotificationsQuery } from 'src/pages/dashboard/marketplace/queries';
import { clearMarketplaceNotifications } from 'src/services/marketplace';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

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

  const theme: Theme = useTheme();
  const isSmallScreen = useMediaQuery(theme.breakpoints.down('lg'));

  const { mutate: clearNotificationsMutate } = useMutation(
    clearMarketplaceNotifications,
    {
      onMutate: () => {
        clearNotificationsQuery();
      },
    },
  );

  useEffect(() => {
    clearNotificationsMutate();
  }, [clearNotificationsMutate]);

  const HuGoThemeProvider = useHuGoTheme();

  return (
    <HuGoThemeProvider>
      <Helmet>
        <title>{formatTitle(t('marketplace:marketplace'))}</title>
      </Helmet>
      <Box
        sx={theme => ({
          backgroundColor: theme.palette.new.background.layout.default,
          minHeight: '100%',
          pt: 5,
          pb: 8,
          px: 12,
        })}
      >
        <Stack
          direction="row"
          justifyContent="center"
          sx={{ width: '100%', minWidth: 0 }}
        >
          <Container
            id="marketplace-container"
            sx={{
              position: 'relative !important',
              mx: 0,
              maxWidth: '600px !important',
              flex: '1 1 0%',
              minWidth: 0,
              ...(!isSmallScreen && { pr: '0 !important' }),
              ...(isSmallScreen && {
                maxWidth: '100% !important',
                boxSizing: 'border-box',
                overflowX: 'hidden',
              }),
            }}
          >
            <Stack
              gap={2}
              sx={{ minWidth: 0 }}
            >
              <Typography
                variant="globalXL"
                fontWeight="fontWeightSemiBold"
              >
                {t('marketplace:marketplace')}
              </Typography>
              <MarketplacePostAddButton />
            </Stack>
            {isSmallScreen && (
              <Box sx={{ mt: 3 }}>
                <MyMarketplacePostsAccordion />
              </Box>
            )}
            <MarketplacePostList />
          </Container>
          {!isSmallScreen && (
            <Container
              id="side-modules"
              sx={{
                flex: 1,
                minWidth: 0,
                margin: '0 !important',
                pt: 4,
                transition: 'padding 0.3s',
              }}
            >
              <Box
                sx={{
                  width: '100%',
                  minWidth: 0,
                  maxWidth: 424,
                  mb: 2,
                }}
              >
                <MyMarketplacePostsCard />
              </Box>
            </Container>
          )}
        </Stack>
      </Box>
    </HuGoThemeProvider>
  );
};

export default Marketplace;
