import React, { useState, useCallback, useRef, useEffect } from 'react';
import Filter from './Filter';

function FilterContainer({
  id,
  useFilter,
  createCode = false,
  usedFilters,
  originData,
  zIndex = 1000,
  childrenDrawer = null,
  show,
  onClose,
}: {
  id: number;
  componentName: string;
  useFilter: boolean;
  zIndex?: number;
  usedFilters: any;
  createCode?: boolean;
  originData: any;
  children?: React.ReactNode;
  childrenDrawer?: React.ReactNode;
  show?: boolean;
  onClose?: () => void;
}) {
  const visible = !!show;
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const handleClick = (e) => {
      if (!containerRef.current?.contains(e.target)) {
        const appDOM = document.getElementById('easyv-app');
        if (appDOM && appDOM.contains(e.target) && visible) {
          onClose?.();
        }
      }
    };

    document.addEventListener('click', handleClick);
    return () => {
      document.removeEventListener('click', handleClick);
    };
  }, [visible]);
  return (
    <div ref={containerRef}>
      <Filter
        zIndex={zIndex}
        visible={visible}
        id={id}
        childrenDrawer={childrenDrawer}
        useFilter={useFilter}
        usedFilters={usedFilters}
        originData={originData}
        createCode={createCode}
        onClose={onClose}
      />
    </div>
  );
}

export default FilterContainer;
