import * as React from 'react'
import classNames from 'classnames'

export enum ConfirmButtonState {
  Enabled = 'enabled',
  Loading = 'loading',
  Complete = 'complete',
  Disabled = 'disabled',
}

type Props = Readonly<{
  onClick: () => void
  buttonState?: ConfirmButtonState
  dataTestId?: string
  showActionCompleteAnimation?: boolean
  additionalButtonClasses?: string
  activeText?: string
  confirmedText?: string
}>

const ConfirmButton: React.FunctionComponent<Props> = ({
  onClick,
  dataTestId = 'confirm-btn',
  buttonState = ConfirmButtonState.Enabled,
  showActionCompleteAnimation = false,
  additionalButtonClasses,
  activeText = 'Save',
  confirmedText = 'Saved',
}) => {
  if (buttonState === ConfirmButtonState.Loading) {
    return (
      <button
        className={classNames(
          'ui-btn ui-btn-save ui-loading-cover ui-btn__primary',
          additionalButtonClasses
        )}
        data-testid={`${dataTestId}-loading`}
        disabled
      >
        <span>{activeText}</span>
      </button>
    )
  } else if (buttonState === ConfirmButtonState.Complete) {
    return (
      <button
        className={classNames('ui-btn ui-btn-save', additionalButtonClasses, {
          'ui-animate ui-animate__color-change ui-animate--delay-9':
            showActionCompleteAnimation,
          'ui-btn__inactive--light': !showActionCompleteAnimation,
        })}
        data-testid={`${dataTestId}-added`}
        disabled
      >
        <span>{confirmedText}</span>
        <span
          className={classNames('ui-icon ui-icon--checkmark ui-btn--icon', {
            'ui-animate ui-animate__spring': showActionCompleteAnimation,
          })}
        />
      </button>
    )
  } else {
    return (
      <button
        className={classNames(
          'ui-btn ui-btn-save',
          buttonState === ConfirmButtonState.Disabled
            ? 'ui-btn__inactive--light'
            : 'ui-btn__primary',
          additionalButtonClasses
        )}
        onClick={() => onClick()}
        data-testid={dataTestId}
        disabled={buttonState === ConfirmButtonState.Disabled}
      >
        <span>{activeText}</span>
      </button>
    )
  }
}

export { ConfirmButton }