searchBoxUI

import React, { memo, useEffect, useContext, useRef, useState } from 'react';
import { ViewpointContext } from './index';

let searchBox = null;

/* global AV */
const SearchBoxUI = () => {
  const [searchVal, setSearchVal] = useState('');

  const { viewer, treeBackData, setTreeData } = useContext(ViewpointContext);
  const searchBoxWrapRef = useRef(null);

  if (!searchBox) {
    searchBox = new AV.UI.Searchbox('viewpointSearch-Searchbox', viewer, {
      excludeRoot: true,
      searchFunction(val) {
        setSearchVal(val);

        requestAnimationFrame(() => {
          this.searchResults.setVisible(false);
        });

        return false;
      },
    });
  }

  const searchFn = e => {
    let val = e.target.value;
    val = val && val.trim();

    if (val.length < 3) {
      setSearchVal(val);
    }
  };

  useEffect(() => {
    treeBackData.length > 0
      ? searchBox.searchbox.removeAttribute('disabled')
      : searchBox.searchbox.setAttribute('disabled', 'disabled');
  }, [treeBackData]);

  useEffect(() => {
    const searchBoxInput = searchBox?.container?.querySelector('input[type=search]');
    const searchBoxClose = searchBox?.container?.querySelector('.search-box-close');
    const handleSearchCloseClick = () => setSearchVal('');

    searchBoxInput?.addEventListener('input', searchFn, false);
    searchBoxClose?.addEventListener('click', handleSearchCloseClick, false);

    if (!searchBoxWrapRef.current?.hasChildNodes()) {
      searchBoxWrapRef.current?.appendChild(searchBox.container);
    }

    return () => {
      searchBoxInput?.removeEventListener('input', searchFn);
      searchBoxClose?.removeEventListener('click', handleSearchCloseClick);
    };
  }, []);

  useEffect(() => {
    searchVal
      ? setTreeData([...treeBackData.filter(({ nodeName }) => nodeName.indexOf(searchVal) > -1)])
      : setTreeData([...treeBackData]);
  }, [searchVal, setTreeData, treeBackData]);

  return <div className="searchBoxWrap" ref={searchBoxWrapRef} />;
};

export default memo(SearchBoxUI);