import { FC } from 'react';
import { useTranslation } from 'react-i18next';

import 'src/components/dashboard/chat/i18n';
import 'src/pages/dashboard/tickets/i18n';

import Chip from '@material-hu/mui/Chip';

import { ChatThreadContainer } from 'src/components/dashboard/chat/ChatThread';

const stringByType = {
  chats: 'CHAT:SELECT_CHAT',
  tickets: 'TICKETS:SELECT_TICKET',
  forms: 'TICKETS:SELECT_TICKET',
};

export type ChatEmptyProps = {
  type?: 'chats' | 'tickets' | 'forms';
};

const ChatEmpty: FC<ChatEmptyProps> = props => {
  const { type = 'chats' } = props;

  const { t } = useTranslation(['CHAT', 'TICKETS']);

  return (
    <ChatThreadContainer
      sx={{
        display: 'flex',
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <Chip label={t(stringByType[type])} />
    </ChatThreadContainer>
  );
};

export default ChatEmpty;