import React, { FC, ReactNode, RefObject } from 'react';
import classNames from 'classnames';

import css from './index.module.css';
import { getModifier } from '../../helpers/getModifier';

export interface ButtonProps {
  type?: 'button' | 'submit' | 'reset';
  tabIndex?: number;
  disabled?: boolean;
  showThrobber?: boolean;
  variant?:
    | 'primary'
    | 'secondary'
    | 'tertiary'
    | 'verified'
    | 'secondaryBlue'
    | 'navigation';
  children: ReactNode;
  buttonRef?: RefObject<HTMLButtonElement>;
  fullwidth?: boolean;
  handleClick?: (ev) => void;
  size?: 'small' | 'medium' | 'large';
}

const Button: FC<ButtonProps> = ({
  type = 'button',
  tabIndex,
  handleClick,
  children,
  disabled,
  showThrobber = false,
  variant,
  buttonRef,
  fullwidth,
  size,
}) => {
  const buttonClassNames = classNames(css.button, {
    [`${css[`button${getModifier(variant)}`]}`]: variant,
    [`${css[`button${getModifier(size)}`]}`]: size,
    [css.buttonFullWidth]: fullwidth,
  });

  return (
    <button
      disabled={disabled}
      type={type}
      onClick={handleClick}
      className={buttonClassNames}
      data-testid="Button"
      ref={buttonRef}
      tabIndex={tabIndex}
    >
      {children}

      {showThrobber && (
        <div className={css.button__circle}>
          <div
            className={classNames([css.button__circle1, css.button__child])}
          ></div>
          <div
            className={classNames([css.button__circle2, css.button__child])}
          ></div>
          <div
            className={classNames([css.button__circle3, css.button__child])}
          ></div>
          <div
            className={classNames([css.button__circle4, css.button__child])}
          ></div>
          <div
            className={classNames([css.button__circle5, css.button__child])}
          ></div>
          <div
            className={classNames([css.button__circle6, css.button__child])}
          ></div>
          <div
            className={classNames([css.button__circle7, css.button__child])}
          ></div>
          <div
            className={classNames([css.button__circle8, css.button__child])}
          ></div>
          <div
            className={classNames([css.button__circle9, css.button__child])}
          ></div>
          <div
            className={classNames([css.button__circle10, css.button__child])}
          ></div>
          <div
            className={classNames([css.button__circle11, css.button__child])}
          ></div>
          <div
            className={classNames([css.button__circle12, css.button__child])}
          ></div>
        </div>
      )}
    </button>
  );
};

export default Button;