import { FC, useState } from 'react';

import Box, { BoxProps } from '@material-hu/mui/Box';
import Divider, { DividerProps } from '@material-hu/mui/Divider';
import Snackbar from '@material-hu/mui/Snackbar';
import Typography from '@material-hu/mui/Typography';

import {
  ChatMessageAdd,
  ChatMessageAddProps,
} from 'src/components/dashboard/chat/ChatThread/ChatMessageAdd';
import { useTranslation } from 'src/components/dashboard/chat/i18n';

export type ChatThreadFooterProps = BoxProps & {
  messageAddProps: ChatMessageAddProps;
  dividerProps?: DividerProps;
};

export const ChatThreadFooter: FC<ChatThreadFooterProps> = props => {
  const { dividerProps = {}, messageAddProps, ...boxProps } = props;

  const { t } = useTranslation();

  const [openLimitFeedback, setOpenLimitFeedback] = useState<boolean>(false);
  const [numberOfLargerFiles, setNumberOfLargerFiles] = useState(0);

  const uploadLargerFiles = amount => {
    setOpenLimitFeedback(true);
    setNumberOfLargerFiles(amount);
  };

  const handleOnClose = () => {
    setOpenLimitFeedback(false);
    setNumberOfLargerFiles(0);
  };

  return (
    <Box
      id="chat-footer"
      className="footer"
      {...boxProps}
    >
      <Divider {...dividerProps} />
      <ChatMessageAdd
        uploadLargerFiles={uploadLargerFiles}
        {...messageAddProps}
      />
      {openLimitFeedback && (
        <Snackbar
          open={openLimitFeedback}
          autoHideDuration={3000}
          onClose={handleOnClose}
          sx={{
            '& .MuiSnackbarContent-root': {
              backgroundColor: '#0b141ad1 !important',
              borderRadius: '4px !important',
            },
          }}
          message={
            <Typography>
              {t('FILE_LIMIT_FEEDBACK', { count: numberOfLargerFiles })}
            </Typography>
          }
        />
      )}
    </Box>
  );
};

export default ChatThreadFooter;