import { FC } from 'react';

import { faShare, faBan, faPen } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import Box from '@material-hu/mui/Box';
import Typography from '@material-hu/mui/Typography';

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

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

const iconByStatus = {
  [MessageStatusType.FORWARDED]: props => {
    const { titleAccess } = props;
    return (
      <Box sx={{ display: 'flex' }}>
        <FontAwesomeIcon icon={faShare} />
        <Typography
          color="textSecondary"
          variant="caption"
          fontStyle="italic"
          sx={{ ml: 0.5, whiteSpace: 'nowrap' }}
        >
          {titleAccess}
        </Typography>
      </Box>
    );
  },
  [MessageStatusType.DELETED]: props => {
    const { titleAccess } = props;
    return (
      <Box
        sx={{
          display: 'flex',
          mr: '50px',
          alignItems: 'center',
        }}
      >
        <FontAwesomeIcon
          icon={faBan}
          style={{ marginRight: '4px', color: '#111b2159' }}
        />
        <Typography
          variant="caption"
          fontStyle="italic"
          sx={{
            ml: 0.5,
            whiteSpace: 'nowrap',
            color: '#8696a0',
            fontWeight: 500,
            fontSize: '14px',
          }}
        >
          {titleAccess}
        </Typography>
      </Box>
    );
  },
  [MessageStatusType.EDITED]: props => {
    const { titleAccess } = props;
    return (
      <Typography
        color="textSecondary"
        variant="caption"
        fontStyle="italic"
      >
        <Box
          sx={{ mr: 0.5 }}
          component="span"
        >
          <FontAwesomeIcon icon={faPen} />
        </Box>
        {titleAccess}
      </Typography>
    );
  },
};

type ChatDescriptionActionProps = {
  status: MessageStatusType;
};

const ChatDescriptionAction: FC<ChatDescriptionActionProps> = props => {
  const { status } = props;

  const { t } = useTranslation();
  return (
    <Box sx={{ ml: 1 }}>
      {iconByStatus[status] &&
        iconByStatus[status]({
          titleAccess: t(`MESSAGE_STATUS_${status}`),
        })}
    </Box>
  );
};

export default ChatDescriptionAction;