import React from 'react';
import styled from 'styled-components';
import { shape } from 'prop-types';
import { REM_UNIT_SM } from '@vincent_za/styles';
import { PROP_ASYNC_STATUS } from '@vincent_za/utils';
import { loaderSvg } from '@vincent_za/assets';
import Svg from '../../Svg/component';

const LoaderStyledButton = styled(Svg)`
  display: ${props => props.isBusy ? 'flex' : 'none'};
  margin-left: ${REM_UNIT_SM};

  svg {
    width: 2rem;
    height: 2rem;
  }

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

class ButtonLoader extends React.Component {
  shouldComponentUpdate(nextProps) {
    if (nextProps.asyncStatus !== this.props.asyncStatus) return true;
    return false;
  }

  render() {
    const { asyncStatus: { isBusy } } = this.props;

    return (
      <LoaderStyledButton isBusy={isBusy} svg={loaderSvg} />
    );
  }
}

ButtonLoader.propTypes = {
  asyncStatus: shape(PROP_ASYNC_STATUS).isRequired,
};

export default ButtonLoader;
