import React from 'react';
import { node, bool, string, func, shape } from 'prop-types';
import styled from 'styled-components';
import { REM_UNIT_XSM, REM_UNIT_MD, FONT_BOLD, ARSENIC, WHITE, GRAY_X11, ONYX, EERIE_BLACK } from '@vincent_za/styles';
import { PROP_ASYNC_STATUS, SHAPE_ASYNC_STATUS_INITIAL } from '@vincent_za/utils';
import { SpinnerLoader } from '../../Loader';

const SpinnerLoaderStyled = styled(SpinnerLoader)`
  path {
    &:nth-child(1) {
      fill: ${WHITE};
    };
    &:nth-child(2) {
      fill: rgba(255, 255, 255, 0.6);
    };
  };
`;

export const Wrap = styled.button`
  position: relative;
  display: flex;
  align-items: center;
  margin-right: ${REM_UNIT_XSM};
  padding: ${REM_UNIT_MD} 2rem;
  min-width: 7.2rem;
  height: 3.6rem;
  justify-content: center;
  font-family: ${FONT_BOLD};
  text-transform: uppercase;
  color: ${GRAY_X11};
  background-color: ${ONYX};
  border-radius: 1px;
  cursor: pointer;
  box-shadow: 1px 3px 6px -3px ${EERIE_BLACK};

  ${props => props.isPrimary && `
    background-color: ${ARSENIC};
  `};

  &:hover {
    background-color: ${ARSENIC};
  };

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  };
`;

class Button extends React.PureComponent {
  render() {
    const { isPrimary, isDisabled, children, onClick, asyncStatus, className } = this.props;
    const { isBusy } = asyncStatus;

    return (
      <Wrap isPrimary={isPrimary} disabled={isDisabled} onClick={onClick} className={className}>
        <SpinnerLoaderStyled asyncStatus={asyncStatus} size={1.8} />
        {!isBusy && children}
      </Wrap>
    );
  }
}

Button.propTypes = {
  isPrimary: bool,
  isDisabled: bool,
  children: node.isRequired,
  onClick: func,
  asyncStatus: shape(PROP_ASYNC_STATUS),
  className: string,
};

Button.defaultProps = {
  isPrimary: false,
  isDisabled: false,
  onClick() {},
  asyncStatus: SHAPE_ASYNC_STATUS_INITIAL,
  className: undefined,
};

export default Button;
