import { Alert } from 'antd'
import { uniq, map } from 'lodash'
import React, { useMemo } from 'react'

export interface IErrorBarProps {
  errors: any[]
}

export default function ErrorBar({ errors }: IErrorBarProps) {
  // show at most 3 kinds of errors
  const errorMsgs = useMemo(
    () =>
      uniq(map(errors, (err) => err?.message || ''))
        .filter((msg) => msg !== '')
        .slice(0, 3),
    [errors]
  )

  if (errorMsgs.length === 0) {
    return null
  } else if (errorMsgs.length === 1) {
    return <Alert message={errorMsgs[0]} showIcon type="error" />
  } else {
    return (
      <Alert
        message="Errors"
        showIcon
        type="error"
        description={
          <ul>
            {errorMsgs.map((msg, idx) => (
              <li key={idx}>{msg}</li>
            ))}
          </ul>
        }
      />
    )
  }
}