import React, { MouseEvent, FocusEvent, ReactElement } from 'react';
import css from '../../utils/css';

import { StyledIconButton } from './StyledButton';
import Icon, { IconName } from '../Icon';
import { CommonProps } from '../common';

export interface IconButtonProps extends CommonProps {
  /**
   * Button's icon name.
   */
  icon: IconName;
  /**
   * Visual intent color to apply to icon button.
   */
  intent?:
    | 'inherit'
    | 'primary'
    | 'danger'
    | 'success'
    | 'warning'
    | 'error'
    | 'text'
    | 'subdued-text'
    | 'disabled-text';
  /**
   * `blur` event handler.
   */
  onBlur?: (e: FocusEvent) => void;
  /**
   * `click` event handler.
   */
  onClick?: (e: MouseEvent) => void;
  /**
   * Size of button.
   */
  size?: 'small' | 'medium' | 'large';
  /**
   * Specifies the HTML attribute type of button.
   */
  type?: 'submit' | 'reset' | 'button';
}

const IconButton = ({
  icon,
  onClick,
  onBlur,
  intent = 'inherit',
  size = 'medium',
  type = 'button',
  id,
  className,
  style,
  sx = {},
  'data-test-id': dataTestId,
}: IconButtonProps): ReactElement => (
  <StyledIconButton
    type={type}
    onClick={onClick}
    onBlur={onBlur}
    themeSize={size}
    id={id}
    className={className}
    style={{ ...style, ...css(sx) }}
    data-test-id={dataTestId}
  >
    <Icon icon={icon} intent={intent} />
  </StyledIconButton>
);

export default IconButton;