import React from 'react';
import { string, arrayOf, shape, node } from 'prop-types';
import styled from 'styled-components';
import { REM_UNIT_XSM, REM_UNIT_SM, REM_UNIT_MD, SUNSET_ORANGE } from '@vincent_za/styles';
import { PROP_ASYNC_STATUS, SHAPE_ASYNC_STATUS_INITIAL, determineAsyncStatus } from '@vincent_za/utils';
import { infoSvg } from '@vincent_za/assets';
import TooltipWrap from '../../TooltipWrap/container';
import Svg from '../../Svg/component';

import { CN_ERROR_ICON } from '../component';

const TooltipWrapStyled = styled(TooltipWrap)`
  display: flex;
  position: relative;
  align-items: center;
  padding: ${REM_UNIT_XSM} ${REM_UNIT_SM};
  background: #fff;
  border-radius: 20px;
`;

const SvgStyled = styled(Svg)`
  display: flex;
  margin-left: ${REM_UNIT_MD} !important;
  width: 1.8rem;
  flex-shrink: 0;
  fill: ${SUNSET_ORANGE};
`;

class FloatGroup extends React.Component {
  shouldComponentUpdate(prevProps) {
    if (prevProps.asyncStatus !== this.props.asyncStatus) return true;
    if (prevProps.asyncStatusList !== this.props.asyncStatusList) return true;
    if (prevProps.children !== this.props.children) return true;
    return false;
  }

  render() {
    const { tooltipPosition, asyncStatus, asyncStatusList, className, children } = this.props;
    const { isDoneWithError, errorMessage } = determineAsyncStatus({ asyncStatus, asyncStatusList });

    return (
      isDoneWithError ?
        <TooltipWrapStyled isErrorVariant position={tooltipPosition} tooltip={errorMessage} className={className}>
          {children}
          <SvgStyled svg={infoSvg} static className={CN_ERROR_ICON} />
        </TooltipWrapStyled> : children
    );
  }
}

FloatGroup.propTypes = {
  asyncStatus: shape(PROP_ASYNC_STATUS),
  asyncStatusList: arrayOf(shape(PROP_ASYNC_STATUS)),
  tooltipPosition: string.isRequired,
  className: string,
  children: node.isRequired,
};

FloatGroup.defaultProps = {
  asyncStatus: SHAPE_ASYNC_STATUS_INITIAL,
  asyncStatusList: [],
  className: undefined,
};

export default FloatGroup;
