import { FC } from 'react';

import SuccessIcon from '@material-hu/icons/material/DoneAll';
import ErrorIcon from '@material-hu/icons/material/PriorityHigh';
import PendingIcon from '@material-hu/icons/material/Schedule';
import { SvgIconProps } from '@material-hu/mui/SvgIcon';

import { MessageStatus as MessageStatusType } from 'src/types/chats';

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

const iconByStatus = {
  [MessageStatusType.ERROR]: (props: SvgIconProps) => <ErrorIcon {...props} />,
  [MessageStatusType.PENDING]: (props: SvgIconProps) => (
    <PendingIcon {...props} />
  ),
};

export type MessageStatusProps = SvgIconProps & {
  status: MessageStatusType;
  senderIsUser: boolean;
};

export const MessageStatus: FC<MessageStatusProps> = props => {
  const { status, senderIsUser, ...iconProps } = props;

  const { t } = useTranslation();

  return (
    <>
      {iconByStatus[status]
        ? iconByStatus[status]({
            titleAccess: t(`MESSAGE_STATUS_${status}`),
            ...iconProps,
          })
        : senderIsUser && <SuccessIcon {...iconProps} />}
    </>
  );
};

export default MessageStatus;