import React from 'react';
import { bool, string, arrayOf, shape } from 'prop-types';
import styled from 'styled-components';
import {
  REM_UNIT_MD,
  REM_FONT_SIZE_NORMAL,
  FONT_BOLD,
  SUNSET_ORANGE,
  VERY_LIGHT_TANGELO,
} from '@vincent_za/styles';
import { PROP_ASYNC_STATUS, SHAPE_ASYNC_STATUS_INITIAL, determineAsyncStatus } from '@vincent_za/utils';
import { errorApiSvg } from '@vincent_za/assets';
import Svg from '../../Svg/component';

const Wrap = styled.div`
  z-index: ${props => props.isApp ? 7 : 2}; /* min 2 for bot detail */
  position: ${props => props.isApp ? 'fixed' : 'absolute'};
  display: flex;
  top: 0;
  right: 0;
  left: 0;
  padding: ${REM_UNIT_MD};
  align-items: center;
  justify-content: center;
  font-size: ${REM_FONT_SIZE_NORMAL};
  font-family: ${FONT_BOLD};
  color: rgba(255, 255, 255, 0.9);
  background-color: ${props => props.isInfoVariant ? VERY_LIGHT_TANGELO : SUNSET_ORANGE};
`;

const SvgStyled = styled(Svg)`
  display: flex;
  margin-right: ${REM_UNIT_MD};
  width: 2.4rem;
  height: 100%;
  fill: rgba(255, 255, 255, 0.9);
`;

class PageError extends React.PureComponent {
  render() {
    const {
      isApp,
      isDetermineInfoVariant,
      hasAsyncStatus,
      infoMessage,
      asyncStatus,
      asyncStatusList,
      className,
    } = this.props;
    const { isSuccessful, isError, errorMessage } = determineAsyncStatus({ asyncStatus, asyncStatusList });
    const isInfoVariant = this.props.isInfoVariant || (isDetermineInfoVariant && hasAsyncStatus && isSuccessful);

    return (
      !(isError || isInfoVariant) ? null :
      <Wrap isInfoVariant={isInfoVariant} isApp={isApp} className={className}>
        <SvgStyled svg={errorApiSvg} static />
        {errorMessage || infoMessage}
      </Wrap>
    );
  }
}

PageError.propTypes = {
  isApp: bool,
  isInfoVariant: bool,
  isDetermineInfoVariant: bool,
  hasAsyncStatus: bool,
  infoMessage: string,
  asyncStatus: shape(PROP_ASYNC_STATUS),
  asyncStatusList: arrayOf(shape(PROP_ASYNC_STATUS)),
  className: string,
};

PageError.defaultProps = {
  isApp: false,
  isInfoVariant: false,
  isDetermineInfoVariant: false,
  hasAsyncStatus: false,
  infoMessage: undefined,
  asyncStatus: SHAPE_ASYNC_STATUS_INITIAL,
  asyncStatusList: [],
  className: undefined,
};

export default PageError;
