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

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

class VariantCustomMenu extends React.Component {
  shouldComponentUpdate(nextProps) {
    if (nextProps.isDisabled !== this.props.isDisabled) return true;
    if (nextProps.MenuTemplate !== this.props.MenuTemplate) return true;
    if (nextProps.placeholder !== this.props.placeholder) return true;
    if (nextProps.activeItem !== this.props.activeItem) 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,
      isRight,
      isHeaderStretchWidth,
      isMenuHeaderWidth,
      isMenuHeaderWidthMin,
      isInWidget,
      MenuTemplate,
      isCloseOnSelect,
      placeholder,
      labelIcon,
      activeItem,
      onToggleDropdownCb,
      onItemClick,
      asyncStatus,
      asyncStatusList,
      className,
    } = this.props;

    return (
      <Base
        isFormVariant={isFormVariant}
        isHeaderStretchWidth={isHeaderStretchWidth}
        isClick={isClick}
        isDisabled={isDisabled}
        activeItem={activeItem}
        isCloseOnSelect={isCloseOnSelect}
        isMenuHeaderWidth={isMenuHeaderWidth}
        isMenuHeaderWidthMin={isMenuHeaderWidthMin}
        isInWidget={isInWidget}
        isRight={isRight}
        onToggleDropdownCb={onToggleDropdownCb}
        onItemClick={onItemClick}
        asyncStatus={asyncStatus}
        asyncStatusList={asyncStatusList}
        className={className}
        renderHeader={({ isOpen, hasActiveItem, onClick }) => (
          <Header
            isFormVariant={isFormVariant}
            isHeaderStretchWidth={isHeaderStretchWidth}
            isClick={isClick}
            isOpen={isOpen}
            isDisabled={isDisabled}
            placeholder={placeholder}
            labelIcon={labelIcon}
            activeItem={activeItem}
            hasActiveItem={hasActiveItem}
            onClick={onClick}
            asyncStatus={asyncStatus}
            asyncStatusList={asyncStatusList}
          />
        )}
        renderMenu={() => (
          MenuTemplate
        )}
      />
    );
  }
}

VariantCustomMenu.propTypes = {
  isFormVariant: bool,
  isClick: bool,
  isDisabled: bool,
  isRight: bool,
  isHeaderStretchWidth: bool,
  isMenuHeaderWidth: bool,
  isMenuHeaderWidthMin: bool,
  isCloseOnSelect: bool,
  isInWidget: bool,
  MenuTemplate: object.isRequired,
  placeholder: string,
  labelIcon: string,
  activeItem: string,
  onToggleDropdownCb: func,
  onItemClick: func,
  asyncStatus: shape(PROP_ASYNC_STATUS),
  asyncStatusList: arrayOf(shape(PROP_ASYNC_STATUS)),
  className: string,
};

VariantCustomMenu.defaultProps = {
  isFormVariant: false,
  isClick: false,
  isDisabled: false,
  isRight: false,
  isHeaderStretchWidth: false,
  isMenuHeaderWidth: false,
  isMenuHeaderWidthMin: false,
  isCloseOnSelect: false,
  isInWidget: false,
  placeholder: undefined,
  labelIcon: undefined,
  activeItem: undefined,
  onToggleDropdownCb() {},
  onItemClick() {},
  asyncStatus: SHAPE_ASYNC_STATUS_INITIAL,
  asyncStatusList: [],
  className: undefined,
};

export default VariantCustomMenu;
