false,
  searchInputAriaLabel = '',
  onFilterUpdate,
  onSearchInputChanged,
  onSearchInputClear,
  filterOption,
  id = getUniqueId('dual-list-selector-pane'),
  isDisabled = false,
  listMinHeight,
  ...props
}: DualListSelectorPaneProps) => {
  const [input, setInput] = React.useState('');
  const { isTree } = React.useContext(DualListSelectorContext);

  // only called when search input is dynamically built
  const onChange = (e: React.FormEvent<HTMLInputElement>, newValue: string) => {
    let filtered: React.ReactNode[];
    if (isTree) {
      filtered = options
        .map((opt) => Object.assign({}, opt))
        .filter((item) => filterInput(item as unknown as DualListSelectorTreeItemData, newValue));
    } else {
      filtered = options.filter((option) => {
        if (displayOption(option)) {
          return option;
        }
      });
    }
    onFilterUpdate(filtered, isChosen ? 'chosen' : 'available', newValue === '');

    if (onSearchInputChanged) {
      onSearchInputChanged(e, newValue);
    }
    setInput(newValue);
  };

  // only called when options are passed via options prop and isTree === true
  const filterInput = (item: DualListSelectorTreeItemData, input: string): boolean => {
    if (filterOption) {
      return filterOption(item as unknown as React.ReactNode, input);
    } else {
      if (item.text.toLowerCase().includes(input.toLowerCase()) || input === '') {
        return true;
      }
    }
    if (item.children) {
      return (
        (item.children = item.children
          .map((opt) => Object.assign({}, opt))
          .filter((child) => filterInput(child, input))).length > 0
      );
    }
  };

  // only called when options are passed via options prop and isTree === false
  const displayOption = (option: React.ReactNode) => {
    if (filterOption) {
      return filterOption(option, input);
    } else {
      return option.toString().toLowerCase().includes(input.toLowerCase());
    }
  };

  return (
    <div
      className={css(styles.dualListSelectorPane, isChosen ? styles.modifiers.chosen : 'pf-m-available', className)}
      {...props}
    >
      {title && (
        <div className={css(styles.dualListSelectorHeader)}>
          <div className={`${styles.dualListSelector}__title`}>
            <div className={css(styles.dualListSelectorTitleText)}>{title}</div>
          </div>
        </div>
      )}
      {(actions || searchInput || isSearchable) && (
        <div className={css(styles.dualListSelectorTools)}>
          {(isSearchable || searchInput) && (
            <div className={css(styles.dualListSelectorToolsFilter)}>
              {searchInput ? (
                searchInput
              ) : (
                <SearchInput
                  onChange={isDisabled ? undefined : onChange}
                  onClear={
                    onSearchInputClear
                      ? onSearchInputClear
                      : (e) => onChange(e as React.FormEvent<HTMLInputElement>, '')
                  }
                  isDisabled={isDisabled}
                  aria-label={searchInputAriaLabel}
                />
              )}
            </div>
          )}
          {actions && <div className={css(styles.dualListSelectorToolsActions)}>{actions}</div>}
        </div>
      )}
      {status && (
        <div className={css(styles.dualListSelectorStatus)}>
          <div className={css(styles.dualListSelectorStatusText)} id={`${id}-status`}>
            {status}
          </div>
        </div>
      )}
      <DualListSelectorPaneContext.Provider value={{ isChosen }}>
        {!isTree && (
          <DualListSelectorListWrapper
            aria-labelledby={`${id}-status`}
            options={options}
            selectedOptions={selectedOptions}
            onOptionSelect={(
              e: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,
              index: number,
              id: string
            ) => onOptionSelect(e, index, isChosen, id)}
            displayOption={displayOption}
            id={`${id}-list`}
            isDisabled={isDisabled}
            {...(listMinHeight && {
              style: { [cssMenuMinHeight.name]: listMinHeight } as React.CSSProperties
            })}
          >
            {children}
          </DualListSelectorListWrapper>
        )}
        {isTree && (
          <DualListSelectorListWrapper
            aria-labelledby={`${id}-status`}
            id={`${id}-list`}
            {...(listMinHeight && {
              style: { [cssMenuMinHeight.name]: listMinHeight } as React.CSSProperties
            })}
          >
            {options.length > 0 ? (
              <DualListSelectorList>
                <DualListSelectorTree
                  data={
                    isSearchable
                      ? (options
                          .map((opt) => Object.assign({}, opt))
                          .filter((item) =>
                            filterInput(item as unknown as DualListSelectorTreeItemData, input)
                          ) as unknown as DualListSelectorTreeItemData[])
                      : (options as unknown as DualListSelectorTreeItemData[])
                  }
                  onOptionCheck={onOptionCheck}
                  id={`${id}-tree`}
                  isDisabled={isDisabled}
                />
              </DualListSelectorList>
            ) : (
              children
            )}
          </DualListSelectorListWrapper>
        )}
      </DualListSelectorPaneContext.Provider>
    </div>
  );
};
DualListSelectorPane.displayName = 'DualListSelectorPane';