import React from 'react';
import Chip from '@mui/material/Chip';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';

import theme from '../../../config/theme';
import { HermesNotification, OnNotificationClick } from './types';
import { notificationStates } from './defaultStates';

interface NotificationBoxProps {
  notification: HermesNotification;
  onNotificationClick?: OnNotificationClick;
}
const NotificationBox = (props: NotificationBoxProps) => {
  const { notification, onNotificationClick } = props;
  const onClickAction = (url: string) => {
    onNotificationClick && onNotificationClick(notification);
    if (url.length > 0) {
      window.location.href = url;
    }
  };

  const notificationError = notificationStates[notification.id] ?? undefined;

  return (
    <Box sx={{ px: 2, py: 1, backgroundColor: '#F1EFEF' }}>
      <Chip
        size="small"
        sx={{
          backgroundColor: notificationError
            ? notificationError.styles.bgColor
            : '#E8D2AE',
          color: notificationError
            ? notificationError.styles.textColor
            : theme.palette.primary.main,
        }}
        label={notification.sender.id}
      />
      <Typography sx={{ mt: 1, color: '#000' }} variant="h6">
        {notification.payload.title}
      </Typography>
      <Typography sx={{ mt: 0.2, color: '#000' }} variant="body2">
        {notification.payload.body}
      </Typography>
      {!!notification.action && (
        <Typography
          onClick={() => onClickAction(notification.action?.redirectUrl ?? '')}
          sx={{
            textTransform: 'uppercase',
            color: theme.palette.primary.light,
            mt: 2,
            cursor: 'pointer',
          }}
        >
          {notification.action.name}
        </Typography>
      )}
    </Box>
  );
};

NotificationBox.defaultProps = {
  isError: false,
};

export default NotificationBox;