import React, { useRef, useEffect, memo } from 'react'
import classNames from 'classnames'
import { Product } from '@dollarshaveclub/types'

type Props = Readonly<{
  product: Product
  onClickAdd: (product: Product) => void
  price: string
  dataTestId?: string
  isLoading?: boolean
  isAdded?: boolean
  isSoldOut?: boolean
  showAddAnimation?: boolean
  onClickRemove?: (sku: string) => void
  additionalButtonClasses?: string
  shouldRefocusButton?: boolean
  disabled?: boolean
}>

const PriceAddButtonBase: React.FunctionComponent<Props> = ({
  disabled = false,
  product,
  onClickAdd,
  price,
  dataTestId = 'price-add-btn',
  isLoading = false,
  isAdded = false,
  isSoldOut = false,
  showAddAnimation = false,
  onClickRemove,
  additionalButtonClasses,
  shouldRefocusButton,
}) => {
  const addedButtonRef = useRef<HTMLButtonElement>(null)

  useEffect(() => {
    if (shouldRefocusButton && addedButtonRef.current) {
      addedButtonRef.current.focus()
    }
  }, [shouldRefocusButton])

  if (isSoldOut) {
    return (
      <button
        aria-disabled
        className={classNames(
          'ui-btn ui-btn__inactive--light ui-btn--md ui-pl--3 ui-pr--3',
          additionalButtonClasses
        )}
        data-testid="sold-out-btn"
        tabIndex={-1}
      >
        OUT
      </button>
    )
  } else if (isLoading) {
    return (
      <button
        aria-disabled
        className={classNames(
          'ui-btn ui-loading-cover ui-btn-price ui-btn__primary',
          additionalButtonClasses
        )}
        data-testid="loading-btn"
        tabIndex={-1}
      >
        <span className="ui-btn-price__label">Add</span>
        <span className="ui-btn-price__value">{price}</span>
      </button>
    )
  } else if (isAdded) {
    if (onClickRemove) {
      return (
        <button
          className={classNames(
            'ui-btn ui-btn__secondary--light ui-pl--2 ui-pr--2',
            additionalButtonClasses
          )}
          onClick={() => onClickRemove(product.sku)}
          ref={addedButtonRef}
          data-testid="added-btn"
        >
          Remove
        </button>
      )
    } else {
      return (
        <button
          aria-disabled
          className={classNames(
            'ui-btn ui-btn__primary ui-btn--no-hover ui-btn-price__added-container',
            additionalButtonClasses,
            {
              'ui-animate ui-animate__color-change ui-animate--delay-9':
                showAddAnimation,
              'ui-btn__inactive--no-hover': !showAddAnimation,
            }
          )}
          data-testid="added-btn"
          ref={addedButtonRef}
          tabIndex={-1}
        >
          <span className="ui-btn-price__added-label">Added</span>
          <span
            className={classNames(
              'ui-icon ui-icon--checkmark ui-btn-price__added-icon',
              {
                'ui-animate ui-animate__spring': showAddAnimation,
              }
            )}
          />
        </button>
      )
    }
  } else {
    return (
      <button
        disabled={disabled}
        className={classNames(
          'ui-btn ui-btn__primary ui-btn-price',
          additionalButtonClasses
        )}
        onClick={() => onClickAdd(product)}
        data-testid={dataTestId}
      >
        <span className="ui-btn-price__label">Add</span>
        <span className="ui-btn-price__value">{price}</span>
      </button>
    )
  }
}

export const PriceAddButton = memo(PriceAddButtonBase)