import React, { FC } from 'react';
import styled, { DefaultTheme } from 'styled-components';
import { get } from 'lodash';
import { Box } from '../Box';
import { buttonReset, getHoverColor } from '../../styles/utils';
import { getVariant } from './styles';
import { Icon } from '../Icon';
import { IconButtonProps, IconButtonDefaultProps } from './definitions';

const Button = styled(Box)<IconButtonProps>(buttonReset, getVariant);

const StyledIcon = styled(Icon)(
  ({ theme, color }: { theme: DefaultTheme; color: any }) => ({
    cursor: 'pointer',

    '&:hover': {
      color: color && getHoverColor(get(theme, `colors.${color}`)),
    },
  })
);

export const IconButton: FC<IconButtonProps> = ({
  children,
  className,
  style,
  onClick,
  buttonProps,
  IconComponent,
  variant,
  ...iconProps
}: IconButtonProps) => {
  return (
    <Button
      as="button"
      type="button"
      className={className}
      style={style}
      onClick={onClick}
      variant={variant}
      {...buttonProps}
    >
      <StyledIcon as={IconComponent as any} {...iconProps} />
      {children}
    </Button>
  );
};

IconButton.defaultProps = IconButtonDefaultProps;
