import React, { ReactNode } from 'react';
import classNames from 'classnames';
import './Button.scss';
import Icon from '../Icon';
export interface ButtonProps {
  /**
   * Variant of the button
   */
  variant: 'primary' | 'secondary' | 'danger' | 'success';
  /**
   * What background color to use
   */
  backgroundColor?: string;
  /**
   * How large should the button be?
   */
  size?: 'small' | 'medium' | 'large';
  /**
   * Button contents
   */
  label?: string;
  /**
   * Type of the button
   */

  type?: 'button' | 'submit';

  disabled?: boolean;
  /**
   * Optional click handler
   */
  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
  /**
   * Button content
   */
  children?: ReactNode;
  /**
   * Button id
   */
  id?: string;
  /**
   * onSubmit function handler
   */
  onSubmit?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
  /**
   * react ref for the button
   */
  ref?: any;
  /**
   * Classname for the button
   */
  className?: string;
  /**
   * Additional styles for the button
   */
  style?: React.CSSProperties;
  /**
   * Pass true for transparentBackground button
   */
  transparentBackground?: boolean;
  /**
   * Pass true if button should be with icon
   */
  withIcon?: boolean;
  /**
   * Give icon name availble in storybook that to be on left side of button
   */
  iconName?: string;
  /**
   * Give icon name availble in storybook that to be on left side of button
   */
  iconPosition?: 'left' | 'right';
}

/**
 * Primary UI component for user interaction
 */
const Button = ({
  variant = 'primary',
  backgroundColor,
  size = 'medium',
  onClick,
  label,
  disabled = false,
  children = null,
  type = 'button',
  className = '',
  style = {},
  transparentBackground = true,
  withIcon = false,
  iconName,
  iconPosition,
  ...props
}: ButtonProps) => {
  return withIcon ? (
    <button
      type={type}
      className={classNames(
        'storybook-button-with-icon',
        `storybook-button-with-icon--${variant}`,
        `storybook-button-with-icon--${iconPosition}`,
        `${className}`
      )}
      onClick={onClick}
      disabled={disabled}
    >
      {iconName && (
        <div className="button-icon">
          <Icon height={24} width={24} name={iconName} hoverEffect={false} />
        </div>
      )}
      <div className="icon-button-label">{label}</div>
    </button>
  ) : (
    <button
      type={type}
      className={classNames(
        'storybook-button',
        `storybook-button--${size}`,
        `storybook-button--${variant}`,
        `${className}`,
        {
          'storybook-button--transparent': transparentBackground,
        }
      )}
      style={{ backgroundColor, ...style }}
      onClick={onClick}
      disabled={disabled}
      {...props}
    >
      {children || label}
    </button>
  );
};

export default Button;