import React from 'react';
import { bool, string, number, array, func, oneOfType } from 'prop-types';

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

class VariantCustomItem extends React.Component {
  shouldComponentUpdate(nextProps) {
    if (nextProps.isDisabled !== this.props.isDisabled) return true;
    if (nextProps.ItemTemplate !== this.props.ItemTemplate) 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.fieldName !== this.props.fieldName) return true;
    return false;
  }

  render() {
    const {
      isFormVariant,
      isClick,
      isDisabled,
      isHeaderStretchWidth,
      isMenuHeaderWidth,
      isMenuHeaderWidthMin,
      isCloseOnSelect,
      isInWidget,
      ItemTemplate,
      placeholder,
      list,
      itemKey,
      activeItem,
      activeItems,
      fieldName,
      onItemClick,
      className,
    } = this.props;

    return (
      <Base
        isFormVariant={isFormVariant}
        isHeaderStretchWidth={isHeaderStretchWidth}
        isClick={isClick}
        isDisabled={isDisabled}
        activeItem={activeItem}
        isCloseOnSelect={isCloseOnSelect}
        isMenuHeaderWidth={isMenuHeaderWidth}
        isMenuHeaderWidthMin={isMenuHeaderWidthMin}
        isInWidget={isInWidget}
        fieldName={fieldName}
        onItemClick={onItemClick}
        className={className}
        renderHeader={({ isOpen, asyncStatus, hasActiveItem, onClick }) => (
          <Header
            isFormVariant={isFormVariant}
            isHeaderStretchWidth={isHeaderStretchWidth}
            isClick={isClick}
            isOpen={isOpen}
            isDisabled={isDisabled}
            placeholder={placeholder}
            asyncStatus={asyncStatus}
            activeItem={activeItem}
            hasActiveItem={hasActiveItem}
            onClick={onClick}
          />
        )}
        renderMenu={({ onClick }) => (
          <List
            ItemTemplate={ItemTemplate}
            list={list}
            itemKey={itemKey}
            activeItem={activeItem}
            activeItems={activeItems}
            onClick={onClick}
          />
        )}
      />
    );
  }
}

VariantCustomItem.propTypes = {
  isFormVariant: bool,
  isClick: bool,
  isDisabled: bool,
  isHeaderStretchWidth: bool,
  isMenuHeaderWidth: bool,
  isMenuHeaderWidthMin: bool,
  isCloseOnSelect: bool,
  isInWidget: bool,
  ItemTemplate: func.isRequired,
  placeholder: string,
  list: array.isRequired,
  itemKey: string,
  activeItem: oneOfType([string, number]),
  activeItems: array,
  fieldName: string,
  onItemClick: func.isRequired,
  className: string,
};

VariantCustomItem.defaultProps = {
  isFormVariant: false,
  isClick: false,
  isDisabled: false,
  isHeaderStretchWidth: false,
  isMenuHeaderWidth: false,
  isMenuHeaderWidthMin: false,
  isCloseOnSelect: false,
  isInWidget: false,
  placeholder: undefined,
  itemKey: undefined,
  activeItem: undefined,
  activeItems: [],
  fieldName: undefined,
  className: undefined,
};

export default VariantCustomItem;
