import PropTypes from 'prop-types'
import { Flex, Alert } from 'antd'
import ExclamationOctagonIcon from '../../Icons/ExclamationOctagonIcon'
import InfoCircleIcon from '../../Icons/InfoCircleIcon'

const AlertsDisplay = ({ alerts = [] }) => {
  const getAlertType = (type, priority) => {
    if (type === 'error' || priority === '9') return 'error'
    if (type === 'warning' || priority === '8') return 'warning'
    return 'info'
  }

  const getAlertIcon = (type, priority) => {
    if (type === 'error' || priority === '9') return <ExclamationOctagonIcon />
    if (type === 'warning' || priority === '8')
      return <ExclamationOctagonIcon />
    return <InfoCircleIcon />
  }

  if (alerts.length == 0) {
    return null
  }

  return (
    <Flex gap='small'>
      {alerts.map((alert, index) => (
        <Alert
          key={`${alert.createdAt}-${index}`}
          message={alert.message}
          style={{ padding: '4px 10px 4px 8px' }}
          type={getAlertType(alert.type, alert.priority)}
          icon={getAlertIcon(alert.type, alert.priority)}
          showIcon
        />
      ))}
    </Flex>
  )
}

AlertsDisplay.propTypes = {
  alerts: PropTypes.arrayOf(
    PropTypes.shape({
      priority: PropTypes.string.isRequired,
      type: PropTypes.string.isRequired,
      createdAt: PropTypes.string.isRequired,
      updatedAt: PropTypes.string.isRequired,
      message: PropTypes.string.isRequired
    })
  ).isRequired
}

export default AlertsDisplay
