import React from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import roundedButton from 'Components/utils/styles/roundedButton';
import {
  primaryColor,
  secondaryColor,
  whiteColor,
  grayColor,
} from 'Themes/utils/colorPickers';

const tertiaryColor = css`
  background-color: ${whiteColor};
  border: 1px solid ${grayColor};
  color: ${grayColor};

  &:hover {
    background-color: ${grayColor[0.6]};
  }
`;

const colors = props => {
  const { outline, primary, secondary } = props;

  if (!primary && !secondary) {
    return tertiaryColor;
  }

  const brandColor = primary ? primaryColor : secondaryColor;

  const bgColor = outline ? whiteColor : brandColor;

  return css`
    background-color: ${bgColor};
    border: ${outline ? `1px solid ${brandColor(props)}` : 'none'};
    color: ${outline ? brandColor : whiteColor};

    &:hover {
      background-color: ${brandColor[0.6]};
    }
  `;
};

const StyledButton = styled.button`
  ${roundedButton}
  ${colors}

  &:disabled {
    background-color: #d2d2d2;
    color: #8a8a8a;
  }
`;

const Button = ({ children, ...props }) => {
  return <StyledButton {...props}>{children}</StyledButton>;
};

Button.propTypes = {
  small: PropTypes.bool,
  outline: PropTypes.bool,
  primary: PropTypes.bool,
  secondary: PropTypes.bool,
  disabled: PropTypes.bool,
  onClick: PropTypes.func.isRequired,
};

Button.defaultProps = {
  small: false,
  outline: false,
  primary: false,
  secondary: false,
  disabled: false,
};

Button.displayName = 'Button';

export default Button;
