import * as React from 'react';
import FormLayout, { FormRow } from '../../components/FormLayout';
import { DataSource, InfiniteTableGrid } from '../../components/InfiniteTable';
import Panel from '../../components/Panel';
import { Tabs } from '../../components/Tabs';
import { useAdaptable } from '../AdaptableContext';
import { AdaptableObjectList } from '../Components/AdaptableObjectList';
import { ButtonNew } from '../Components/Buttons/ButtonNew';
import { ColumnSelector } from '../Components/Selectors/ColumnSelector';
import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
import { Box, Flex } from '../../components/Flex';
const BASE_CLASS_NAME = 'ab-AdaptableColumns';
const domProps = {
    className: 'twa:flex-1 twa:min-h-0 twa:w-full',
};
// TODOS:
// - use column from props as initial value
// - table summary
// - access level for edit/new buttons
const MODULES_WITH_COLUMN = [
    'Alert', // Scope
    'CalculatedColumn', // ColumnId
    'CustomSort', // ColumnId
    'FormatColumn', // Scope
    'FlashingCell',
    'PlusMinus', // Scope
    'Shortcut', // Scope
    'StyledColumn', // Scope
];
const MODULES_WITH_SCOPE = [
    'Alert',
    'FormatColumn',
    'PlusMinus',
    'Shortcut',
    'StyledColumn',
];
const ColumnDefPreview = (props) => {
    const adaptable = useAdaptable();
    if (props.column) {
        const api = adaptable.api;
        const summary = api.columnApi.getColumnSummaryForColumnId(props.column.columnId);
        const keyValuePairs = [
            {
                Key: 'Column Id',
                Value: props.column.columnId,
            },
            {
                Key: 'Header',
                Value: props.column.friendlyName,
            },
            {
                Key: 'Data Type',
                Value: props.column.dataType,
            },
            {
                Key: 'Column Types',
                Value: ArrayExtensions.createCommaSeparatedString(props.column.columnTypes),
            },
            {
                Key: 'Primary Key Column',
                Value: props.column.isPrimaryKey ? 'Yes' : 'Ignore',
            },
            {
                Key: 'Calculated Column',
                Value: props.column.isCalculatedColumn ? 'Yes' : 'Ignore',
            },
            {
                Key: 'Free Text Column',
                Value: props.column.isFreeTextColumn ? 'Yes' : 'Ignore',
            },
            {
                Key: 'Action Column',
                Value: props.column.isActionColumn ? 'Yes' : 'Ignore',
            },
            {
                Key: 'Sparkline Column',
                Value: props.column.isSparkline ? 'Yes' : 'Ignore',
            },
            {
                Key: 'Column Group',
                Value: props.column.columnGroup ? props.column.columnGroup.friendlyName : 'Ignore',
            },
            {
                Key: 'Visible',
                Value: props.column.visible ? 'Yes' : 'No',
            },
            {
                Key: 'Width',
                Value: props.column.width,
            },
            {
                Key: 'Row Grouped',
                Value: props.column.groupable ? (props.column.isGrouped ? 'Yes' : 'No') : 'Ignore',
            },
            {
                Key: 'Groupable',
                Value: props.column.groupable ? 'Yes' : 'No',
            },
            {
                Key: 'Aggregatable',
                Value: props.column.aggregatable ? 'Yes' : 'No',
            },
            {
                Key: 'Aggregation Function',
                Value: props.column.aggregatable ? props.column.aggregationFunction : 'Ignore',
            },
            {
                Key: 'Filterable',
                Value: props.column.filterable ? 'Yes' : 'No',
            },
            {
                Key: 'Column Filter',
                Value: props.column.filterable
                    ? api.filterApi.columnFilterApi.columnFilterToString(summary.columnFilter)
                    : 'Ignore',
            },
            {
                Key: 'Hideable',
                Value: props.column.hideable ? 'Yes' : 'No',
            },
            {
                Key: 'Editable',
                Value: !props.column.IsReadOnly ? 'Yes' : 'No',
            },
            {
                Key: 'Moveable',
                Value: props.column.moveable ? 'Yes' : 'No',
            },
            {
                Key: 'Pivotable',
                Value: props.column.pivotable ? 'Yes' : 'No',
            },
            {
                Key: 'Queryable',
                Value: props.column.queryable ? 'Yes' : 'No',
            },
            {
                Key: 'Exportable',
                Value: props.column.exportable ? 'Yes' : 'No',
            },
            {
                Key: 'Sortable',
                Value: props.column.sortable ? 'Yes' : 'No',
            },
            {
                Key: 'No. Distinct Values',
                Value: summary.uniqueGridCells.length,
            },
        ]
            .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 },
        };
        return (React.createElement(DataSource, { data: keyValuePairs, primaryKey: "Key" },
            React.createElement(InfiniteTableGrid, { domProps: domProps, columns: columnsMap })));
    }
};
const ModuleView = (props) => {
    const adaptable = useAdaptable();
    const module = adaptable.ModuleService.getModuleById(props.moduleName);
    if (!module?.isModuleVisible()) {
        return null;
    }
    const moduleInfo = module.moduleInfo;
    const [isWizardOpen, setIsWizardOpen] = React.useState(false);
    const EditWizard = module?.getViewProperties?.()?.getEditWizard?.();
    const column = adaptable.api.columnApi.getColumnWithColumnId(props.selectedColumnId);
    const allItems = module?.toViewAll?.();
    // Dont show calculated column for non calc cols
    if (module.moduleInfo.ModuleName == 'CalculatedColumn' && !column.isCalculatedColumn) {
        return React.createElement(React.Fragment, null);
    }
    // if (MODULES_WITH_VIEW_ONLY.includes(props.moduleName) && !allItems?.length) {
    //   return <></>;
    // }
    const itemsInScope = allItems.filter((item) => {
        if ('Scope' in item.abObject) {
            return adaptable.api.columnScopeApi.isColumnInScope(column, item.abObject.Scope);
        }
        if ('ColumnId' in item.abObject) {
            return item.abObject?.ColumnId === props.selectedColumnId;
        }
        return false;
    });
    if (!itemsInScope) {
        return null;
    }
    const handleWizardClose = React.useCallback(() => {
        setIsWizardOpen(false);
    }, []);
    // filter out items with scope
    return (React.createElement(Box, { "data-name": module.moduleInfo.ModuleName, className: `${BASE_CLASS_NAME}__module-list twa:mb-4`, key: module.moduleInfo.ModuleName },
        React.createElement(Flex, null,
            React.createElement("b", { className: `${BASE_CLASS_NAME}__header` }, module.moduleInfo.FriendlyName),
            React.createElement(Box, { className: "twa:flex-1" }),
            React.createElement(ButtonNew, { onClick: () => setIsWizardOpen(true) }, "New")),
        itemsInScope?.length ? React.createElement(AdaptableObjectList, { items: itemsInScope, module: module }) : null,
        isWizardOpen && EditWizard && (React.createElement(EditWizard, { popupParams: {
                column,
                action: 'New',
                source: 'ModuleButton',
            }, moduleInfo: moduleInfo, data: null, configEntities: null, onCloseWizard: handleWizardClose, onFinishWizard: handleWizardClose }))));
};
export const ColumnInfo = (props) => {
    const adaptable = useAdaptable();
    const [selectedColumnId, setSelectedColumnId] = React.useState(props.selectedColumnId);
    const column = adaptable.api.columnApi.getColumnWithColumnId(selectedColumnId);
    return (React.createElement(Panel, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden" },
        React.createElement(Panel.FlexBody, { className: "twa:gap-3" },
            React.createElement(FormLayout, null,
                React.createElement(FormRow, { label: "Select Column" },
                    React.createElement(ColumnSelector, { value: selectedColumnId, onChange: (columnId) => setSelectedColumnId(columnId) }))),
            selectedColumnId && (React.createElement(Tabs, { className: "twa:min-h-0 twa:flex-1" },
                React.createElement(Tabs.Tab, null, "Column Summary"),
                React.createElement(Tabs.Tab, null, "Column State"),
                React.createElement(Tabs.Content, null, selectedColumnId && React.createElement(ColumnDefPreview, { column: column })),
                React.createElement(Tabs.Content, null, selectedColumnId && (React.createElement(Box, { className: BASE_CLASS_NAME }, MODULES_WITH_COLUMN.map((moduleName) => {
                    return (React.createElement(ModuleView, { key: moduleName, moduleName: moduleName, selectedColumnId: selectedColumnId }));
                })))))))));
};
