import React from 'react';
import { bool, string, number, func, arrayOf, shape, oneOfType } from 'prop-types';
import { PROP_ASYNC_STATUS, SHAPE_ASYNC_STATUS_INITIAL, determineAsyncStatus } from '@vincent_za/utils';
import { chevronDownSvg } from '@vincent_za/assets';

import { Placeholder } from '../../form';
import { ErrorField } from '../../Error';

import { CL_DROPDOWN_HEADER, CL_DROPDOWN_LABEL, CL_DROPDOWN_CHEVRON } from '../constants';
import {
  HeaderWrap,
  HeaderInnerWrap,
  Label,
  LabelSvg,
  ChevronDownSvg,
  LoaderStyled,
  ErrorFloatStyled,
} from '../shared';

class Header extends React.Component {
  shouldComponentUpdate(nextProps) {
    if (nextProps.isOpen !== this.props.isOpen) return true;
    if (nextProps.isDisabled !== this.props.isDisabled) return true;
    if (nextProps.isInfo !== this.props.isInfo) return true;
    if (nextProps.hasActiveItem !== this.props.hasActiveItem) return true;
    if (nextProps.activeItem !== this.props.activeItem) return true;
    if (nextProps.placeholder !== this.props.placeholder) return true;
    if (nextProps.asyncStatus !== this.props.asyncStatus) return true;
    if (nextProps.asyncStatusList !== this.props.asyncStatusList) return true;
    return false;
  }

  render() {
    const {
      isFormVariant,
      isFloatErrorVariant,
      isClick,
      isOpen,
      isDisabled,
      isInfo,
      isHeaderStretchWidth,
      hasActiveItem,
      infoMessage,
      tooltipPosition,
      activeItem,
      placeholder,
      labelIcon,
      asyncStatus,
      asyncStatusList,
      onClick,
    } = this.props;
    const { isInitial, isBusy, isError } = determineAsyncStatus({ asyncStatus, asyncStatusList });

    return (
      <HeaderWrap
        isBusy={isBusy}
        isFormVariant={isFormVariant}
        isHeaderStretchWidth={isHeaderStretchWidth}
        isDisabled={isDisabled}
        isInfo={isInfo}
        isError={isError}
        onClick={onClick}
        className={CL_DROPDOWN_HEADER}
      >
        <HeaderInnerWrap
          isOpen={isOpen}
          isFormVariant={isFormVariant}
          isError={isError}
          isInfo={isInfo}
          hasActiveItem={hasActiveItem}
        >
          {
            placeholder &&
            <Placeholder hasValue={hasActiveItem} isError={isError} isInfo={isInfo}>
              {placeholder}
            </Placeholder>
          }
          <Label
            isClick={isClick}
            isOpen={isOpen}
            isDisabled={isDisabled}
            isInfo={isInfo}
            isError={isError}
            className={CL_DROPDOWN_LABEL}
          >
            {!labelIcon ? activeItem : <LabelSvg isOpen={isOpen} svg={labelIcon} isStatic size={1.4} />}
          </Label>
          <ChevronDownSvg
            isHidden={(isBusy && isInitial) || isError || isInfo}
            isClick={isClick}
            isOpen={isOpen}
            svg={chevronDownSvg}
            className={CL_DROPDOWN_CHEVRON}
          />
          <LoaderStyled asyncStatus={asyncStatus} asyncStatusList={asyncStatusList} size={1.6} isStatic />
          {
            !isFloatErrorVariant &&
            <ErrorField
              isInfoVariant={isInfo}
              infoMessage={infoMessage}
              asyncStatus={asyncStatus}
              asyncStatusList={asyncStatusList}
            />
          }
          {
            isFloatErrorVariant &&
            <ErrorFloatStyled
              isInfoVariant={isInfo}
              infoMessage={infoMessage}
              asyncStatus={asyncStatus}
              asyncStatusList={asyncStatusList}
              tooltipPosition={tooltipPosition}
            />
          }
        </HeaderInnerWrap>
      </HeaderWrap>
    );
  }
}

Header.propTypes = {
  isFormVariant: bool,
  isClick: bool,
  isOpen: bool,
  isDisabled: bool,
  isInfo: bool,
  isHeaderStretchWidth: bool,
  hasActiveItem: bool,
  isFloatErrorVariant: bool,
  infoMessage: string,
  tooltipPosition: string,
  placeholder: string,
  labelIcon: string,
  activeItem: oneOfType([string, number]),
  onClick: func.isRequired,
  asyncStatus: shape(PROP_ASYNC_STATUS),
  asyncStatusList: arrayOf(shape(PROP_ASYNC_STATUS)),
};

Header.defaultProps = {
  isFormVariant: false,
  isClick: false,
  isOpen: false,
  isDisabled: false,
  isInfo: false,
  isHeaderStretchWidth: false,
  hasActiveItem: false,
  isFloatErrorVariant: false,
  infoMessage: undefined,
  tooltipPosition: undefined,
  placeholder: undefined,
  labelIcon: undefined,
  activeItem: undefined,
  asyncStatus: SHAPE_ASYNC_STATUS_INITIAL,
  asyncStatusList: [],
};

export default Header;
