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

import Base from '../../Base/component';
import Header from '../../Header/component';
import List from '../../List/component';

class VariantSimple extends React.Component {
  shouldComponentUpdate(nextProps) {
    if (nextProps.isClick !== this.props.isClick) return true;
    if (nextProps.isDisabled !== this.props.isDisabled) return true;
    if (nextProps.placeholder !== this.props.placeholder) return true;
    if (nextProps.list !== this.props.list) return true;
    if (nextProps.activeItem !== this.props.activeItem) return true;
    if (nextProps.activeItems !== this.props.activeItems) return true;
    if (nextProps.activeItemRaw !== this.props.activeItemRaw) return true;
    if (nextProps.asyncStatus !== this.props.asyncStatus) return true;
    if (nextProps.asyncStatusList !== this.props.asyncStatusList) return true;
    return false;
  }

  render() {
    const {
      isFormVariant,
      isClick,
      isDisabled,
      isHeaderStretchWidth,
      isMenuHeaderWidth,
      isMenuHeaderWidthMin,
      isIcon,
      isInWidget,
      isCloseOnSelect,
      domScrollSelector,
      placeholder,
      list,
      itemKey,
      activeItem,
      activeItems,
      activeItemRaw,
      fieldName,
      onItemClick,
      className,

      isFloatErrorVariant,
      infoMessage,
      tooltipPosition,
      asyncStatus,
      asyncStatusList,
    } = this.props;

    const isInfoDetermined = (determineAsyncStatus({ asyncStatus, asyncStatusList }) || {}).isSuccessful && !list.length;
    return (
      <Base
        isFormVariant={isFormVariant}
        isHeaderStretchWidth={isHeaderStretchWidth}
        isClick={isClick}
        isDisabled={isDisabled}
        isInfo={isInfoDetermined}
        activeItem={activeItem}
        isCloseOnSelect={isCloseOnSelect}
        isMenuHeaderWidth={isMenuHeaderWidth}
        isMenuHeaderWidthMin={isMenuHeaderWidthMin}
        isInWidget={isInWidget}
        domScrollSelector={domScrollSelector}
        fieldName={fieldName}
        onItemClick={onItemClick}
        asyncStatus={asyncStatus}
        asyncStatusList={asyncStatusList}
        className={className}
        renderHeader={({ isOpen, hasActiveItem, onClick }) => (
          <Header
            isFormVariant={isFormVariant}
            isHeaderStretchWidth={isHeaderStretchWidth}
            isClick={isClick}
            isOpen={isOpen}
            activeItem={activeItem}
            hasActiveItem={hasActiveItem}
            placeholder={placeholder}
            onClick={onClick}
            isDisabled={isDisabled}
            isFloatErrorVariant={isFloatErrorVariant}
            isInfo={isInfoDetermined}
            infoMessage={infoMessage}
            tooltipPosition={tooltipPosition}
            asyncStatus={asyncStatus}
            asyncStatusList={asyncStatusList}
          />
        )}
        renderMenu={({ onClick }) => (
          <List
            isIcon={isIcon}
            list={list}
            itemKey={itemKey}
            activeItem={activeItem}
            activeItems={activeItems}
            activeItemRaw={activeItemRaw}
            onClick={onClick}
          />
        )}
      />
    );
  }
}

VariantSimple.propTypes = {
  isFormVariant: bool,
  isFloatErrorVariant: bool,
  isClick: bool,
  isDisabled: bool,
  isHeaderStretchWidth: bool,
  isMenuHeaderWidth: bool,
  isMenuHeaderWidthMin: bool,
  isIcon: bool,
  isCloseOnSelect: bool,
  isInWidget: bool,
  infoMessage: string,
  tooltipPosition: string,
  domScrollSelector: string,
  placeholder: string,
  list: array.isRequired,
  itemKey: string,
  activeItem: string,
  activeItems: array,
  activeItemRaw: oneOfType([string, number]),
  fieldName: string,
  onItemClick: func.isRequired,
  className: string,
  asyncStatus: shape(PROP_ASYNC_STATUS),
  asyncStatusList: arrayOf(shape(PROP_ASYNC_STATUS)),
};

VariantSimple.defaultProps = {
  isFormVariant: false,
  isFloatErrorVariant: false,
  isClick: false,
  isDisabled: false,
  isHeaderStretchWidth: false,
  isMenuHeaderWidth: false,
  isMenuHeaderWidthMin: false,
  isIcon: false,
  isCloseOnSelect: false,
  isInWidget: false,
  infoMessage: undefined,
  tooltipPosition: undefined,
  domScrollSelector: undefined,
  placeholder: undefined,
  itemKey: undefined,
  activeItem: undefined,
  activeItems: [],
  activeItemRaw: undefined,
  fieldName: undefined,
  className: undefined,
  asyncStatus: SHAPE_ASYNC_STATUS_INITIAL,
  asyncStatusList: [],
};

export default VariantSimple;
