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 { SETTINGS_TABS } from "./constants";
import Loader from "../common/loader/loader";

export function QuickFilterSettings({
  show,
  filterSettingStates,
  onClose,
  columnsData,
  columnsDataLoading,
  tabsApiData,
  tabsApiDataLoading,
  onSaveSettingsData,
}: QuickFilterModalProps) {
  const [tabValue, setTabValue] = useState(0);

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

  const hasAPIData = Boolean(Object.entries(columnsData).length);

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

  const handleSaveSetSettingsData = () => {
    const copyColumnTabState = columnTabState?.isDefault
      ? {
          isDefault: true,
          show_list: columnTabState?.show_list || [],
          hide_list: columnTabState?.hide_list || [],
        }
      : {
          isDefault: false,
          tabs: columnTabState?.tabs || [],
        };

    const copySortingTabState = sortingTabState?.isDefault
      ? {
          isDefault: true,
          sortby:
            sortingTabState?.sortby?.filter((item) => item.column !== "") || [],
        }
      : null;

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

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

  return (
    <CustomDialog
      open={show || showListViewSettings}
      fullWidth
      maxWidth="lg"
      slots={{
        transition: DialogTransition,
      }}
    >
      <DialogTitle sx={dialogStyles.dialogTitle}>
        <Typography sx={{ fontSize: "1.125rem" }}>List View Setting</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={SETTINGS_TABS}
            />

            <Box sx={{ flex: "1" }}>
              <CustomTabPanel value={tabValue} index={0}>
                {tabValue === 0 && (
                  <QuickTab
                    filterSettingStates={filterSettingStates}
                    columnsData={columnsData}
                    tabsApiData={tabsApiData}
                    tabsApiDataLoading={tabsApiDataLoading}
                  />
                )}
              </CustomTabPanel>

              <CustomTabPanel value={tabValue} index={1}>
                {tabValue === 1 && (
                  <Column
                    filterSettingStates={filterSettingStates}
                    columnsData={columnsData}
                  />
                )}
              </CustomTabPanel>

              <CustomTabPanel value={tabValue} index={2}>
                {tabValue === 2 && (
                  <Sorting
                    filterSettingStates={filterSettingStates}
                    columnsData={columnsData}
                  />
                )}
              </CustomTabPanel>
            </Box>
          </>
        )}
      </DialogContent>

      {!columnsDataLoading && hasAPIData && (
        <DialogActions>
          <CustomButton
            disabled={saveButtonError?.hasError}
            onClick={handleSaveSetSettingsData}
          >
            Save Quick Filter
          </CustomButton>
        </DialogActions>
      )}
    </CustomDialog>
  );
}