/* eslint-disable @typescript-eslint/no-explicit-any */
import { useState, useRef } from "react";
import AdvancedSearchView from "./AdvancedSearchView";
import FilterPopup from "./FilterPopup";
import { FilterTarget } from "../../data/advancedSearch";
import { useFilterData } from "./helper/useFilterData";
import { useClickOutside } from "../../../../utils/useClickOutside";

type AdvancedSearchProps = {
  visible: boolean;
  disabled: boolean;
  enableCustomView?: boolean;
  filterableFields: FilterTarget[];
  uiElementGroupData: Record<string, any>;
  config: { uiElementGroupId: string };
  onModelUpdate: (
    callBack: ((args: any) => void) | null,
    fieldName: string,
    value: any,
  ) => void;
  loadTemplateSupportiveData?: (
    callBack: (args: any) => void,
    supportiveKeys: any,
  ) => Promise<any>;
};

const AdvancedSearch: React.FC<AdvancedSearchProps> = (props) => {
  const { loadSupportiveData, cache } = useFilterData({
    loadTemplateSupportiveData: props.loadTemplateSupportiveData,
  });
  const [togglePopup, setTogglePopup] = useState(false);
  const popupRef = useRef<HTMLDivElement>(null);

  const handlePopupShow = () => {
    setTogglePopup(!togglePopup);
  };

  useClickOutside(
    popupRef,
    togglePopup,
    () => setTogglePopup(false),
    (target) => Boolean(target.closest(`.tmpl-prvent-outside-click-close`)),
  );

  return props.visible ? (
    <div className="tmpl-advanced-search-container" ref={popupRef}>
      <AdvancedSearchView
        handlePopupShow={handlePopupShow}
        disabled={props.disabled}
        hasAppliedFilter={
          props.enableCustomView &&
          (props.uiElementGroupData?.advancedSearch?.appliedQuery?.filters?.length > 0)
        }
      />
      {togglePopup && !props.disabled && (
        <div
          className="tmpl-advanced-popup"
          onClick={(e) => e.stopPropagation()}
        >
          <FilterPopup
            uiElementGroupData={props.uiElementGroupData}
            filterableFields={props.filterableFields}
            config={props.config}
            onModelUpdate={props.onModelUpdate}
            handlePopupShow={handlePopupShow}
            loadSupportiveData={loadSupportiveData}
            cache={cache}
          />
        </div>
      )}
    </div>
  ) : (
    <></>
  );
};

export default AdvancedSearch;