import { type FC } from 'react';
import { Helmet } from 'react-helmet-async';
import { useNavigate } from 'react-router-dom';

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

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import MyMarketplacePostList from 'src/pages/dashboard/marketplace/components/MyMarketplacePostList';
import { marketplaceRoutes } from 'src/pages/dashboard/marketplace/routes';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

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

  const navigate = useNavigate();
  const theme: Theme = useTheme();
  const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));

  const handleBack = () => {
    navigate(marketplaceRoutes.marketplace());
  };

  const HuGoThemeProvider = useHuGoTheme();

  return (
    <HuGoThemeProvider>
      <Helmet>
        <title>{formatTitle(t('marketplace:my_marketplace'))}</title>
      </Helmet>
      <Box
        sx={theme => ({
          backgroundColor: theme.palette.new.background.layout.default,
          minHeight: '100%',
          pt: 2,
          pb: 8,
        })}
      >
        <Stack
          direction="row"
          justifyContent="center"
        >
          <Container
            maxWidth="sm"
            id="marketplace-container"
            sx={{
              position: 'relative',
              mx: 0,
              pr: !isSmallScreen ? '0 !important' : undefined,
            }}
          >
            <Typography
              variant="globalL"
              component="h2"
              fontWeight="fontWeightSemiBold"
              color={theme => theme.palette.new.text.neutral.brand}
            >
              <Tooltip title={t('marketplace:back_to_marketplace')}>
                <IconButton
                  onClick={handleBack}
                  aria-label={t('marketplace:back_to_marketplace')}
                  sx={{ mr: 1 }}
                >
                  <ArrowBackIcon />
                </IconButton>
              </Tooltip>
              {t('marketplace:my_posts')}
            </Typography>
            <MyMarketplacePostList />
          </Container>
        </Stack>
      </Box>
    </HuGoThemeProvider>
  );
};

export default MyMarketplacePosts;
