/* eslint-disable react/button-has-type */
/* eslint-disable import/prefer-default-export */
// eslint-disable-next-line no-use-before-define
import * as React from 'react'
import classNames from 'classnames'
import { BtnType, Size } from '../types/BtnType'
import { getSize, getVariantClass } from '../utils/getVariantClass'

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  dataTestId?: string
  label?: string
  variant?: BtnType
  fullWidth?: boolean
  outline?: boolean
  leftIcon?: React.ReactElement
  rightIcon?: React.ReactElement
  className?: string
  isDisabled?: boolean
  isLoading?: boolean
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void

  size?: Size
}

const loadingCss = 'cursor-wait disabled loading'
const disabledCss = 'disabled cursor-not-allowed'

export const Button = (props: ButtonProps) => {
  const {
    dataTestId,
    label,
    variant = 'primary',
    type = 'button',
    size = 'sm',
    fullWidth,
    leftIcon,
    rightIcon,
    className,
    isLoading,
    isDisabled,
    outline,
    onClick,
  } = props
  return (
    <button
      data-testid={dataTestId || `${label}-button`}
      className={classNames(
        'btn flex text-xs tracking-wider flex-nowrap whitespace-nowrap',
        fullWidth ? 'w-full' : 'w-fit',
        size && getSize(size),
        variant && getVariantClass(variant),
        isLoading && loadingCss,
        isDisabled && disabledCss,
        outline && 'btn-outline',
        className,
      )}
      disabled={isDisabled || isLoading}
      type={type || 'button'}
      onClick={onClick && onClick}
    >
      {leftIcon && leftIcon}
      {label && label}
      {rightIcon && rightIcon}
    </button>
  )
}