import * as React from 'react'
import { useState, SFC } from 'react'

import { Button as BaseButton } from '../Button'

export const ButtonSwap: SFC<any> = ({
  as: Button = BaseButton,
  onClick,
  swap,
  children,
  ...props
}) => {
  const hasSwap = Boolean(swap)
  const [on, setOn] = useState(() => false)
  const toggle = () => setOn(s => !s)

  const handleClick = (ev: any) => {
    onClick && onClick(ev)
    hasSwap && toggle()
    hasSwap && setTimeout(toggle, 500)
  }

  return (
    <Button onClick={handleClick} {...props}>
      {on ? swap : children}
    </Button>
  )
}