import React, { useEffect, useRef } from 'react';
import {  StyledBulkItem } from './BulkFilterStyle';
// import { TableData } from '../common/fakedata';
// import TableFilter from '../header/table-filter/TableFilter';
import SearchType from '../header/route-header/search/SearchType';


const BulkFilter = () => {
  // const [printToogle, setPrintToggle] = useMenuDropDown();
  const dropdownRef = useRef<HTMLDivElement>(null);

  // const showMenu = () => {
  //   setPrintToggle(prev => !prev);
  // };

  const handleClickOutside = (event: MouseEvent) => {
    if (
      dropdownRef.current &&
      !dropdownRef.current.contains(event.target as Node)
    ) {
      // setPrintToggle(false);
    }
  };

  useEffect(() => {
    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);

  return (
    // <StyledBulkFilterCover>

      <StyledBulkItem>
      <SearchType />
      </StyledBulkItem>
      /* {showTableFilter && ( 
        <StyledBulkItem>
          <TableFilter tableData={TableData[0].tableHead} />
        </StyledBulkItem>
      )} */
    // </StyledBulkFilterCover>
  );
};

export default BulkFilter;



