import * as React from 'react';
import { SpinButton, DetailsList, ConstrainMode, DetailsListLayoutMode, SelectionMode, Separator, Text, } from '@fluentui/react';
function createTableData(rows, columns) {
    var data = [];
    var charCode = 'A'.charCodeAt(0);
    for (var r = 0; r < rows; r++) {
        var row = {};
        for (var c = 0; c < columns; c++) {
            row["" + c] = String.fromCharCode(charCode + r) + "-" + c;
        }
        data.push(row);
    }
    return data;
}
export var DetailsListColumnResizeExample = function (props) {
    var _a = React.useState(1), rows = _a[0], setRowCount = _a[1];
    var _b = React.useState(4), columns = _b[0], setColumns = _b[1];
    var allTablesData = React.useMemo(function () {
        var temp = [];
        for (var x = 0; x < 2; x++) {
            temp.push(createTableData(rows, columns));
        }
        return temp;
    }, [columns, rows]);
    var tableColumns = React.useMemo(function () {
        var temp = [];
        for (var t = 0; t < 2; t++) {
            var tableCols = [];
            for (var c = 0; c < columns /* - t*/; c++) {
                var colVal = "" + c;
                tableCols.push({
                    key: colVal,
                    fieldName: colVal,
                    minWidth: 100,
                    maxWidth: 300,
                    name: colVal,
                    isResizable: true,
                });
            }
            temp.push(tableCols);
        }
        return temp;
    }, [columns]);
    var adjustRows = function (modifier) {
        if (modifier === void 0) { modifier = 1; }
        return function (val) {
            var num = Number(val);
            console.log('num: ', num);
            setRowCount(num + modifier);
        };
    };
    var adjustColumns = function (modifier) {
        if (modifier === void 0) { modifier = 1; }
        return function (val) {
            var num = Number(val);
            console.log('num: ', num);
            setColumns(num + modifier);
        };
    };
    var validate = React.useCallback(function (val) { return val; }, []);
    return (React.createElement(React.Fragment, null,
        React.createElement(SpinButton, { value: '' + rows, label: 'Rows per table: ', min: 0, step: 1, onIncrement: adjustRows(), onDecrement: adjustRows(-1), onValidate: validate }),
        React.createElement(SpinButton, { value: '' + columns, label: 'Columns per table: ', min: 0, step: 1, onIncrement: adjustColumns(), onDecrement: adjustColumns(-1), onValidate: validate }),
        React.createElement("div", null,
            React.createElement(Text, { block: true, variant: "xLarge" }, 'Table without columns provided'),
            React.createElement(DetailsList, { items: allTablesData[0], constrainMode: ConstrainMode.unconstrained, layoutMode: DetailsListLayoutMode.justified, selectionMode: SelectionMode.none }),
            React.createElement(Separator, null),
            React.createElement(Text, { block: true, variant: "xLarge" }, 'Table with columns provided'),
            React.createElement(DetailsList, { items: allTablesData[1], columns: tableColumns[1], constrainMode: ConstrainMode.unconstrained, layoutMode: DetailsListLayoutMode.justified, selectionMode: SelectionMode.none }))));
};
//# sourceMappingURL=DetailsList.ColumnResize.Example.js.map