import classnames from 'classnames'
import { BasePropsType } from 'components/common/BasePropsType'
import React, { FC } from 'react'
import styled from 'styled-components'

import Loading from './Loading'
import './style/index.css'

const Content = styled.div<{ panelColor?: string }>`
  background: ${props => props.panelColor};
`

interface ActivityIndicatorProps extends BasePropsType {
  visible?: boolean
  toast?: boolean
  size?: 'large' | 'small'
  text?: string
  panelColor?: string
}

const ActivityIndicator: FC<ActivityIndicatorProps> = props => {
  const { prefixCls, className, visible, toast, size, text, panelColor } = props
  const wrapClass = classnames(prefixCls, className, {
    [`${prefixCls}-lg`]: size === 'large',
    [`${prefixCls}-sm`]: size === 'small',
    [`${prefixCls}-toast`]: !!toast,
  })
  const spinnerClass = classnames(`${prefixCls}-spinner`, {
    [`${prefixCls}-spinner-lg`]: !!toast || size === 'large',
  })

  if (visible) {
    if (toast) {
      return (
        <div className={wrapClass}>
          {text ? (
            <Content className={`${prefixCls}-content`} panelColor={panelColor}>
              <Loading className={spinnerClass} aria-hidden="true" />
              <span className={`${prefixCls}-toast-text`}>{text}</span>
            </Content>
          ) : (
            <Content className={`${prefixCls}-content`} panelColor={panelColor}>
              <Loading className={spinnerClass} aria-label="Loading" />
            </Content>
          )}
        </div>
      )
    } else {
      return text ? (
        <div className={wrapClass}>
          <Loading className={spinnerClass} aria-hidden="true" />
          <span className={`${prefixCls}-tip`}>{text}</span>
        </div>
      ) : (
        <div className={wrapClass}>
          <Loading className={spinnerClass} aria-label="Loading" />
        </div>
      )
    }
  } else {
    return null
  }
}

ActivityIndicator.defaultProps = {
  prefixCls: 'jm-activity-indicator',
  visible: true,
  size: 'small',
  panelColor: 'rgba(34,34,34,0.6)',
  toast: false,
}

export default ActivityIndicator