"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ColumnsSection = exports.ColumnsSectionSummary = void 0;
const tslib_1 = require("tslib");
const InfiniteTable_1 = require("../../../../components/InfiniteTable");
const React = tslib_1.__importStar(require("react"));
const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
const Tabs_1 = require("../../../../components/Tabs");
const AdaptableColumn_1 = require("../../../../AdaptableState/Common/AdaptableColumn");
const AdaptableContext_1 = require("../../../AdaptableContext");
const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
const Utilities_1 = require("./Utilities");
const icons_1 = require("../../../../components/icons");
const CheckBox_1 = require("../../../../components/CheckBox");
const Helper_1 = require("../../../../Utilities/Helpers/Helper");
const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/ArrayExtensions"));
const ColumnApiImpl_1 = require("../../../../Api/Implementation/ColumnApiImpl");
const ReorderDraggable_1 = require("../../../Components/ReorderDraggable");
const AdaptableFormControlTextClear_1 = require("../../../Components/Forms/AdaptableFormControlTextClear");
const sortColumnIdsByOrder_1 = require("../../../../layout-manager/src/sortColumnIdsByOrder");
const GeneralConstants_1 = require("../../../../Utilities/Constants/GeneralConstants");
const isPivotLayout_1 = require("../../../../Utilities/isPivotLayout");
const Flex_1 = require("../../../../components/Flex");
const clsx_1 = tslib_1.__importDefault(require("clsx"));
const Radio_1 = tslib_1.__importStar(require("../../../../components/Radio"));
const PropertyOrderText = (props) => (React.createElement(Flex_1.Box, { className: "twa:font-bold twa:text-2" }, props.children));
// we want to make sure tailwind generates this class
// as for now it's not used anywhere yet
const _cls = 'twa:text-text-on-defaultbackground';
const columnTypes = {
    default: {
        defaultFlex: 1,
    },
};
const ColumnsSectionSummary = () => {
    const adaptable = (0, AdaptableContext_1.useAdaptable)();
    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
    const rowHeight = 40;
    const headerHeight = 40;
    const ColumnIds = layout.TableColumns || layout.PivotColumns || [];
    const tableHeight = headerHeight + (0, Helper_1.clamp)(rowHeight * ColumnIds.length, 100, 360);
    const data = React.useMemo(() => {
        return ColumnIds.map((columnId) => {
            if (adaptable.api.columnApi.isPivotResultColumn(columnId) ||
                adaptable.api.columnApi.isAutoRowGroupColumn(columnId) ||
                adaptable.api.columnApi.isSelectionColumn(columnId)) {
                return null;
            }
            const friendlyName = adaptable.api.columnApi.getFriendlyNameForColumnId(columnId, layout);
            const header = layout.ColumnHeaders?.[columnId] ?? '';
            const columnWidth = layout.ColumnSizing?.[columnId]?.Width;
            const columnPinning = layout.ColumnPinning?.[columnId];
            let agg = (layout.TableAggregationColumns || []).find((agg) => agg.ColumnId === columnId)?.AggFunc;
            agg = typeof agg === 'object' ? agg.type : agg;
            const sortIndex = (layout?.ColumnSorts ?? []).findIndex((sort) => sort.ColumnId === columnId);
            const sortOrder = sortIndex != -1
                ? {
                    index: sortIndex + 1,
                    sort: layout.ColumnSorts[sortIndex]?.SortOrder ?? null,
                }
                : {};
            let grouping = layout.RowGroupedColumns?.indexOf?.(columnId);
            grouping = grouping != -1 ? grouping + 1 : null;
            const filter = layout.ColumnFilters?.find((colFilter) => colFilter.ColumnId === columnId);
            return {
                columnId,
                agg,
                friendlyName,
                header,
                columnWidth,
                columnPinning,
                sortOrder,
                grouping,
                filter,
            };
        }).filter(Boolean);
    }, [layout]);
    const columns = React.useMemo(() => {
        return {
            name: { header: 'Name', field: 'friendlyName', minWidth: 100 },
            header: { header: 'Header', field: 'header', minWidth: 120 },
            colId: { header: 'ID', field: 'columnId' },
            agg: { header: 'Agg', field: 'agg', minWidth: 70 },
            width: { header: 'Width', field: 'columnWidth', minWidth: 70 },
            pin: { header: 'Pin', field: 'columnPinning', minWidth: 80 },
            sort: {
                header: 'Sort',
                field: 'sortOrder',
                minWidth: 50,
                align: 'center',
                render: (params) => {
                    if (!params.data?.sortOrder?.sort) {
                        return React.createElement(React.Fragment, null);
                    }
                    return (React.createElement(Flex_1.Flex, null,
                        React.createElement(icons_1.Icon, { name: params.data?.sortOrder?.sort === 'Asc' ? 'arrow-up-long' : 'arrow-down-long' }),
                        ' ',
                        React.createElement(PropertyOrderText, null, params.data?.sortOrder?.index ?? '')));
                },
            },
            filter: {
                header: 'Filter',
                field: 'filter',
                align: 'center',
                minWidth: 50,
                render: (params) => {
                    if (!params.data?.filter) {
                        return React.createElement(React.Fragment, null);
                    }
                    return React.createElement(CheckBox_1.CheckBox, { checked: true });
                },
            },
            group: {
                header: 'Group',
                minWidth: 50,
                field: 'columnGroupping',
                align: 'center',
                render: (params) => {
                    if (!params.data.grouping) {
                        return React.createElement(React.Fragment, null);
                    }
                    return (React.createElement(Flex_1.Flex, null,
                        React.createElement(CheckBox_1.CheckBox, { className: "twa:m-0 twa:mr-1", checked: true }),
                        React.createElement(PropertyOrderText, null, params.data?.grouping)));
                },
            },
        };
    }, []);
    const tableDOMProps = {
        style: {
            height: '100%',
            minWidth: '10rem',
            minHeight: tableHeight,
        },
    };
    return (React.createElement(InfiniteTable_1.DataSource, { data: data, primaryKey: "columnId" },
        React.createElement(InfiniteTable_1.InfiniteTableGrid, { columnTypes: columnTypes, rowHeight: rowHeight, columnHeaderHeight: headerHeight, domProps: tableDOMProps, columns: columns })));
};
exports.ColumnsSectionSummary = ColumnsSectionSummary;
const isColumnVisible = (options) => {
    const { columnId, layout } = options;
    const isRowGroupColumn = (0, ColumnApiImpl_1.isAutoRowGroupColumn)(columnId);
    const visible = (!(0, isPivotLayout_1.isPivotLayout)(layout) &&
        layout.TableColumns.includes(columnId) &&
        layout.ColumnVisibility?.[columnId] !== false) ||
        isRowGroupColumn;
    return visible;
};
const ColumnRow = (props) => {
    const adaptable = (0, AdaptableContext_1.useAdaptable)();
    const initialHeader = adaptable.api.columnApi.getFriendlyNameForColumnId(props.column.columnId, props.layout);
    const isRowGroupColumn = (0, ColumnApiImpl_1.isAutoRowGroupColumn)(props.column.columnId);
    const { column } = props;
    const visible = isColumnVisible({ columnId: column.columnId, layout: props.layout });
    return (React.createElement(Flex_1.Box, { "data-name": props.column.columnId, className: "twa:flex-1" },
        React.createElement(Flex_1.Flex, { className: "ab-Layout-Wizard__ColumnRow__Header twa:my-1" },
            React.createElement(CheckBox_1.CheckBox, { "data-name": column.columnId, onChange: (checked) => {
                    props.onColumnVisibilityChange(column.columnId, checked);
                }, disabled: column.hideable === false || isRowGroupColumn, onClick: (event) => {
                    event.stopPropagation();
                }, checked: visible }),
            React.createElement(Flex_1.Flex, { className: "twa:mx-2", alignItems: "center", "data-name": "column-label" }, initialHeader),
            props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? (React.createElement(Flex_1.Box, { className: "ab-Layout-Wizard__ColumnRow__Title twa:mx-2 twa:p-1" },
                "Column Group: ",
                props.column.columnGroup.friendlyName)) : null)));
};
const ColumnsSection = (props) => {
    const adaptable = (0, AdaptableContext_1.useAdaptable)();
    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
    const [searchInputValue, setSearchInputValue] = React.useState('');
    const [selectedColumnId, setSelectedColumnId] = React.useState(null);
    let hasSelectionColumn = false;
    const allColumns = adaptable.api.columnApi
        .getUIAvailableColumns()
        .filter((col) => {
        // since the "Row Groups" section of the editor can determine a change
        // which is not reflected into AG Grid until we hit finish
        // so we only rely on non-generated columns, which are the same
        return !col.isGeneratedRowGroupColumn;
    })
        // if the current Layout is a PivotLayout, then we also filter out current Pivot Result Columns
        .filter((col) => !col.isGeneratedPivotResultColumn)
        // also we need to filter out selection column
        .filter((col) => {
        const result = !col.isGeneratedSelectionColumn;
        if (!result) {
            hasSelectionColumn = true;
        }
        return result;
    });
    const onChange = (data) => {
        if (hasSelectionColumn &&
            Array.isArray(data.TableColumns) &&
            !data.TableColumns.includes(GeneralConstants_1.AG_GRID_SELECTION_COLUMN)) {
            data.TableColumns.unshift(GeneralConstants_1.AG_GRID_SELECTION_COLUMN);
        }
        props.onChange(data);
    };
    // however, changes in RowGroupedColumns done in the previous step
    // are reflected into the layout, so we use the latest layout.RowGroupedColumns
    // to create new columns
    if (layout.RowGroupedColumns && layout.RowGroupedColumns.length > 0) {
        if (layout.RowGroupDisplayType === 'single') {
            allColumns.unshift((0, ColumnApiImpl_1.generateAutoRowGroupSingleColumn)());
        }
        else {
            [...layout.RowGroupedColumns].reverse().forEach((col) => {
                const groupCol = (0, ColumnApiImpl_1.generateAutoRowGroupColumnForColumn)(adaptable.api.columnApi.getColumnWithColumnId(col));
                allColumns.unshift(groupCol);
            });
        }
    }
    if (adaptable.api.gridApi.isTreeDataGrid() &&
        !allColumns.find((col) => col.columnId === GeneralConstants_1.AG_GRID_GROUPED_COLUMN)) {
        allColumns.unshift((0, ColumnApiImpl_1.generateAutoTreeSingleColumn)());
    }
    const colIdToCol = allColumns.reduce((acc, col) => {
        if (col) {
            acc[col.columnId] = col;
        }
        return acc;
    }, {});
    const TableColumns = layout.TableColumns;
    const ColumnOrderAllColumns = ArrayExtensions_1.default.sortArrayWithOrder(allColumns.map((col) => col.columnId), TableColumns, { sortUnorderedItems: false }).map((colId) => colIdToCol[colId]);
    const currentOrder = searchInputValue
        ? ColumnOrderAllColumns.filter((col) => {
            return (0, Utilities_1.columnFilter)(col, searchInputValue);
        })
        : ColumnOrderAllColumns;
    const currentOrderIds = currentOrder.map((col) => col.columnId);
    const handleColumnsChange = (newColumns) => {
        if (searchInputValue) {
            // there's a search in-place
            // so the current `newColumns` does not actually contain all the columns
            // so we need to recompute it
            const newOrder = (0, sortColumnIdsByOrder_1.sortColumnIdsByOrder)(
            // given those are all the columns
            ColumnOrderAllColumns.map((col) => col.columnId), 
            // we want to sort them to have this new order
            // - this sorting will leave all ids not found in this new order untouched
            newColumns.map((col) => col.columnId));
            // so basically we now have the correct order, with all columns
            newColumns = newOrder.map((colId) => colIdToCol[colId]);
        }
        const oldColumns = ColumnOrderAllColumns;
        const columnIds = newColumns.map((col) => col.columnId);
        if (!(0, AdaptableColumn_1.isValidOrderForColumnGroups)({ oldColumns, newColumns })) {
            return;
        }
        const ColumnVisibility = { ...layout.ColumnVisibility };
        const columnOrderSet = new Set(TableColumns);
        columnIds.forEach((colId) => {
            if (!columnOrderSet.has(colId)) {
                ColumnVisibility[colId] = false;
            }
        });
        onChange({
            ...layout,
            TableColumns: columnIds,
            ColumnVisibility,
        });
    };
    const handleColumnVisibilityChange = (columnId, visible) => {
        const columnIdArray = Array.isArray(columnId) ? columnId : [columnId];
        const columnIdSet = new Set(columnIdArray);
        const ColumnVisibility = { ...layout.ColumnVisibility };
        let TableColumns = [...layout.TableColumns];
        if (visible) {
            columnIdArray.forEach((colId) => {
                delete ColumnVisibility[colId];
            });
        }
        else {
            columnIdArray.forEach((colId) => {
                ColumnVisibility[colId] = false;
            });
        }
        const columnIds = ColumnOrderAllColumns.map((col) => col.columnId);
        const idsToIndexes = new Map(columnIds.map((colId, index) => [colId, index]));
        const columnOrderSet = new Set(TableColumns);
        const currentColumnIdsAreIncluded = columnIdArray.every((colId) => columnOrderSet.has(colId));
        if (!currentColumnIdsAreIncluded) {
            const biggestIndex = Math.max(...columnIdArray.map((colId) => idsToIndexes.get(colId)));
            TableColumns = columnIds.filter((colId) => {
                const isCurrent = columnOrderSet.has(colId);
                if (isCurrent) {
                    return true;
                }
                // include all columns past the current column order
                // that reach until the index of the currently checked column
                const shouldInclude = idsToIndexes.get(colId) <= biggestIndex;
                if (shouldInclude) {
                    if (!columnIdSet.has(colId) && visible) {
                        // this is a column that's between the current column order limit
                        // and the currently checked column
                        // so we need to include it in order
                        // but make it invisible
                        ColumnVisibility[colId] = false;
                    }
                }
                return shouldInclude;
            });
        }
        onChange({
            ...layout,
            TableColumns: TableColumns,
            ColumnVisibility,
        });
    };
    const handlePinChange = (columnId, pinning) => {
        onChange({
            ...layout,
            ColumnPinning: {
                ...layout.ColumnPinning,
                [columnId]: pinning,
            },
        });
    };
    const handleColumnNameChange = (columnId, headerName) => {
        onChange({
            ...layout,
            ColumnHeaders: {
                ...layout.ColumnHeaders,
                [columnId]: headerName,
            },
        });
    };
    const handleColumnWidthChange = (columnId, width) => {
        const ColumnSizing = { ...layout.ColumnSizing };
        const colSizingForCol = { ...ColumnSizing[columnId] };
        delete colSizingForCol.Flex;
        colSizingForCol.Width = width;
        ColumnSizing[columnId] = colSizingForCol;
        onChange({
            ...layout,
            ColumnSizing,
        });
    };
    const handleColumnFlexChange = (columnId, flex) => {
        const ColumnSizing = { ...layout.ColumnSizing };
        const colSizingForCol = { ...ColumnSizing[columnId] };
        delete colSizingForCol.Width;
        colSizingForCol.Flex = flex;
        ColumnSizing[columnId] = colSizingForCol;
        onChange({
            ...layout,
            ColumnSizing,
        });
    };
    const handleColumnMinWidthChange = (columnId, minWidth) => {
        const ColumnSizing = { ...layout.ColumnSizing };
        const colSizingForCol = { ...ColumnSizing[columnId] };
        colSizingForCol.MinWidth = minWidth;
        ColumnSizing[columnId] = colSizingForCol;
        onChange({
            ...layout,
            ColumnSizing,
        });
    };
    const handleColumnMaxWidthChange = (columnId, maxWidth) => {
        const ColumnSizing = { ...layout.ColumnSizing };
        const colSizingForCol = { ...ColumnSizing[columnId] };
        colSizingForCol.MaxWidth = maxWidth;
        ColumnSizing[columnId] = colSizingForCol;
        onChange({
            ...layout,
            ColumnSizing,
        });
    };
    const visibleIds = layout.TableColumns.filter((colId) => {
        return (layout.ColumnVisibility?.[colId] !== false &&
            adaptable.api.columnApi.isSelectionColumn(colId) === false &&
            !adaptable.api.columnApi.internalApi.isColumnUIHidden(colId));
    });
    const currentlyDisplayedColumnIds = searchInputValue
        ? currentOrder
            .filter((col) => currentOrderIds.includes(col.columnId))
            .map((col) => col.columnId)
        : currentOrder.map((col) => col.columnId);
    const visibleIdsCurrentlyDisplayed = visibleIds.filter((colId) => currentlyDisplayedColumnIds.includes(colId));
    return (React.createElement(Tabs_1.Tabs, null,
        React.createElement(Tabs_1.Tabs.Tab, null, "Columns"),
        React.createElement(Tabs_1.Tabs.Content, { className: "twa:overflow-hidden" },
            React.createElement(Flex_1.Box, { className: "twa:grid twa:grid-cols-2 twa:gap-2 twa:focus:outline-none", "data-name": "columns-container", tabIndex: -1, onKeyDown: (event) => {
                    if (event.key === 'ArrowDown') {
                        event.preventDefault();
                        event.stopPropagation();
                        const index = currentlyDisplayedColumnIds.indexOf(selectedColumnId);
                        if (index === -1) {
                            return;
                        }
                        const nextColumnId = currentlyDisplayedColumnIds[index + 1];
                        const nextColumn = colIdToCol[nextColumnId];
                        if (nextColumn) {
                            setSelectedColumnId(nextColumn.columnId);
                        }
                    }
                    if (event.key === 'ArrowUp') {
                        event.preventDefault();
                        event.stopPropagation();
                        const index = currentlyDisplayedColumnIds.indexOf(selectedColumnId);
                        if (index === -1) {
                            return;
                        }
                        const previousColumnId = currentlyDisplayedColumnIds[index - 1];
                        const previousColumn = colIdToCol[previousColumnId];
                        if (previousColumn) {
                            setSelectedColumnId(previousColumn.columnId);
                        }
                    }
                    if (event.key === ' ') {
                        event.preventDefault();
                        event.stopPropagation();
                        const selectedColumn = colIdToCol[selectedColumnId];
                        if (!selectedColumn) {
                            return;
                        }
                        const visible = isColumnVisible({ columnId: selectedColumnId, layout });
                        handleColumnVisibilityChange(selectedColumnId, !visible);
                    }
                } },
                React.createElement(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-2" },
                    React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Search Columns...", className: "twa:w-full twa:border-none twa:p-1" }),
                    React.createElement(Flex_1.Box, { className: (0, clsx_1.default)('twa:font-bold', 'twa:border-b twa:border-primarydark/30 twa:rounded-standard') },
                        React.createElement(CheckBox_1.CheckBox, { checked: currentlyDisplayedColumnIds.length
                                ? currentlyDisplayedColumnIds.length === visibleIdsCurrentlyDisplayed.length
                                    ? true
                                    : visibleIdsCurrentlyDisplayed.length
                                        ? null
                                        : false
                                : false, onChange: (checked) => {
                                handleColumnVisibilityChange(currentlyDisplayedColumnIds, checked);
                            } }, "Select All")),
                    React.createElement(ReorderDraggable_1.ReorderDraggable, { toIdentifier: (option) => `${option.columnId}`, isOptionDraggable: (option) => {
                            return option.moveable;
                        }, optionClassName: (option) => {
                            const baseCls = 'ab-Layout-Wizard__ColumnRow twa:cursor-pointer twa:rounded-standard';
                            if (selectedColumnId !== option.columnId) {
                                return baseCls;
                            }
                            return (0, clsx_1.default)(baseCls, 'twa:after:border-accent twa:relative twa:after:border-2 twa:after:rounded-standard twa:after:pointer-events-none twa:after:inset-0 twa:after:absolute twa:after:bg-accent/15');
                        }, order: currentOrder, onOptionClick: (option, event) => {
                            if (event.ctrlKey || option.columnId === selectedColumnId) {
                                setSelectedColumnId(null);
                            }
                            else {
                                setSelectedColumnId(option.columnId);
                            }
                        }, renderOption: (option) => {
                            return (React.createElement(ColumnRow, { onColumnNameChange: handleColumnNameChange, onColumnWidthChange: handleColumnWidthChange, onColumnFlexChange: handleColumnFlexChange, onColumnMinWidthChange: handleColumnMinWidthChange, onColumnMaxWidthChange: handleColumnMaxWidthChange, onColumnVisibilityChange: handleColumnVisibilityChange, onPinChange: handlePinChange, layout: layout, column: option }));
                        }, onChange: handleColumnsChange })),
                currentOrderIds.length ? (React.createElement(ColumnPropertiesEditor, { column: selectedColumnId && currentOrderIds.includes(selectedColumnId)
                        ? colIdToCol[selectedColumnId] ?? null
                        : null, layout: layout, onPinChange: handlePinChange, onColumnNameChange: handleColumnNameChange, onColumnWidthChange: handleColumnWidthChange, onColumnFlexChange: handleColumnFlexChange, onColumnMinWidthChange: handleColumnMinWidthChange, onColumnMaxWidthChange: handleColumnMaxWidthChange, onColumnVisibilityChange: handleColumnVisibilityChange })) : null))));
};
exports.ColumnsSection = ColumnsSection;
const hr = React.createElement("hr", { className: "twa:my-2 twa:h-[0.5px] twa:bg-inputborder/50 twa:border-none" });
const ColumnPropertiesEditor = (props) => {
    const adaptable = (0, AdaptableContext_1.useAdaptable)();
    const baseCls = 'ab-Layout-Wizard__ColumnPropertiesEditor twa:border twa:rounded-standard';
    if (!props.column) {
        return (React.createElement(Flex_1.Box, { className: (0, clsx_1.default)(baseCls, 'twa:border-inputborder twa:grid twa:place-items-center twa:border-dashed twa:border-2') },
            React.createElement(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:items-center twa:justify-center" },
                React.createElement(Flex_1.Box, { className: "twa:text-text-on-primarydark ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Icon" },
                    React.createElement(icons_1.NaturallySizedIcon, { name: "inspector", style: { stroke: 'currentColor', fill: 'none', strokeWidth: 2 } })),
                React.createElement(Flex_1.Box, { className: "twa:text-4 twa:font-bold ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Title" }, "No Column Selected"),
                React.createElement(Flex_1.Box, { className: "twa:text-3 twa:opacity-80 ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Description" }, "Select a Column to view and edit its properties"))));
    }
    const { column } = props;
    const columnWidth = props.layout.ColumnSizing?.[column.columnId]?.Width;
    const columnFlex = props.layout.ColumnSizing?.[column.columnId]?.Flex;
    const minWidth = props.layout.ColumnSizing?.[column.columnId]?.MinWidth;
    const maxWidth = props.layout.ColumnSizing?.[column.columnId]?.MaxWidth;
    const resizable = column.resizable !== false;
    // column pinning
    const columnPinning = props.layout.ColumnPinning?.[props.column.columnId] || 'None';
    const initialHeader = adaptable.api.columnApi.getFriendlyNameForColumnId(props.column.columnId, props.layout);
    const customHeader = props.layout.ColumnHeaders?.[props.column.columnId] ?? initialHeader;
    return (React.createElement(Flex_1.Box, { className: (0, clsx_1.default)(baseCls, 'ab-Layout-Wizard__ColumnPropertiesEditor__Container twa:border-none twa:bg-defaultbackground twa:shadow-md twa:p-4') },
        React.createElement(Flex_1.Box, { className: "twa:text-5 twa:font-bold twa:leading-relaxed ab-Layout-Wizard__ColumnPropertiesEditor__Title" },
            "Column Settings: ",
            column.friendlyName),
        React.createElement(Flex_1.Box, { className: "twa:text-3 twa:opacity-80 twa:flex twa:flex-row twa:gap-1 twa:items-center" },
            "Column ID:",
            ' ',
            React.createElement(Flex_1.Box, { className: "twa:bg-primarydark/20 twa:text-text-on-primarydark twa:px-1 twa:py-0.5 twa:rounded-standard" }, column.columnId)),
        props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? (React.createElement(Flex_1.Box, { className: "ab-Layout-Wizard__ColumnRow__Title twa:mx-2 twa:p-1" },
            "Column Group: ",
            props.column.columnGroup.friendlyName)) : null,
        hr,
        React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3" },
            React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-1" },
                "Header",
                React.createElement(Input_1.default, { "data-name": "column-header", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input twa:w-full", placeholder: "Custom name (optional)", onChange: () => {
                        props.onColumnNameChange(props.column.columnId, event.target.value);
                    }, value: customHeader })),
            React.createElement(Flex_1.Box, { className: "twa:grid twa:grid-cols-[1fr_1fr] twa:gap-2" },
                React.createElement(Flex_1.Box, null, "Width:"),
                " ",
                React.createElement(Flex_1.Box, null, "Flex:"),
                React.createElement(Input_1.default, { "data-name": "column-width", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input", type: "number", placeholder: "Column width", disabled: resizable === false, onChange: (event) => {
                        let value = parseFloat(event.target.value);
                        value = typeof value === 'number' && !isNaN(value) ? value : void 0;
                        props.onColumnWidthChange(props.column.columnId, value);
                    }, value: columnWidth ?? '' }),
                React.createElement(Input_1.default, { "data-name": "column-flex", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input", type: "number", placeholder: "Column flex", disabled: resizable === false, onChange: (event) => {
                        let value = parseFloat(event.target.value);
                        value = typeof value === 'number' && !isNaN(value) ? value : void 0;
                        props.onColumnFlexChange(props.column.columnId, value);
                    }, value: columnFlex ?? '' }),
                React.createElement(Flex_1.Box, null, "Min Width:"),
                React.createElement(Flex_1.Box, null, "Max Width:"),
                React.createElement(Input_1.default, { "data-name": "column-min-width", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input", type: "number", placeholder: "Column min width", disabled: resizable === false, onChange: (event) => {
                        let value = parseFloat(event.target.value);
                        value = typeof value === 'number' && !isNaN(value) ? value : void 0;
                        props.onColumnMinWidthChange(props.column.columnId, value);
                    }, value: minWidth ?? '' }),
                React.createElement(Input_1.default, { "data-name": "column-max-width", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input", type: "number", placeholder: "Column max width", disabled: resizable === false, onChange: (event) => {
                        let value = parseFloat(event.target.value);
                        value = typeof value === 'number' && !isNaN(value) ? value : void 0;
                        props.onColumnMaxWidthChange(props.column.columnId, value);
                    }, value: maxWidth ?? '' })),
            "Pinning:",
            React.createElement(Radio_1.RadioGroup, { value: columnPinning || 'None', name: "columnPinning", orientation: "horizontal", variant: "text-only", className: Radio_1.radioGroupStyling.horizontalTextOnly, onRadioChange: (columnPinning) => {
                    props.onPinChange(column.columnId, columnPinning === 'None' ? null : columnPinning);
                } },
                React.createElement(Radio_1.default, { value: "left" }, "Left"),
                React.createElement(Radio_1.default, { value: "None" }, "None"),
                React.createElement(Radio_1.default, { value: "right" }, "Right"))),
        React.createElement(Flex_1.Box, { className: "twa:mt-5" }),
        hr,
        React.createElement(Flex_1.Box, null,
            React.createElement(Flex_1.Box, { className: "twa:my-3" }, "Column Attributes"),
            React.createElement(Flex_1.Box, { className: (0, clsx_1.default)({
                    'twa:bg-primarylight': 'the bg color',
                    'twa:gap-2 twa:flex twa:flex-col': 'layout configuration for small screens',
                    'twa:lg:gap-3 twa:lg:grid twa:md:grid-cols-[1fr_1fr]': 'layout configuration for normal screens',
                    'twa:p-5 twa:rounded-standard': true,
                }) }, [
                { label: 'Aggregatable', checked: props.column.aggregatable },
                { label: 'Filterable', checked: props.column.filterable },
                { label: 'Groupable', checked: props.column.groupable },
                { label: 'Moveable', checked: props.column.moveable },
                { label: 'Pivotable', checked: props.column.pivotable },
                { label: 'Sortable', checked: props.column.sortable },
            ].map(({ label, checked }) => (React.createElement(Flex_1.Flex, { key: label, alignItems: "center", className: (0, clsx_1.default)({
                    'twa:rounded-standard twa:gap-2': true,
                }) },
                React.createElement(Flex_1.Box, { className: "twa:size-5" }, checked ? (React.createElement(icons_1.Icon, { name: "check", className: "twa:text-success" })) : (React.createElement(icons_1.Icon, { name: "close", className: "twa:text-error" }))),
                label)))))));
};
