import { Helmet } from 'react-helmet-async';
import { useTranslation } from 'react-i18next';
import { Link as RouterLink } from 'react-router-dom';

import Box from '@material-hu/mui/Box';
import Container from '@material-hu/mui/Container';
import Grid from '@material-hu/mui/Grid';
import Typography from '@material-hu/mui/Typography';

import Button from '@material-hu/components/design-system/Buttons/Button';

import useSettings from 'src/contexts/SettingsContext';
import {
  capabilityToi18nKey,
  useCustomServerTranslation,
} from 'src/hooks/useCustomServerTranslation';
import PlusIcon from 'src/icons/Plus';
import { CopyTypePath } from 'src/types/deeplinks';
import { formatTitle } from 'src/utils/helmetUtils';
import { UserPermissions } from 'src/utils/permissions';

import CopyLink, {
  copyLinkContainerStyle,
} from 'src/components/CopyLink/CopyLink';

import { newsRoutes } from '../routes';

import NewsTable from './components/NewsTable';

const List = () => {
  const { t } = useTranslation(['news']);
  const { settings } = useSettings();
  const getCustomTitle = useCustomServerTranslation();

  const title = getCustomTitle(
    capabilityToi18nKey(UserPermissions.VIEW_ARTICLES),
    'TITLE_' + UserPermissions.VIEW_ARTICLES,
  );

  return (
    <>
      <Helmet>
        <title>{formatTitle(title)}</title>
      </Helmet>
      <Box
        sx={{
          backgroundColor: 'background.default',
          minHeight: '100%',
          py: 3,
        }}
      >
        <Container maxWidth={settings.compact ? 'xl' : false}>
          <Grid
            container
            spacing={3}
          >
            <Grid
              item
              xs
              sx={copyLinkContainerStyle}
            >
              <Typography
                color="textPrimary"
                variant="h5"
                sx={{ display: 'inline' }}
              >
                {title}
              </Typography>
              <CopyLink type={CopyTypePath.NEWS} />
            </Grid>
            <Grid item>
              <Button
                component={RouterLink}
                startIcon={<PlusIcon fontSize="small" />}
                variant="contained"
                to={newsRoutes.newNews()}
              >
                {t('news:add_news')}
              </Button>
            </Grid>
          </Grid>
          <Box sx={{ mt: 3 }}>
            <NewsTable />
          </Box>
        </Container>
      </Box>
    </>
  );
};

export default List;