import PropTypes from 'prop-types'
import { LoadingOutlined } from '@ant-design/icons'

const SIZE_CLASS = {
  small: 'spin-sm',
  default: '',
  large: 'spin-lg'
}

const DEFAULT_INDICATOR = (
  <LoadingOutlined spin style={{ color: 'var(--color-primary)' }} />
)

const Spin = ({
  spinning = true,
  children,
  indicator = DEFAULT_INDICATOR,
  size = 'default',
  style,
  className
}) => {
  const sizeClass = SIZE_CLASS[size] ?? ''

  if (children == null) {
    if (!spinning) return null

    return (
      <div
        className={['spin', sizeClass, className].filter(Boolean).join(' ')}
        style={style}
        role='status'
        aria-live='polite'
      >
        {indicator}
      </div>
    )
  }

  return (
    <div
      className={[
        'spin-nested',
        spinning ? 'is-spinning' : null,
        sizeClass,
        className
      ]
        .filter(Boolean)
        .join(' ')}
      style={style}
    >
      {spinning && (
        <div className='spin-overlay' role='status' aria-live='polite'>
          {indicator}
        </div>
      )}
      <div
        className={['spin-content', spinning ? 'is-spinning' : null]
          .filter(Boolean)
          .join(' ')}
        aria-busy={spinning}
      >
        {children}
      </div>
    </div>
  )
}

Spin.propTypes = {
  spinning: PropTypes.bool,
  children: PropTypes.node,
  indicator: PropTypes.node,
  size: PropTypes.oneOf(['small', 'default', 'large']),
  style: PropTypes.object,
  className: PropTypes.string
}

export default Spin