import { Button as ButtonRAC } from 'react-aria-components'

import { variants } from './variants'

import type { ButtonProps } from './types'
import { Spinner } from '../Spinner'
import styles from './button.module.css'
import { SpinnerProps } from '../Spinner/Spinner'

export function Button({
  variant,
  color,
  size,
  wrapping,

  typography,
  className,
  children,
  ...props
}: ButtonProps) {
  const classNames = variants({
    variant,
    color,
    size,
    wrapping,
    typography,
    className,
  })

  let spinnerType: SpinnerProps['type'] = 'Dark'

  switch (color) {
    case 'Primary':
      spinnerType = 'Dark'
      break
    case 'Inverted':
      spinnerType = 'White'
      break
    default:
      spinnerType = 'Dark'
  }

  return (
    <ButtonRAC {...props} className={classNames}>
      {({ isPending }) => {
        return (
          <>
            {children}
            {isPending && (
              <div className={styles.spinnerWrapper}>
                <Spinner size={20} type={spinnerType} />
              </div>
            )}
          </>
        )
      }}
    </ButtonRAC>
  )
}