import React from 'react';
import styled from 'styled-components';
import { Text } from 'react-native-web';
import { bool, string, func, node, arrayOf, shape } from 'prop-types';
import {
  PX_UNIT_SM,
  PX_UNIT_MD,
  PX_UNIT_LG,
  PX_UNIT_XLG,
  FONT_BOLD,
  STYLE_P_BUTTON_BG_HOVER,
  WHITE,
  GRAY_X11,
  GAINSBORO,
  SUNSET_ORANGE,
  ISABELLINE,
} from '@vincent_za/styles';
import { PROP_ASYNC_STATUS, SHAPE_ASYNC_STATUS_INITIAL, determineAsyncStatus } from '@vincent_za/utils';

// import { SpinnerLoader } from '../Loader';
// import { ErrorFloat, CN_ERROR_ICON } from '../Error';

const Wrap = styled(Text)`
  position: relative;
  white-space: nowrap;

  ${props => (props.isFormButton && `
    display: inline-flex;
    padding: 0 ${PX_UNIT_XLG};
    align-items: center;
    height: 3.6rem;
    background: ${props.isError ? SUNSET_ORANGE : '#9BC1BC'};
    text-transform: uppercase;
    border-radius: 1.8rem;
    color: ${WHITE};
    font-family: ${FONT_BOLD};

    &:hover {
      ${!props.isError && `background: ${STYLE_P_BUTTON_BG_HOVER}`};
    };
  `)};

  ${props => (props.isLinkButton && `
    color: ${GRAY_X11};
    font-size: ${PX_UNIT_MD};
    margin-left: ${PX_UNIT_LG};
    
    &:hover {
      color: ${GAINSBORO};
    };
  `)};

  ${props => (props.isDisabled && `
    background: #636363;
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  `)};
`;

// const ErrorFloatStyled = styled(ErrorFloat)`
//   /* BUG: .${CN_ERROR_ICON} does not work for some reason */
//   .error-icon {
//     margin-left: ${PX_UNIT_SM};
//     fill: ${ISABELLINE};
//   };
// `;

// const SpinnerLoaderStyled = styled(SpinnerLoader)`
//   margin-left: ${PX_UNIT_SM};

//   path {
//     &:nth-child(1) {
//       opacity: 1;
//       fill: rgba(0, 0, 0, 0.2);
//     };
//     &:nth-child(2) {
//       fill: rgba(0, 0, 0, 0.3);
//     };
//   };
// `;

class Button extends React.PureComponent {
  render() {
    const {
      isDisabled,
      isFormButton,
      isLinkButton,
      type,
      tooltipPosition,
      hasAsyncStatus,
      asyncStatus,
      asyncStatusList,
      onClick,
      children,
      className,
    } = this.props;
    const { isError } = determineAsyncStatus({ asyncStatus, asyncStatusList });

    return (
      <Wrap
        isError={isError}
        isFormButton={isFormButton}
        isLinkButton={isLinkButton}
        isDisabled={isDisabled}
        type={type}
        onPress={onClick}
        className={className}
      >
        {children}
      </Wrap>
    );
  }
}

Button.propTypes = {
  className: string,
  children: node.isRequired,
  isFormButton: bool,
  isLinkButton: bool,
  isDisabled: bool,
  tooltipPosition: string,
  hasAsyncStatus: bool,
  asyncStatus: shape(PROP_ASYNC_STATUS),
  asyncStatusList: arrayOf(shape(PROP_ASYNC_STATUS)),
  type: string,
  onClick: func,
};

Button.defaultProps = {
  onClick() {},
  className: '',
  isFormButton: false,
  isLinkButton: false,
  isDisabled: false,
  tooltipPosition: 'right',
  hasAsyncStatus: false,
  asyncStatus: SHAPE_ASYNC_STATUS_INITIAL,
  asyncStatusList: [],
  type: 'submit',
};

export default Button;
