import * as React from 'react';
import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
import { ADAPTABLE_VERSION } from '../../../EnvVars';
import { AG_GRID_VERSION } from '../../../agGrid/AgGridModulesAdapter';
import { DataSource, InfiniteTableGrid } from '../../../components/InfiniteTable';
import Panel from '../../../components/Panel';
import { Tabs } from '../../../components/Tabs';
import { PopupPanel } from '../../Components/Popups/AdaptablePopup/PopupPanel';
import { AdaptableObjectsSummary } from './AdaptableObjectsSummary';
import clsx from 'clsx';
const adaptableVersion = ADAPTABLE_VERSION;
const agGridVersion = AG_GRID_VERSION;
export const GridInfoPopup = (props) => {
    const api = props.api;
    const keyValuePairs = [];
    const calcColumns = api.calculatedColumnApi
        .getCalculatedColumns()
        .map((c) => c.ColumnId);
    const actionColumns = api.actionColumnApi
        .getActionColumns()
        .map((ac) => ac.columnId);
    const freeTextColumns = api.freeTextColumnApi
        .getFreeTextColumns()
        .map((c) => c.ColumnId);
    const columnFilterDescription = api.filterApi.columnFilterApi.columnFiltersToString(api.filterApi.columnFilterApi.getColumnFilters());
    const gridFilterExpression = api.filterApi.gridFilterApi.getCurrentGridFilterExpression();
    const sorts = ArrayExtensions.IsNotNullOrEmpty(props.api.gridApi.getColumnSorts())
        ? api.gridApi.getColumnSorts().map((gs) => {
            return api.columnApi.getFriendlyNameForColumnId(gs.ColumnId) + ': ' + gs.SortOrder;
        })
        : null;
    const selectedRowInfo = api.gridApi.getSelectedRowInfo();
    if (api.optionsApi.getUserInterfaceOptions()?.showAdapTableVersion) {
        keyValuePairs.push({ Key: 'AdapTable Version', Value: adaptableVersion });
    }
    if (api.optionsApi.getUserInterfaceOptions()?.showAgGridVersion) {
        keyValuePairs.push({ Key: 'AG Grid Version', Value: agGridVersion });
    }
    keyValuePairs.push({ Key: 'Sorted Columns', Value: ArrayExtensions.IsNotNullOrEmpty(sorts) ? sorts.join('; ') : 'None' });
    keyValuePairs.push({ Key: 'Column Filters', Value: columnFilterDescription });
    keyValuePairs.push({ Key: 'Grid Filter', Value: gridFilterExpression });
    keyValuePairs.push({ Key: 'All Rows', Value: props.api.gridApi.getRowCount() });
    keyValuePairs.push({ Key: 'Visible Rows', Value: props.api.gridApi.getVisibleRowCount() });
    keyValuePairs.push({ Key: 'Selected Rows', Value: selectedRowInfo?.gridRows.length });
    keyValuePairs.push({ Key: 'Visible Selected Rows', Value: selectedRowInfo?.gridRows.filter((gr) => gr.rowNode?.displayed == true).length });
    keyValuePairs.push({ Key: 'All Columns', Value: props.api.gridApi.getColumnCount() });
    keyValuePairs.push({ Key: 'Visible Columns', Value: props.api.gridApi.getVisibleColumnCount() });
    keyValuePairs.push({ Key: 'Calculated Columns', Value: ArrayExtensions.IsNotNullOrEmpty(calcColumns)
            ? ArrayExtensions.createCommaSeparatedString(calcColumns)
            : 'None' });
    keyValuePairs.push({ Key: 'Free Text Columns', Value: ArrayExtensions.IsNotNullOrEmpty(freeTextColumns)
            ? ArrayExtensions.createCommaSeparatedString(freeTextColumns)
            : 'None' });
    keyValuePairs.push({ Key: 'CalcuActionlated Columns', Value: ArrayExtensions.IsNotNullOrEmpty(actionColumns)
            ? ArrayExtensions.createCommaSeparatedString(actionColumns)
            : 'None' });
    const domProps = {
        className: 'twa:flex-1 twa:min-h-0 twa:w-full',
    };
    keyValuePairs.map((keyValuePair) => {
        return {
            Key: keyValuePair.Key,
            Value: keyValuePair.Value === 'Ignore' ? null : keyValuePair.Value,
        };
    })
        .filter((x) => x.Value);
    const columnsMap = {
        Key: { field: 'Key', header: 'Property', defaultFlex: 1 },
        Value: { field: 'Value', header: 'Value', defaultFlex: 3 },
    };
    const baseClassName = 'ab-GridInfo';
    return (React.createElement(PopupPanel, { className: clsx(baseClassName), headerText: 'Grid Info', glyphicon: 'info', scrollable: false },
        React.createElement(Panel, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden" },
            React.createElement(Panel.FlexBody, null,
                React.createElement(Tabs, { className: "twa:flex-1 twa:min-h-0" },
                    React.createElement(Tabs.Tab, null, "Grid Summary"),
                    React.createElement(Tabs.Tab, null, "Grid State"),
                    React.createElement(Tabs.Content, null,
                        React.createElement(DataSource, { data: keyValuePairs, primaryKey: "Key" },
                            React.createElement(InfiniteTableGrid, { domProps: domProps, columns: columnsMap }))),
                    React.createElement(Tabs.Content, null,
                        React.createElement(AdaptableObjectsSummary, { className: "twa:min-h-0 twa:overflow-auto twa:p-2" })))))));
};
