import { useEffect, useState } from "react";
import Kanban from "../kanban";
import LeadCard from "../kanban/components/LeadCard";
import {
  kanbanDropdownResults,
  useGetAttributeDropdown,
  useGetKanbanData,
} from "../kanban/hooks/hooks";
import { useCraftTable } from "../listing/libs/hooks/useCraftTable";
import {
  useEntityTableAPI,
  useGetSettingsDataAPI,
  useSaveSettingsDataAPI,
  useGetTableTabs,
} from "../listing/libs/hooks/useEntityTableAPI";
import { ENTITY_TYPE, MAPPED_ENTITY_TYPE } from "../listing/libs/utils/common";
import { useCraftTableFilterSettings } from "../listing/libs/hooks/useCraftTableFilterSettings";
import { QuickFilterSettings } from "../listing/components/table-settings";
import { KanbanSettingsDataProps } from "../listing/types/filter-settings";
import { useQueryClient } from "@tanstack/react-query";
import { useFetchData } from "../listing/libs/hooks/useEntityTableHooks";
import { LEAD_STATUS } from "../kanban/constants/kanban-constants";

const KanbanView = () => {
  const { metaData, isLoading } = useGetKanbanData("LEAD");
  const { getSettingsAPIData } = useGetSettingsDataAPI(ENTITY_TYPE, "kanban");
  const { getSettingsAPIData: listingSettingsAPIData } = useGetSettingsDataAPI(
    ENTITY_TYPE,
    "listing"
  );
  const [selectedTab, setSelectedTab] = useState({
    tab_name: "All",
    tab_value: "",
  });

  const tableStates = useCraftTable();
  const filterSettingStates = useCraftTableFilterSettings();

  const {
    setShowListViewSettings,
    kanbanSettingsData,
    settingsData,
    setKanbanSettingsData,
    setSettingsData,
  } = filterSettingStates;

  const tabsPaylod = {
    entity_type: ENTITY_TYPE,
    defaultTabsConfig: {
      attribute: "status",
    },
  };

  const { tableTabs } = useGetTableTabs(tabsPaylod);
  const tabsData = tableTabs;
  const { metaQuery } = useFetchData(ENTITY_TYPE, {
    tabs: {
      columnName:
        getSettingsAPIData?.mapped_json?.quick_tab?.attribute || "status",
      sortBy: getSettingsAPIData?.mapped_json?.quick_tab?.sorting || "ASC",
      value:
        selectedTab?.tab_name?.toLowerCase() === "all"
          ? tabsData?.find((tab: any) => tab?.tab_name?.toLowerCase() === "all")
              ?.tab_value
          : selectedTab?.tab_value,
      name: selectedTab?.tab_name,
    },
  });
  const { data: laneHideListData } = useGetAttributeDropdown(
    "LEAD",
    kanbanSettingsData?.lane?.attribute ?? ""
  );
  const { data: swimLaneHideListData } = useGetAttributeDropdown(
    "LEAD",
    kanbanSettingsData?.swim_lane?.attribute ?? ""
  );
  const queryClient = useQueryClient();

  const [selectAttributeData] = kanbanDropdownResults("ATT", 6);
  const [selectSwinLandData] = kanbanDropdownResults("SWM", 6);
  const { saveSettingsDataMutation: saveKanbanSettingsDataMutation } =
    useSaveSettingsDataAPI(ENTITY_TYPE);

  const { tableData } = useEntityTableAPI({
    page: 0,
    size: 20,
    entity_type: ENTITY_TYPE,
    tabs: {
      columnName:
        listingSettingsAPIData?.mapped_json?.quick_tab?.attribute ||
        LEAD_STATUS,
      sortBy: listingSettingsAPIData?.mapped_json?.quick_tab?.sorting || "ASC",
      value:
        selectedTab?.tab_name?.toLowerCase() === "all"
          ? tabsData?.find((tab: any) => tab?.tab_name?.toLowerCase() === "all")
              ?.tab_value
          : selectedTab?.tab_value,
      name: selectedTab?.tab_name,
    },
    quickFilter: tableStates.filters,
    sortby: [
      {
        sortColum: "name",
        sortType: "ASC",
      },
    ],
    attributeFilter: [],
    flatJson: metaQuery?.data?.is_flat_json,
    getAllAttributes: true,
  });

  const handleSaveKanbanSetSettingsData = (
    kanbanSettingsData: KanbanSettingsDataProps
  ) => {
    console.log("kanbanSettingsData", kanbanSettingsData);

    const payload = {
      entity_type: MAPPED_ENTITY_TYPE,
      mapped_entity_type: ENTITY_TYPE,
      mapped_json: kanbanSettingsData,
      type: "kanban",
    };

    saveKanbanSettingsDataMutation.mutate(
      { payload },
      {
        onSuccess: () => {
          queryClient.invalidateQueries({
            queryKey: ["GET_NAVIGATION_LAYOUT", ENTITY_TYPE, "kanban"],
          });
          queryClient.invalidateQueries({
            queryKey: ["getKanbanData", ENTITY_TYPE],
          });
          queryClient.invalidateQueries({
            queryKey: ["meta", ENTITY_TYPE],
          });
        },
      }
    );
  };
  useEffect(() => {
    setKanbanSettingsData(getSettingsAPIData?.mapped_json || {});
    setSettingsData(listingSettingsAPIData?.mapped_json || {});
  }, [getSettingsAPIData, listingSettingsAPIData]);
  console.log("metaQuery?.data?.is_flat_json", metaQuery?.data?.is_flat_json);

  return (
    <div>
      <Kanban
        metaData={metaData}
        data={tableData?.entity_list}
        entity="LEAD"
        isFlatJson={metaQuery?.data?.is_flat_json}
        kanbanSettingsData={getSettingsAPIData?.mapped_json || {}}
        isLoading={isLoading}
        KanbanCardComponent={LeadCard}
        showSettings={true}
        onOpenSettings={() => setShowListViewSettings(true)}
      />
      <QuickFilterSettings
        view="kanban"
        filterSettingStates={filterSettingStates}
        onClose={() => setShowListViewSettings(false)}
        columnsData={metaData || {}}
        columnsDataLoading={isLoading}
        selectAttributeData={selectAttributeData?.data}
        selectSwinLandData={selectSwinLandData?.data}
        laneHideListData={laneHideListData}
        swimLaneHideListData={swimLaneHideListData}
        onSaveKanbanSettingsData={handleSaveKanbanSetSettingsData}
        // tabsApiData={settingsTabDropdownData || []}
        // tabsApiDataLoading={settingsTabDropdownPending}
        // onSaveSettingsData={handleSaveSettingsData}
      />
    </div>
  );
};

export default KanbanView;