import React, { useState } from "react";
import {
  DialogTitle,
  IconButton,
  Box,
  Typography,
  DialogContent,
  DialogActions,
} from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import CustomVerticalTabs from "./tabs/vertical";
import CustomTabPanel from "./tabs/vertical/custom-tab-panel";
import QuickTab from "./components/quick-tab";
import Column from "./components/column";
import Sorting from "./components/sorting";
import { QuickFilterModalProps } from "../../types/filter-settings";
import { CustomDialog, DialogTransition } from "./components/custom-dialog";
import { dialogStyles } from "./style";
import CustomButton from "./components/custom-button";
import { KANBAN_SETTINGS_TABS, SETTINGS_TABS } from "./constants";
import Loader from "../common/loader/loader";
import Lane from "./components/lane";
import GroupBy from "./components/swim-lane";
import { useFullscreenPopoverContainer } from "../../libs/hooks/useFullScreen";
import { STAGE_GROUP } from "../../../kanban/constants/kanban-constants";

export function QuickFilterSettings({
  view = "listing",
  isFlatJson,
  show,
  filterSettingStates,
  onClose,
  columnsData,
  columnsDataLoading,
  quickTabAttributes,
  quickTabAttributesLoading,
  columnTabAttributes,
  columnTabAttributesLoading,
  sortingTabAttributes,
  sortingTabAttributesLoading,
  tabsApiData,
  tabsApiDataLoading,
  onSaveSettingsData,
  activeTab,
  selectAttributeData,
  selectSwinLandData,
  laneHideListData,
  swimLaneHideListData,
  onSaveKanbanSettingsData,
}: QuickFilterModalProps) {
  const [tabValue, setTabValue] = useState(0);
  const { container: fullscreenContainer } = useFullscreenPopoverContainer();

  const {
    showListViewSettings,
    quickTabStates,
    columnTabState,
    sortingTabState,
    saveButtonError,
    kanbanSettingsData,
  } = filterSettingStates;

  const hasAPIData = Boolean(Object.entries(columnsData).length);
  let disbaledCondition =
    // quickTabStates?.show_list?.length === 0 ||      --> commented as per the requirement
    columnTabState?.isDefault
      ? columnTabState?.show_list?.length === 0
      : columnTabState?.tabs?.find((tab) => tab?.show_list?.length === 0)
          ?.show_list?.length === 0;

  const handleTabChange = (_: React.SyntheticEvent, newValue: number) => {
    setTabValue(newValue);
  };

  const handleSaveSetSettingsData = () => {
    const copyColumnTabState = {
      isDefault: columnTabState?.isDefault,
      show_list: columnTabState?.show_list || [],
      hide_list: columnTabState?.hide_list || [],
      tabs: columnTabState?.tabs || [],
    };
    // : {
    //     isDefault: false,
    //     tabs: columnTabState?.tabs || [],
    //   };
    // commented as per the requirement
    const copySortingTabState = {
      isDefault: sortingTabState?.isDefault,
      sortby:
        sortingTabState?.sortby?.filter((item) => item.column !== "") || [],
      tabs: sortingTabState?.tabs || [],
    };
    // : {
    //     isDefault: false,
    //     tabs: sortingTabState?.tabs || [],
    //   };

    const copyQuickTabStates = {
      ...quickTabStates,
      isAllSelected: quickTabStates?.isAllSelected ?? false,
    };

    const modifiedSettingsData = {
      quick_tab: copyQuickTabStates,
      column: copyColumnTabState,
      sorting: copySortingTabState,
    };

    onSaveSettingsData && onSaveSettingsData(modifiedSettingsData);
    onClose && onClose();
  };

  const handleSaveKanbanSetSettingsData = () => {
    const updatedLane = {
      ...kanbanSettingsData?.lane,
      isSubLane:
        kanbanSettingsData?.lane?.attribute === STAGE_GROUP
          ? kanbanSettingsData?.lane?.isSubLane ?? false
          : false,
    };
    const modifiedKanbanSettingsData = {
      lane: updatedLane,
      swim_lane: kanbanSettingsData?.swim_lane,
    };
    onSaveKanbanSettingsData &&
      onSaveKanbanSettingsData(modifiedKanbanSettingsData);
    onClose && onClose();
  };

  return (
    <CustomDialog
      open={show || showListViewSettings}
      fullWidth
      maxWidth="lg"
      slots={{
        transition: DialogTransition,
      }}
      container={fullscreenContainer}
    >
      <DialogTitle sx={dialogStyles.dialogTitle}>
        <Typography sx={{ fontSize: "1.125rem" }}>
          {view === "listing"
            ? "Quick Filter Settings"
            : "Kanban View Settings"}
        </Typography>

        <IconButton
          size="small"
          color="inherit"
          onClick={() => {
            onClose && onClose();
          }}
        >
          <CloseIcon />
        </IconButton>
      </DialogTitle>

      <DialogContent>
        {columnsDataLoading ? (
          <Loader loaderText="Loading settings..." />
        ) : !hasAPIData ? ( // check if columns data is available
          <Typography>Please pass meta data in component</Typography>
        ) : (
          <>
            <CustomVerticalTabs
              value={tabValue}
              onChange={handleTabChange}
              tabItems={
                view === "listing" ? SETTINGS_TABS : KANBAN_SETTINGS_TABS
              }
            />

            <Box sx={{ flex: "1" }}>
              {view.toLowerCase() === "listing" && (
                <CustomTabPanel value={tabValue} index={0}>
                  {tabValue === 0 && (
                    <QuickTab
                      filterSettingStates={filterSettingStates}
                      columnsData={quickTabAttributes}
                      tabsApiData={tabsApiData}
                      tabsApiDataLoading={tabsApiDataLoading}
                      activeTab={activeTab}
                      columnTabAttributes={columnTabAttributes}
                      isFlatJson={isFlatJson}
                    />
                  )}
                </CustomTabPanel>
              )}

              {view.toLowerCase() === "listing" && (
                <CustomTabPanel value={tabValue} index={1}>
                  {tabValue === 1 && (
                    <Column
                      filterSettingStates={filterSettingStates}
                      columnsData={columnsData}
                      columnTabAttributes={columnTabAttributes}
                      columnTabAttributesLoading={columnTabAttributesLoading}
                    />
                  )}
                </CustomTabPanel>
              )}

              {view.toLowerCase() === "listing" && (
                <CustomTabPanel value={tabValue} index={2}>
                  {tabValue === 2 && (
                    <Sorting
                      filterSettingStates={filterSettingStates}
                      columnsData={sortingTabAttributes}
                    />
                  )}
                </CustomTabPanel>
              )}
              {view.toLowerCase() === "kanban" && (
                <CustomTabPanel value={tabValue} index={0}>
                  {tabValue === 0 && (
                    <Lane
                      filterSettingStates={filterSettingStates}
                      columnsData={columnsData}
                      selectAttributeData={selectAttributeData}
                      laneHideListData={laneHideListData}
                    />
                  )}
                </CustomTabPanel>
              )}

              {view.toLowerCase() === "kanban" && (
                <CustomTabPanel value={tabValue} index={1}>
                  {tabValue === 1 && (
                    <GroupBy
                      filterSettingStates={filterSettingStates}
                      columnsData={columnsData}
                      selectSwinLandData={selectSwinLandData}
                      swimLaneHideListData={swimLaneHideListData}
                    />
                  )}
                </CustomTabPanel>
              )}
            </Box>
          </>
        )}
      </DialogContent>

      {!columnsDataLoading && hasAPIData && (
        // <DialogActions>
        //   <CustomButton
        //     // disabled={saveButtonError?.hasError}
        //     // disabled={saveButtonError?.hasError}
        //     disabled={disbaledCondition}
        //     onClick={handleSaveSetSettingsData}
        //   >
        //     {view === "listing" ? "Save Quick Filter" : "Save Kanban Layout"}
        //   </CustomButton>
        // </DialogActions>
        <DialogActions>
          {view === "kanban" && tabValue === 0 && (
            <>
              <CustomButton onClick={handleSaveKanbanSetSettingsData}>
                Save & Close
              </CustomButton>
              <CustomButton onClick={() => setTabValue(1)} variant="contained">
                Next
              </CustomButton>
            </>
          )}

          {view === "kanban" && tabValue === 1 && (
            <CustomButton onClick={handleSaveKanbanSetSettingsData}>
              Save
            </CustomButton>
          )}

          {view === "listing" && (
            <CustomButton
              disabled={disbaledCondition}
              onClick={handleSaveSetSettingsData}
            >
              Save
            </CustomButton>
          )}
        </DialogActions>
      )}
    </CustomDialog>
  );
}