import React from 'react';

import {
  NormalButton,
  DisableButton,
} from './styled';

export type Props = {
  appearance?: 'default' | 'primary' | 'primary-hollow' | 'danger-hollow' | 'default-hollow' | 'dark' | 'link' | 'danger-link';
  id?: string;
  isDisabled?: boolean;
  onClick?: (e: React.MouseEvent<HTMLElement>) => void;
  onBlur?: () => void;
  onFocus?: () => void;
  shouldFitContainer?: boolean;
  align?: 'left' | 'center' | 'right';
  children: React.ReactNode;
  style?: {};
  isActive?: boolean;
  tabIndex?: number;
};

const Button: React.FC<Props> = ({
  children,
  isDisabled,
  onClick,
  ...rest
}: Props): React.ReactElement => (
  isDisabled ? (
    <DisableButton>
      {children}
    </DisableButton>
  ) : (
    <NormalButton
      {...rest}
      onMouseDown={onClick}
    >
      {children}
    </NormalButton>
  )
);

Button.defaultProps = {
  appearance: 'default',
  align: 'center',
  shouldFitContainer: false,
  isDisabled: false,
  isActive: false,
  onFocus: (): void => { console.log('focus'); },
};

export default Button;