import "./index.scss";
import { formatClassName } from "../../libs/utils/common";
import { CircularProgress, IconButton } from "@mui/material";
import { CraftTableOptionsProps } from "../../types/table-options";
import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
import { settingsOptionsProps } from "../../types/table";

interface TabDataProps {
  tab_value: string | null;
  tab_value_count: string | number;
}

interface TableTabsProps {
  loading?: boolean;
  tabsData?: TabDataProps[];
  activeTab?: string;
  tableStates: CraftTableOptionsProps;
  onClick: (state: string) => void;
  columns?: any[];
  settingsOptions?: settingsOptionsProps;
}

export function TableTabs({
  loading = false,
  tabsData = [],
  activeTab = "ALL",
  onClick,
  tableStates,
  settingsOptions,
}: TableTabsProps) {
  const handleTabClick = (tab: string) => {
    onClick(tab);
    tableStates.setPagination((prev) => ({ ...prev, pageIndex: 0 }));
  };

  // Normalize tab_value to uppercase for display + logic
  const normalizedTabs = tabsData.map((tab) => ({
    ...tab,
    tab_value: tab.tab_value?.toUpperCase() ?? "UNKNOWN",
  }));

  return (
    <div className="table-tabs">
      {loading ? (
        <div className="tabs-loader">
          <CircularProgress size={24} />
        </div>
      ) : (
        <div className="tabs">
          {settingsOptions?.showIcon && (
            <IconButton
              onClick={settingsOptions?.onClick}
              style={{ zIndex: 1000 }}
            >
              <SettingsOutlinedIcon />
            </IconButton>
          )}

          <ul className="tabs">
            {normalizedTabs.map(({ tab_value, tab_value_count }) => (
              <li
                key={tab_value}
                className={formatClassName(
                  `tab ${activeTab === tab_value ? "active" : ""}`
                )}
                onClick={() => handleTabClick(tab_value)}
              >
                <span className="tab__label">{tab_value}</span>
                <span className="count">{tab_value_count}</span>
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
}