UI Components and Layout

/**
 * Side bar configuration for tool panel management
 */
interface SideBarDef {
  /** Array of tool panels to display */
  toolPanels?: (ToolPanelDef | string)[];
  /** Default tool panel to show */
  defaultToolPanel?: string;
  /** Whether side bar is hidden by default */
  hiddenByDefault?: boolean;
  /** Position of the side bar */
  position?: "left" | "right";
  /** Width of the side bar */
  width?: number;
}

/**
 * Tool panel definition
 */
interface ToolPanelDef {
  /** Unique tool panel ID */
  id: string;
  /** Default label text */
  labelDefault: string;
  /** Translation key for label */
  labelKey?: string;
  /** Icon key or HTML */
  iconKey: string;
  /** Tool panel component name */
  toolPanel?: string;
  /** Parameters for tool panel */
  toolPanelParams?: any;
  /** Min width for tool panel */
  minWidth?: number;
  /** Max width for tool panel */
  maxWidth?: number;
  /** Width for tool panel */
  width?: number;
}

/**
 * Side bar API for programmatic control
 */
interface ISideBar {
  /** Open a specific tool panel */
  openToolPanel(key: string): void;
  /** Close the current tool panel */
  close(): void;
  /** Check if side bar is visible */
  isToolPanelShowing(): boolean;
  /** Get currently open tool panel */
  getOpenedToolPanel(): string | null;
  /** Set side bar visibility */
  setSideBarVisible(visible: boolean): void;
  /** Check if side bar is visible */
  isSideBarVisible(): boolean;
}

import { SideBarModule } from "ag-grid-enterprise";

const gridOptions: GridOptions = {
  modules: [SideBarModule],
  
  sideBar: {
    toolPanels: [
      {
        id: "columns",
        labelDefault: "Columns",
        labelKey: "columns",
        iconKey: "columns",
        toolPanel: "agColumnsToolPanel",
        toolPanelParams: {
          suppressRowGroups: false,
          suppressValues: false,
          suppressPivots: false,
          suppressPivotMode: false,
          suppressSideButtons: false,
          suppressColumnFilter: false,
          suppressColumnSelectAll: false,
          suppressColumnExpandAll: false
        }
      },
      {
        id: "filters",
        labelDefault: "Filters",
        labelKey: "filters", 
        iconKey: "filter",
        toolPanel: "agFiltersToolPanel",
        toolPanelParams: {
          suppressExpandAll: false,
          suppressFilterSearch: false
        }
      }
    ],
    defaultToolPanel: "columns",
    hiddenByDefault: false,
    position: "right"
  }
};

// Programmatic side bar control
const sideBar = gridApi.getSideBar();

// Open specific tool panel
sideBar.openToolPanel("filters");

// Close side bar
sideBar.close();

// Toggle visibility
sideBar.setSideBarVisible(!sideBar.isSideBarVisible());

// Check current state
console.log("Current panel:", sideBar.getOpenedToolPanel());
console.log("Is visible:", sideBar.isSideBarVisible());

/**
 * Columns tool panel for column management
 */
interface IColumnsToolPanel {
  /** Expand all column groups */
  expandColumnGroups(groupIds?: string[]): void;
  /** Collapse all column groups */
  collapseColumnGroups(groupIds?: string[]): void;
  /** Set column group expanded state */
  setColumnGroupOpened(groupId: string, opened: boolean): void;
  /** Get expanded column groups */
  getExpandedColumnGroups(): string[];
}

/**
 * Columns tool panel parameters
 */
interface IColumnsToolPanelParams {
  /** Suppress row groups section */
  suppressRowGroups?: boolean;
  /** Suppress values section */
  suppressValues?: boolean;
  /** Suppress pivots section */
  suppressPivots?: boolean;
  /** Suppress pivot mode toggle */
  suppressPivotMode?: boolean;
  /** Suppress side buttons */
  suppressSideButtons?: boolean;
  /** Suppress column filter */
  suppressColumnFilter?: boolean;
  /** Suppress select all checkbox */
  suppressColumnSelectAll?: boolean;
  /** Suppress expand all button */
  suppressColumnExpandAll?: boolean;
  /** Contract column groups by default */
  contractColumnSelection?: boolean;
}

import { ColumnsToolPanelModule } from "ag-grid-enterprise";

const gridOptions: GridOptions = {
  modules: [ColumnsToolPanelModule],
  
  sideBar: {
    toolPanels: [
      {
        id: "columns",
        labelDefault: "Columns",
        iconKey: "columns",
        toolPanel: "agColumnsToolPanel",
        toolPanelParams: {
          suppressRowGroups: false,
          suppressValues: false,
          suppressPivots: false,
          suppressPivotMode: false,
          suppressSideButtons: false,
          suppressColumnFilter: false,
          suppressColumnSelectAll: false,
          suppressColumnExpandAll: false,
          contractColumnSelection: false
        }
      }
    ]
  }
};

// Access columns tool panel
const columnsToolPanel = gridApi.getToolPanelInstance("columns") as IColumnsToolPanel;

// Expand all column groups
columnsToolPanel.expandColumnGroups();

// Collapse specific groups
columnsToolPanel.collapseColumnGroups(["athleteDetails", "results"]);

// Toggle specific group
columnsToolPanel.setColumnGroupOpened("medals", true);

/**
 * Status bar configuration
 */
interface StatusBarDef {
  /** Array of status panels */
  statusPanels: StatusPanelDef[];
}

/**
 * Status panel definition
 */
interface StatusPanelDef {
  /** Status panel component name */
  statusPanel: string;
  /** Alignment in status bar */
  align?: "left" | "center" | "right";
  /** Panel parameters */
  statusPanelParams?: any;
  /** Panel key for identification */
  key?: string;
}

/**
 * Built-in status panel components
 */
interface StatusBarComponents {
  /** Total row count component */
  agTotalRowCountComponent: "agTotalRowCountComponent";
  /** Filtered row count component */
  agFilteredRowCountComponent: "agFilteredRowCountComponent";
  /** Selected row count component */
  agSelectedRowCountComponent: "agSelectedRowCountComponent";
  /** Aggregation component */
  agAggregationComponent: "agAggregationComponent";
}

import { StatusBarModule } from "ag-grid-enterprise";

const gridOptions: GridOptions = {
  modules: [StatusBarModule],
  
  statusBar: {
    statusPanels: [
      {
        statusPanel: "agTotalRowCountComponent",
        align: "left"
      },
      {
        statusPanel: "agFilteredRowCountComponent", 
        align: "left"
      },
      {
        statusPanel: "agSelectedRowCountComponent",
        align: "center"
      },
      {
        statusPanel: "agAggregationComponent",
        align: "right",
        statusPanelParams: {
          // Show sum, average, min, max for selected range
          aggFuncs: ["sum", "avg", "min", "max", "count"]
        }
      }
    ]
  },
  
  // Enable range selection for aggregation
  enableRangeSelection: true
};

// Custom status panel component
const customStatusPanel = {
  init(params) {
    this.eGui = document.createElement("div");
    this.eGui.innerHTML = `
      <span class="ag-status-name-value">
        Custom: <span class="ag-status-name-value-value">0</span>
      </span>
    `;
    
    // Update based on grid events
    params.api.addEventListener("modelUpdated", () => {
      const count = params.api.getDisplayedRowCount();
      this.eGui.querySelector(".ag-status-name-value-value").textContent = count;
    });
  },
  
  getGui() {
    return this.eGui;
  }
};

// Register custom status panel
gridOptions.components = {
  customStatusPanel: customStatusPanel
};

/**
 * Column menu configuration
 */
interface GetColumnMenuItemsParams {
  /** Default menu items */
  defaultItems: string[];
  /** Current column */
  column: Column;
  /** Grid API */
  api: GridApi;
  /** Column API */
  columnApi: ColumnApi;
  /** Grid context */
  context?: any;
}

/**
 * Main menu configuration
 */
interface GetMainMenuItemsParams {
  /** Default menu items */
  defaultItems: string[];
  /** Grid API */
  api: GridApi;
  /** Column API */
  columnApi: ColumnApi;
  /** Grid context */
  context?: any;
}

/**
 * Menu item definition with enterprise features
 */
interface MenuItemDef {
  /** Menu item name */
  name: string;
  /** Display name */
  displayName?: string;
  /** Icon or icon function */
  icon?: string | (() => string);
  /** Action callback */
  action?: (params?: any) => void;
  /** Whether item is checked */
  checked?: boolean;
  /** Whether item is disabled */  
  disabled?: boolean | (() => boolean);
  /** CSS classes */
  cssClasses?: string[];
  /** Tooltip text */
  tooltip?: string;
  /** Submenu items */
  subMenu?: (string | MenuItemDef)[];
}

import { MenuModule, ColumnMenuModule, ContextMenuModule } from "ag-grid-enterprise";

const gridOptions: GridOptions = {
  modules: [MenuModule, ColumnMenuModule, ContextMenuModule],
  
  // Enhanced column menu
  getColumnMenuItems: (params) => {
    const result = [
      // Default items
      "pinSubMenu",
      "valueAggSubMenu", 
      "autoSizeThis",
      "autoSizeAll",
      "rowGroup",
      "rowUnGroup",
      "pivot",
      "resetColumns",
      "separator",
      
      // Custom items
      {
        name: "customAction",
        displayName: "Custom Action",
        icon: '<i class="fa fa-cog"/>',
        action: () => {
          console.log(`Custom action for column: ${params.column.getColId()}`);
        }
      },
      {
        name: "columnInfo",
        displayName: "Column Info",
        subMenu: [
          {
            name: "showType",
            displayName: "Show Type",
            action: () => {
              const colDef = params.column.getColDef();
              alert(`Column type: ${colDef.type || "default"}`);
            }
          },
          {
            name: "showWidth", 
            displayName: "Show Width",
            action: () => {
              const width = params.column.getActualWidth();
              alert(`Column width: ${width}px`);
            }
          }
        ]
      }
    ];
    
    return result;
  },
  
  // Enhanced context menu
  getContextMenuItems: (params) => {
    return [
      "copy",
      "copyWithHeaders",
      "paste",
      "separator",
      "export",
      {
        name: "customContextAction",
        displayName: "Process Row",
        disabled: !params.node,
        action: () => {
          if (params.node) {
            console.log("Processing row:", params.node.data);
          }
        }
      }
    ];
  },
  
  // Main menu customization
  getMainMenuItems: (params) => {
    return [
      "pinSubMenu",
      "valueAggSubMenu",
      "autoSizeThis",
      "autoSizeAll",
      "resetColumns",
      "separator",
      {
        name: "exportOptions",
        displayName: "Export Options",
        subMenu: [
          "csvExport",
          "excelExport",
          {
            name: "customExport",
            displayName: "Custom Export",
            action: () => {
              // Custom export logic
              console.log("Custom export triggered");
            }
          }
        ]
      }
    ];
  }
};

/**
 * Rich select filter parameters
 */
interface IRichSelectParams extends IFilterParams {
  /** Values for the dropdown */
  values?: any[] | ((params: any) => void);
  /** Cell renderer for dropdown items */
  cellRenderer?: ICellRendererComp | ICellRendererFunc | string;
  /** Value formatter for display */
  valueFormatter?: (params: ValueFormatterParams) => string;
  /** Enable search in dropdown */
  searchStringCreator?: (values: any[], params: IRichSelectParams) => string[];
  /** Allow typing to search */
  allowTyping?: boolean;
  /** Filter list on key stroke */
  filterList?: boolean;
  /** Placeholder text */
  placeholder?: string;
}

import { RichSelectModule } from "ag-grid-enterprise";

const columnDefs: ColDef[] = [
  {
    field: "country",
    filter: "agRichSelect",
    filterParams: {
      values: ["USA", "UK", "France", "Germany", "Spain", "Italy"],
      allowTyping: true,
      filterList: true,
      placeholder: "Select country...",
      cellRenderer: (params) => {
        const flagUrl = `https://flags.fmcdn.net/data/flags/mini/${params.value.toLowerCase()}.png`;
        return `<img src="${flagUrl}" style="width: 20px; margin-right: 5px;"/>${params.value}`;
      }
    }
  },
  {
    field: "sport",
    filter: "agRichSelect",
    filterParams: {
      values: (params) => {
        // Dynamic values based on data
        const sports = new Set();
        params.api.forEachNode(node => {
          if (node.data && node.data.sport) {
            sports.add(node.data.sport);
          }
        });
        params.success(Array.from(sports));
      },
      allowTyping: true
    }
  }
];

const gridOptions: GridOptions = {
  modules: [RichSelectModule],
  columnDefs
};

// Side bar configuration types
interface SideBarDef {
  toolPanels?: (ToolPanelDef | string)[];
  defaultToolPanel?: string;  
  hiddenByDefault?: boolean;
  position?: "left" | "right";
  width?: number;
}

interface ToolPanelDef {
  id: string;
  labelDefault: string;
  labelKey?: string;
  iconKey: string;
  toolPanel?: string;
  toolPanelParams?: any;
  minWidth?: number;
  maxWidth?: number;
  width?: number;
}

// Status bar types
interface StatusBarDef {
  statusPanels: StatusPanelDef[];
}

interface StatusPanelDef {
  statusPanel: string;
  align?: "left" | "center" | "right";
  statusPanelParams?: any;
  key?: string;
}

// Menu configuration types
interface GetColumnMenuItemsParams {
  defaultItems: string[];
  column: Column;
  api: GridApi;
  columnApi: ColumnApi;
  context?: any;
}

interface MenuItemDef {
  name: string;
  displayName?: string;
  icon?: string | (() => string);
  action?: (params?: any) => void;
  checked?: boolean;
  disabled?: boolean | (() => boolean);
  cssClasses?: string[];
  tooltip?: string;
  subMenu?: (string | MenuItemDef)[];
}

// Tool panel interfaces
interface IColumnsToolPanel {
  expandColumnGroups(groupIds?: string[]): void;
  collapseColumnGroups(groupIds?: string[]): void;
  setColumnGroupOpened(groupId: string, opened: boolean): void;
  getExpandedColumnGroups(): string[];
}

interface IFiltersToolPanel {
  refresh(): void;
  expandAll(): void;
  collapseAll(): void;
  setExpandedGroups(groupIds: string[]): void;
  getExpandedGroups(): string[];
}

// Rich select filter types
interface IRichSelectParams extends IFilterParams {
  values?: any[] | ((params: any) => void);
  cellRenderer?: ICellRendererComp | ICellRendererFunc | string;
  valueFormatter?: (params: ValueFormatterParams) => string;
  searchStringCreator?: (values: any[], params: IRichSelectParams) => string[];
  allowTyping?: boolean;
  filterList?: boolean;
  placeholder?: string;
}