// This file is part of Coog. The COPYRIGHT file at the top level of
// this repository contains the full copyright notices and license terms.

import React, { MouseEvent } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSpinner } from '@fortawesome/free-solid-svg-icons';

import cn from 'classnames';

import { ButtonProps } from './Button.types';

import './Button.scss';

/**
 * @class
 * Button Component
 * @param {number} id
 * @param {string} theme enum: /src/utils/types.utils.ts
 * @param {string} label
 * @param {string} type enum: "warning" | "error" | "primary" | "secondary" | "default" | "disabled"
 * @param {string} buttonType enum: 'button' | 'submit'
 * @param {boolean} disabled
 * @param {string} width
 * @param {string} icon
 * @param {string} className
 * @param {boolean} loading
 * @param {string} loadingIcon
 * @callback eventEmitter
 */
const Button = ({
  id,
  theme,
  label,
  type = 'default',
  buttonType = 'button',
  eventEmitter,
  disabled = false,
  width,
  icon,
  className,
  loading = false,
  loadingIcon = faSpinner,
}: ButtonProps): JSX.Element => {
  /**
   * handle click event
   * @param {number} id
   */
  const handleClick = (id: number) => (e: MouseEvent) => {
    e.stopPropagation();
    eventEmitter?.(id);
  };
  return (
    <div
      data-testid="Button"
      className={cn('button-99889523-548b-411b-9a64-35296c3da632 grid-item right', theme, className, {
        disabled: disabled,
      })}
      key={`btn-${type}`}
    >
      <button
        className={cn(`button-${type}`, { 'button-disabled': disabled })}
        type={buttonType}
        disabled={disabled}
        onClick={handleClick(id)}
        style={{ width }}
      >
        {loading ? (
          <div className="icon">
            <FontAwesomeIcon icon={loadingIcon} spin />
          </div>
        ) : (
          <>
            {icon ? (
              <div className="icon">
                <FontAwesomeIcon icon={icon} />
              </div>
            ) : (
              <></>
            )}
            {label}
          </>
        )}
      </button>
    </div>
  );
};

export default Button;

export { ButtonProps };