import { Dialog } from "@mui/material";
import { TableFilter } from "../../listing/components/filter";
import { useCraftTable } from "../../listing/libs/hooks/useCraftTable";
import { Dispatch, useEffect } from "react";
import {
  useDetailsQueryAPI,
  useFetchData,
} from "../../listing/libs/hooks/useEntityTableHooks";
import {
  ENTITY_TYPE,
  MAPPED_ENTITY_TYPE,
} from "../../listing/libs/utils/common";
import {
  useCommonFilterDropdownAPI,
  useDeleteFilterAPI,
  useGetFilterEntityListAndCriteria,
  useUpdateFilterAPI,
} from "../../listing/libs/hooks/useEntityTableAPI";
import { saveLayoutAPI } from "../../listing/libs/services/saveLayoutAPI";

const SavedFilterModal = ({
  open,
  setOpen,
}: {
  open: boolean;
  setOpen: Dispatch<React.SetStateAction<boolean>>;
}) => {
  const tableStates = useCraftTable();
  const {
    filters,
    setFilters,
    filterMaster,
    filterToDelete,
    selectedFilterEntity,
    setFilterData,
  } = tableStates;

  const { metaQuery } = useFetchData(ENTITY_TYPE);
  const { detailsQuery } = useDetailsQueryAPI(
    filterMaster?.saved_filters?.selectedId
  );
  const { dropdownFilterData } = useCommonFilterDropdownAPI(filters);
  const { updateMutation } = useUpdateFilterAPI(); //API FOR UPDATE FILTER
  const { deleteMutation } = useDeleteFilterAPI(tableStates);

  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]);

  useEffect(() => {
    setFilters(detailsQuery.data ?? []);
  }, [detailsQuery.data]);

  const handleClose = () => setOpen(false);

  const handleChangeFunction = async (data: any) => {
    const payload = {
      entity_type: MAPPED_ENTITY_TYPE,
      mapped_entity_type: ENTITY_TYPE,
      mapped_json: data,
      type: "filter",
    };

    await saveLayoutAPI(payload);
  };

  const handleUpdateFilter = () => {
    const quickFilter = filters.map((f) => ({ ...f }));

    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",
      entity_type: "SFM",
      filterDetails: quickFilter,
    };
    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 });
  };

  return (
    <Dialog
      open={open}
      onClose={handleClose}
      PaperProps={{
        sx: {
          height: "100%",
          minWidth: { xs: "400px", md: "500px" }, // 100% on mobile, 500px on desktop
          minHeight: { md: "80vh" }, // full height on mobile, 80% of viewport on desktop
          "& .MuiInputAdornment-positionStart": {
            pl: 1,
          },

          "&& .css-ediul2": {
            maxHeight: "calc(100vh - 340px)",
          },

          "&& .main-filter-component-wrapper": {
            height: "100%",
          },
        },
      }}
    >
      <TableFilter
        tableStates={tableStates}
        columnsData={metaQuery?.data || {}}
        dropdownData={dropdownFilterData || {}}
        onClose={handleClose}
        onUpdateFilter={handleUpdateFilter}
        onDeleteFilter={handleRemoveFilter}
        onChangeFunction={handleChangeFunction}
        filterComponentOptions={{
          showMainHeader: true,
          mainHeaderTitle: "Add New Filter",
          showTabs: false,
          isRuleEngine: true,
          tabOptions: {
            showFilter: "saved",
            savedFilter: {
              // showBackButton: false,
              editMode: true,
            },
            // mainFilter: {
            //   showSaveButton: true,
            //   showClearAllButton: true,
            // },
          },
        }}
      />
    </Dialog>
  );
};

export default SavedFilterModal;