import { type FC } from 'react';

import { IconArrowBackUp } from '@material-hu/icons/tabler';
import Button from '@material-hu/mui/Button';
import Stack from '@material-hu/mui/Stack';

import { type SendFilesList } from 'src/pages/dashboard/Conversations/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

import Carrousel from './Carrousel';

type FooterProps = {
  attachments: SendFilesList;
  selectedIndex: number;
  onSelectIndex: (index: number) => void;
  isSecure: boolean;
  onReply?: () => void;
};

const Footer: FC<FooterProps> = ({
  attachments,
  selectedIndex,
  onSelectIndex,
  isSecure,
  onReply,
}) => {
  const { t } = useLokaliseTranslation(['chat']);
  return (
    <Stack
      sx={{
        width: '100%',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: attachments.length > 1 ? 'space-between' : 'flex-end',
      }}
    >
      {attachments.length > 1 && (
        <Carrousel
          attachments={attachments}
          selectedIndex={selectedIndex}
          onSelectIndex={onSelectIndex}
          isSecure={isSecure}
        />
      )}
      {onReply && (
        <Button
          variant="outlined"
          size="small"
          startIcon={<IconArrowBackUp />}
          onClick={onReply}
        >
          {t('chat:messages.reply')}
        </Button>
      )}
    </Stack>
  );
};

export default Footer;