import React from 'react';
import { bool, string, arrayOf, shape } from 'prop-types';
import styled from 'styled-components';
import { VERY_LIGHT_TANGELO, 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 Svg from '../../Svg/component';
import TooltipWrap from '../../TooltipWrap/container';

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

export const CN_ERROR_FLOAT = 'error-float';

const SvgStyled = styled(Svg)`
  display: flex;
  width: 1.8rem;
  fill: ${props => props.isInfoVariant ? VERY_LIGHT_TANGELO : SUNSET_ORANGE};
`;

class FloatError extends React.PureComponent {
  render() {
    const {
      isInfoVariantMaybe,
      hasAsyncStatus,
      tooltipPosition,
      infoMessage,
      asyncStatus,
      asyncStatusList,
      className,
    } = this.props;
    const { isSuccessful, isDoneWithError, errorMessage } = determineAsyncStatus({ asyncStatus, asyncStatusList });
    const isInfoVariant = this.props.isInfoVariant || (isInfoVariantMaybe && hasAsyncStatus && isSuccessful);

    return (
      isDoneWithError || isInfoVariant ?
        <TooltipWrap
          isErrorVariant={!isInfoVariant}
          isInfoVariant={isInfoVariant}
          position={tooltipPosition}
          tooltip={errorMessage || infoMessage}
          className={`${className} ${CN_ERROR_FLOAT}`}
        >
          <SvgStyled isInfoVariant={isInfoVariant} svg={infoSvg} static className={CN_ERROR_ICON} />
        </TooltipWrap> : null
    );
  }
}

FloatError.propTypes = {
  isInfoVariant: bool,
  isInfoVariantMaybe: bool,
  hasAsyncStatus: bool,
  infoMessage: string,
  asyncStatus: shape(PROP_ASYNC_STATUS),
  asyncStatusList: arrayOf(shape(PROP_ASYNC_STATUS)),
  tooltipPosition: string,
  className: string,
};

FloatError.defaultProps = {
  isInfoVariant: false,
  isInfoVariantMaybe: false,
  hasAsyncStatus: false,
  infoMessage: undefined,
  tooltipPosition: 'right',
  asyncStatus: SHAPE_ASYNC_STATUS_INITIAL,
  asyncStatusList: [],
  className: undefined,
};

export default FloatError;
