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

import Box from '@material-hu/mui/Box';
import { useTheme } from '@material-hu/mui/styles';
import useMediaQuery from '@material-hu/mui/useMediaQuery';

import ChatEmpty from 'src/pages/dashboard/chats/ChatEmpty';
import { TicketSearch } from 'src/pages/dashboard/tickets/components';
import { formatTitle } from 'src/utils/helmetUtils';

import ChatsSidebar from 'src/components/dashboard/chat/ChatsSidebar';
import { useTranslation } from 'src/components/dashboard/chat/i18n';
import { chatRoutes } from 'src/components/dashboard/chat/routes';

const ChatNewTicket: FC = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();

  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

  const handleCancel = () => navigate(chatRoutes.chats());

  return (
    <>
      <Helmet>
        <title>{formatTitle(t('NEW_TICKET'))}</title>
      </Helmet>
      <Box
        sx={{
          backgroundColor: 'background.default',
          height: '100%',
          display: 'flex',
        }}
      >
        <Box
          sx={{
            display: 'flex',
            flex: 1,
            width: '100%',
            overflow: isMobile ? 'hidden' : 'auto',
          }}
        >
          <ChatsSidebar
            title={t('NEW_TICKET')}
            onlyTitle
            onBackClick={handleCancel}
          >
            <TicketSearch />
          </ChatsSidebar>
          {!isMobile && <ChatEmpty />}
        </Box>
      </Box>
    </>
  );
};

export default ChatNewTicket;