|| value.toString()
    );

    const onViewMoreClick = (event: any) => {
      // Set the index for the next item to focus after view more clicked, then call view more callback
      setViewMoreNextIndex();
      onClick(event);
    };

    const renderOption = (
      onSelect: (
        event: React.MouseEvent<any, MouseEvent> | React.ChangeEvent<HTMLInputElement>,
        value: string | SelectOptionObject,
        isPlaceholder?: boolean
      ) => void,
      onClose: () => void,
      variant: string,
      inputIdPrefix: string,
      onFavorite: (itemId: string, isFavorite: boolean) => void,
      shouldResetOnSelect: boolean
    ) => {
      if (variant !== SelectVariant.checkbox && isLoading && isGrouped) {
        return (
          <div
            role="presentation"
            className={css(styles.selectListItem, isLoading && styles.modifiers.loading, className)}
          >
            {children}
          </div>
        );
      } else if (variant !== SelectVariant.checkbox && isLoad && isGrouped) {
        return (
          <div>
            <button
              {...props}
              role="presentation"
              className={css(styles.selectMenuItem, styles.modifiers.load, className)}
              onClick={(event: any) => {
                onViewMoreClick(event);
                event.stopPropagation();
              }}
              ref={this.ref}
              type="button"
            >
              {children || value.toString()}
            </button>
          </div>
        );
      } else if (variant !== SelectVariant.checkbox) {
        return (
          <li
            id={generatedId}
            role="presentation"
            className={css(
              isLoading && styles.selectListItem,
              !isLoading && styles.selectMenuWrapper,
              isFavorite && styles.modifiers.favorite,
              isFocused && styles.modifiers.focus,
              isLoading && styles.modifiers.loading
            )}
            ref={this.liRef}
          >
            {isLoading && children}
            {isLoad && !isGrouped && (
              <button
                {...props}
                className={css(styles.selectMenuItem, styles.modifiers.load, className)}
                onClick={(event: any) => {
                  onViewMoreClick(event);
                  event.stopPropagation();
                }}
                ref={this.ref}
                onKeyDown={(event: React.KeyboardEvent) => {
                  this.onKeyDown(event, 0);
                }}
                type="button"
              >
                {itemDisplay}
              </button>
            )}
            {!isLoading && !isLoad && (
              <>
                <Component
                  {...props}
                  className={css(
                    styles.selectMenuItem,
                    isLoad && styles.modifiers.load,
                    isSelected && styles.modifiers.selected,
                    isDisabled && styles.modifiers.disabled,
                    description && styles.modifiers.description,
                    isFavorite !== null && styles.modifiers.link,
                    className
                  )}
                  onClick={(event: any) => {
                    if (!isDisabled) {
                      onClick(event);
                      onSelect(event, value, isPlaceholder);
                      shouldResetOnSelect && onClose();
                    }
                  }}
                  role="option"
                  aria-selected={isSelected || null}
                  ref={this.ref}
                  onKeyDown={(event: React.KeyboardEvent) => {
                    this.onKeyDown(event, 0);
                  }}
                  type="button"
                >
                  {description && (
                    <React.Fragment>
                      <span className={css(styles.selectMenuItemMain)}>
                        {itemDisplay}
                        {isSelected && (
                          <span className={css(styles.selectMenuItemIcon)}>
                            <CheckIcon aria-hidden />
                          </span>
                        )}
                      </span>
                      <span className={css(styles.selectMenuItemDescription)}>{description}</span>
                    </React.Fragment>
                  )}
                  {!description && (
                    <React.Fragment>
                      {itemDisplay}
                      {isSelected && (
                        <span className={css(styles.selectMenuItemIcon)}>
                          <CheckIcon aria-hidden />
                        </span>
                      )}
                    </React.Fragment>
                  )}
                </Component>
                {isFavorite !== null && id && favoriteButton(onFavorite)}
              </>
            )}
          </li>
        );
      } else if (variant === SelectVariant.checkbox && isLoad) {
        return (
          <button
            className={css(
              styles.selectMenuItem,
              styles.modifiers.load,
              isFocused && styles.modifiers.focus,
              className
            )}
            onKeyDown={(event: React.KeyboardEvent) => {
              this.onKeyDown(event, 0, undefined, true);
            }}
            onClick={(event: any) => {
              onViewMoreClick(event);
              event.stopPropagation();
            }}
            ref={this.ref}
          >
            {children || (value && value.toString && value.toString())}
          </button>
        );
      } else if (variant === SelectVariant.checkbox && isLoading) {
        return (
          <div className={css(styles.selectListItem, isLoading && styles.modifiers.loading, className)}>{children}</div>
        );
      } else if (variant === SelectVariant.checkbox && !isNoResultsOption && !isLoading && !isLoad) {
        return (
          <label
            {...props}
            className={css(
              checkStyles.check,
              styles.selectMenuItem,
              isDisabled && styles.modifiers.disabled,
              description && styles.modifiers.description,
              className
            )}
            onKeyDown={(event: React.KeyboardEvent) => {
              this.onKeyDown(event, 0, undefined, true);
            }}
          >
            <input
              id={inputId || `${inputIdPrefix}-${value.toString()}`}
              className={css(checkStyles.checkInput)}
              type="checkbox"
              onChange={(event) => {
                if (!isDisabled) {
                  onClick(event);
                  onSelect(event, value);
                }
              }}
              ref={this.ref}
              checked={isChecked || false}
              disabled={isDisabled}
            />
            <span className={css(checkStyles.checkLabel, isDisabled && styles.modifiers.disabled)}>{itemDisplay}</span>
            {description && <div className={css(checkStyles.checkDescription)}>{description}</div>}
          </label>
        );
      } else if (variant === SelectVariant.checkbox && isNoResultsOption && !isLoading && !isLoad) {
        return (
          <div>
            <Component
              {...props}
              className={css(
                styles.selectMenuItem,
                isSelected && styles.modifiers.selected,
                isDisabled && styles.modifiers.disabled,
                className
              )}
              role="option"
              aria-selected={isSelected || null}
              ref={this.ref}
              onKeyDown={(event: React.KeyboardEvent) => {
                this.onKeyDown(event, 0, undefined, true);
              }}
              type="button"
            >
              {itemDisplay}
            </Component>
          </div>
        );
      }
    };

    return (
      <SelectConsumer>
        {({ onSelect, onClose, variant, inputIdPrefix, onFavorite, shouldResetOnSelect }) => (
          <React.Fragment>
            {renderOption(onSelect, onClose, variant, inputIdPrefix, onFavorite, shouldResetOnSelect)}
          </React.Fragment>
        )}
      </SelectConsumer>
    );
  }
}

export { SelectOption };