import { useEffect } from "react";
import { CraftTableFilter, CraftTableOptionsProps } from "..";
import { useGetNavigationLayoutAPI } from "../listing/libs/hooks/useGetNavigationLayoutAPI";
import { ENTITY_TYPE } from "../listing/libs/utils/common";
import {
  useDeleteFilterAPI,
  useGetAttributes,
  useGetFilterEntityListAndCriteria,
  useSavedFilterAPI,
  useUpdateFilterAPI,
} from "../listing/libs/hooks/useEntityTableAPI";
import {
  FilterColumnsDataProps,
  FilterComponentOptions,
  FilterDropdownDataProps,
  FilterMasterStateProps,
} from "../listing/types/filter";
import { onFilterChangeFunctionProps } from "../listing/types/common";

const CraftTableFilterWrapper = ({
  onClose,
  tableStates,
  dropdownData,
  onChangeFunction,
  columnsData,
  filterComponentOptions,
  isFlatJson,
}: {
  onClose?: () => void;
  tableStates: CraftTableOptionsProps;
  columnsData: FilterColumnsDataProps;
  dropdownData: FilterDropdownDataProps;
  onChangeFunction: ({
    updatedFilters,
    filterMaster,
  }: onFilterChangeFunctionProps) => void;
  filterComponentOptions?: FilterComponentOptions;
  isFlatJson: boolean;
}) => {
  const getNavigationLayoutQuery = useGetNavigationLayoutAPI(
    ENTITY_TYPE,
    "layout"
  );

  const {
    filters,
    filterMaster,
    setFilterMaster,
    filterToDelete,
    setFilterData,
    selectedFilterEntity,
  } = tableStates;

  const { savedMutation } = useSavedFilterAPI(); //API CALL FOR SAVED FILTER
  const { updateMutation } = useUpdateFilterAPI(); //API FOR UPDATE FILTER
  const { deleteMutation } = useDeleteFilterAPI(tableStates); //API FOR DELETING FILTER
  const { filterEntityList, filterEntityWiseCriteria } =
    useGetFilterEntityListAndCriteria({
      entity_type: ENTITY_TYPE,
      selectedFilterEntity,
    });

  useEffect(() => {
    const data: any = filterEntityList?.data;

    setFilterData((prev: any) => ({
      ...prev,
      mainFilter: {
        ...prev?.mainFilter,
        entityList: {
          data: data ?? [],
          isPending: filterEntityList?.isPending ?? false,
        },
      },
    }));
  }, [filterEntityList?.data, filterEntityList?.isPending]);

  useEffect(() => {
    const data = filterEntityWiseCriteria?.data;

    setFilterData((prev: any) => ({
      ...prev,
      mainFilter: {
        ...prev?.mainFilter,
        entityWiseCriteria: {
          data: data ?? [],
          isPending: filterEntityWiseCriteria?.isPending ?? false,
        },
      },
    }));
  }, [filterEntityWiseCriteria?.data, filterEntityWiseCriteria?.isPending]);

  // API to handle saving a filter
  const handleSaveFilter = (name: string) => {
    const quickFilter = filters.map((f: any) => ({ ...f }));
    const shareWithTeam = filterMaster?.saved_filters?.is_shared ?? false;
    const allowTeamEdit = filterMaster?.saved_filters?.is_editable ?? false;
    const description = filterMaster?.saved_filters?.description ?? "";

    const payload = {
      name,
      is_default: false,
      mapped_entity_type: ENTITY_TYPE, // For that entity type
      status: "ACTIVE",
      entity_type: "SFM", // FIXED entity type
      description: description,
      filterDetails: quickFilter,
      is_shared: shareWithTeam,
      is_editable: allowTeamEdit,
    };
    const entity_type = "SFM";
    savedMutation.mutate(
      { entity_type, payload },
      {
        onSuccess: (response) => {
          const newFilterId = response?.id;
          if (newFilterId) {
            setFilterMaster(
              (prev: FilterMasterStateProps | null) =>
                ({
                  ...prev,
                  saved_filters: {
                    ...prev?.saved_filters,
                    selectedId: newFilterId.toString(),
                    selectedName: name,
                    description: description,
                    is_shared: shareWithTeam,
                    is_editable: allowTeamEdit,
                  },
                  activeFilterTabIndex: 1,
                } as FilterMasterStateProps)
            );
          }
        },
      }
    );
  };

  const handleUpdateFilter = () => {
    const quickFilter = filters.map((f: any) => ({
      filter_attribute: f.filter_attribute,
      filter_operator: f.filter_operator,
      filter_value: f.filter_value,
    }));
    const shareWithTeam = filterMaster?.saved_filters?.is_shared ?? false;
    const allowTeamEdit = filterMaster?.saved_filters?.is_editable ?? false;
    const description = filterMaster?.saved_filters?.description ?? "";

    const payload = {
      name: filterMaster?.saved_filters?.selectedName, // Name of the filter
      is_default: false,
      id: filterMaster?.saved_filters?.selectedId,
      mapped_entity_type: ENTITY_TYPE,
      status: "ACTIVE",
      description: description,
      entity_type: "SFM",
      filterDetails: quickFilter,
      is_shared: shareWithTeam, // Now true/false from state
      is_editable: allowTeamEdit,
    };
    const entity_type = "SFM";
    updateMutation.mutate({ entity_type, payload });
  };

  const handleRemoveFilter = () => {
    const payload = {
      name: filterToDelete?.label,
      id: filterToDelete?.value,
      is_default: false,
      mapped_entity_type: ENTITY_TYPE,
      status: "INACTIVE",
      entity_type: "SFM",
    };
    const entity_type = "SFM";
    deleteMutation.mutate({ entity_type, payload });
  };

  useEffect(() => {
    if (getNavigationLayoutQuery.isSuccess) {
      const { setFilters, setFilterMaster } = tableStates;
      const filters = getNavigationLayoutQuery?.data?.filters || [];
      const filterMaster = getNavigationLayoutQuery?.data?.filterMaster || {};

      if (filters.length > 0) {
        tableStates.setShowTableFilter(true);
      }

      setFilters(filters);
      setFilterMaster(filterMaster);
    }
  }, [getNavigationLayoutQuery.isSuccess, getNavigationLayoutQuery.data]);

  return (
    <CraftTableFilter
      tableStates={tableStates}
      onClose={() => {
        tableStates.setShowTableFilter(false);
        onClose && onClose();
      }}
      columnsData={columnsData}
      dropdownData={dropdownData || []}
      onUpdateFilter={handleUpdateFilter}
      onDeleteFilter={handleRemoveFilter}
      onSaveFilter={handleSaveFilter}
      onChangeFunction={onChangeFunction}
      filterComponentOptions={filterComponentOptions}
      isFlatJson={isFlatJson}
    />
  );
};

export default CraftTableFilterWrapper;
