import React from 'react';
import { bool, string, array, arrayOf, shape, func } 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 Form from './Form/component';
import List from './List/component';

class VariantSearch extends React.Component {
  shouldComponentUpdate(nextProps) {
    if (nextProps.isDisabled !== this.props.isDisabled) return true;
    if (nextProps.isInfo !== this.props.isInfo) 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.searchQuery !== this.props.searchQuery) return true;
    if (nextProps.fieldName !== this.props.fieldName) 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,
      isCloseOnSelect,
      isInWidget,
      placeholder,
      list,
      itemKey,
      activeItem,
      activeItems,
      searchQuery,
      fieldName,
      onItemClick,
      onSearch,
      onToggleDropdownCb,
      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}
        isInWidget={isInWidget}
        fieldName={fieldName}
        onItemClick={onItemClick}
        onSearch={onSearch}
        onToggleDropdownCb={onToggleDropdownCb}
        asyncStatus={asyncStatus}
        asyncStatusList={asyncStatusList}
        className={className}
        renderHeader={({ isOpen, hasActiveItem, onClick }) => (
          <Header
            isFormVariant={isFormVariant}
            isHeaderStretchWidth={isHeaderStretchWidth}
            isClick={isClick}
            isOpen={isOpen}
            isDisabled={isDisabled}
            placeholder={placeholder}
            activeItem={activeItem}
            hasActiveItem={hasActiveItem}
            onClick={onClick}
            isFloatErrorVariant={isFloatErrorVariant}
            isInfo={isInfoDetermined}
            infoMessage={infoMessage}
            tooltipPosition={tooltipPosition}
            asyncStatus={asyncStatus}
            asyncStatusList={asyncStatusList}
          />
        )}
        renderMenu={({ onClick, onSearchDebounced }) => (
          <div>
            <Form fieldName="searchQuery" onChange={onSearchDebounced} />
            <List
              list={list}
              itemKey={itemKey}
              activeItem={activeItem}
              activeItems={activeItems}
              searchQuery={searchQuery}
              onClick={onClick}
            />
          </div>
        )}
      />
    );
  }
}

VariantSearch.propTypes = {
  isFormVariant: bool,
  isClick: bool,
  isDisabled: bool,
  isHeaderStretchWidth: bool,
  isMenuHeaderWidth: bool,
  isCloseOnSelect: bool,
  isInWidget: bool,
  placeholder: string,
  list: array.isRequired,
  itemKey: string,
  activeItem: string,
  activeItems: array,
  searchQuery: string,
  fieldName: string,
  onItemClick: func.isRequired,
  onSearch: func.isRequired,
  onToggleDropdownCb: func,
  className: string,
  isFloatErrorVariant: bool,
  infoMessage: string,
  tooltipPosition: string,
  asyncStatus: shape(PROP_ASYNC_STATUS),
  asyncStatusList: arrayOf(shape(PROP_ASYNC_STATUS)),
};

VariantSearch.defaultProps = {
  isFormVariant: false,
  isClick: false,
  isDisabled: false,
  isHeaderStretchWidth: false,
  isMenuHeaderWidth: false,
  isCloseOnSelect: false,
  isInWidget: false,
  placeholder: undefined,
  itemKey: undefined,
  activeItem: undefined,
  activeItems: [],
  searchQuery: undefined,
  fieldName: undefined,
  onToggleDropdownCb() {},
  className: undefined,
  isFloatErrorVariant: false,
  infoMessage: undefined,
  tooltipPosition: undefined,
  asyncStatus: SHAPE_ASYNC_STATUS_INITIAL,
  asyncStatusList: [],
};

export default VariantSearch;
