"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
        if (ar || !(i in from)) {
            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
            ar[i] = from[i];
        }
    }
    return to.concat(ar || Array.prototype.slice.call(from));
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
/* eslint-disable max-lines */
var React = __importStar(require("react"));
var react_1 = require("react");
var Card_1 = __importDefault(require("@material-ui/core/Card"));
var CardContent_1 = __importDefault(require("@material-ui/core/CardContent"));
var TableContainer_1 = __importDefault(require("@material-ui/core/TableContainer"));
var Table_1 = __importDefault(require("@material-ui/core/Table"));
var TableHead_1 = __importDefault(require("@material-ui/core/TableHead"));
var TableRow_1 = __importDefault(require("@material-ui/core/TableRow"));
var TableCell_1 = __importDefault(require("@material-ui/core/TableCell"));
var TableBody_1 = __importDefault(require("@material-ui/core/TableBody"));
var Table_2 = require("./Table");
var TableRow_2 = require("./Table/TableRow");
var TableHeadSelect_1 = __importDefault(require("./Table/TableHead/TableHeadSelect"));
var TableCellSelect_1 = __importDefault(require("./Table/TableCell/TableCellSelect"));
var TableCell_2 = require("./Table/TableCell");
var TableCellDefault_1 = require("./Table/TableCell/TableCellDefault");
var core_1 = require("@material-ui/core");
var tableRowHeight = 48;
var columns = [
    {
        width: 50,
        dataKey: 'select',
        disableSort: true,
        headerRenderer: function () { return (
        // eslint-disable-next-line no-console
        React.createElement(TableHeadSelect_1.default, { checked: false, onChange: console.log, height: tableRowHeight })); },
        cellRenderer: function (cellProps) { return (
        // eslint-disable-next-line no-console
        React.createElement(TableCellSelect_1.default, { checked: false, value: cellProps.cellData, onChange: console.log, height: tableRowHeight })); }
    },
    {
        width: function (width) { return width - (120 * 4); },
        label: 'Dessert (100g serving)',
        dataKey: 'dessert',
        disableSort: true,
        cellRenderer: function (cellProps) { return (React.createElement(TableCell_2.TableCellDefault, { height: tableRowHeight, cellData: cellProps.cellData, contentEllipseMode: TableCellDefault_1.ContentEllipseMode.Lines, contentEllipseLines: 2 })); }
    },
    {
        width: 120,
        label: 'Calories\u00A0(g)',
        dataKey: 'calories'
    },
    {
        width: 120,
        label: 'Fat\u00A0(g)',
        dataKey: 'fat'
    },
    {
        width: 120,
        label: 'Carbs\u00A0(g)',
        dataKey: 'carbs'
    },
    {
        width: 220,
        label: 'Datum (Range)',
        dataKey: 'datetimeRange',
        cellRenderer: function (cellProps) { return React.createElement(TableCell_2.TableCellDateTimeRange, { cellData: cellProps.cellData, height: tableRowHeight }); }
    },
    {
        width: 180,
        label: 'Datum',
        dataKey: 'datetime',
        cellRenderer: function (cellProps) { return React.createElement(TableCell_2.TableCellDateTime, { cellData: cellProps.cellData, height: tableRowHeight }); }
    }
];
var rows = [];
var sample = [
    ['Frozen yoghurt Frozen yoghurt Frozen yoghurt Frozen yoghurt Frozen yoghurt Frozen yoghurt Frozen yoghurt Frozen yoghurt Frozen yoghurt Frozen yoghurt Frozen yoghurt Frozen yoghurt Frozen yoghurt Frozen yoghurt Frozen yoghurt Frozen yoghurt Frozen yoghurt Frozen yoghurt Frozen yoghurt Frozen yoghurt Frozen yoghurt Frozen yoghurt Frozen yoghurt Frozen yoghurt Frozen yoghurt Frozen yoghurt Frozen yoghurt Frozen yoghurt Frozen yoghurt Frozen yoghurt Frozen yoghurt Frozen yoghurt', 159, 6.0, 24, {
            start: null,
            end: null,
            isLiveShow: false
        }, null],
    ['Ice cream sandwich', 237, 9.0, 37, { start: new Date(), end: new Date(), isLiveShow: false }, new Date()],
    ['Eclair', 262, 16.0, 24, { start: new Date(2021, 9, 23, 8, 0, 15), end: new Date(), isLiveShow: false }, new Date()],
    ['Cupcake', 305, 3.7, 67, { start: new Date(), end: new Date(), isLiveShow: false }, new Date()],
    ['Gingerbread', 356, 16.0, 49, { start: new Date(), end: new Date(), isLiveShow: false }, new Date()]
];
var createDataVirtualizedTable = function (id, dessert, calories, fat, carbs, datetimeRange, datetime) { return ({
    id: id,
    dessert: dessert,
    calories: calories,
    fat: fat,
    carbs: carbs,
    datetimeRange: datetimeRange,
    datetime: datetime
}); };
for (var i = 0; i < 200; i += 1) {
    var randomSelection = sample[Math.floor(Math.random() * sample.length)];
    rows.push(createDataVirtualizedTable.apply(void 0, __spreadArray([i], randomSelection, false)));
}
var createProductDataVirtualizedTable = function (index) { return ({
    rowIndex: index,
    isProductBundle: true,
    hasNoTvLock: true,
    id: '4716YT',
    name: 'Das ist ein sehr langer Produktname Das ist ein sehr langer Produktname',
    inStockPool: true,
    productType: null,
    mediaUris: [{
            productId: '4716YT',
            uri: 'https://api-test.juwelo.de/media/small/4716YT.jpg'
        }],
    height: 100
}); };
var productRows = [];
for (var i = 0; i < 200; i += 1) {
    productRows.push(createProductDataVirtualizedTable(i));
}
var DevelopTables = function () {
    var noRowsRenderer = (0, react_1.useCallback)(function () { return React.createElement(TableRow_2.TableRowLoading, null); }, []);
    var rowGetter = (0, react_1.useCallback)(function (row) { return rows[row.index]; }, []);
    var productRowGetter = (0, react_1.useCallback)(function (row) { return productRows[row.index]; }, []);
    return (React.createElement(React.Fragment, null,
        React.createElement(Card_1.default, { style: { width: '100%' } },
            React.createElement(CardContent_1.default, { style: { height: 600 } },
                React.createElement(Table_2.VirtualizedTable, { showRowHoverHighlight: true, rowHeight: tableRowHeight, rowCount: rows.length, rowGetter: rowGetter, noRowsRenderer: noRowsRenderer, sortBy: 'calories', sortDirection: 'ASC', columns: columns }))),
        React.createElement(Card_1.default, { style: { width: '100%' } },
            React.createElement(core_1.Grid, { container: true },
                React.createElement(core_1.Grid, { item: true, xs: 6 },
                    React.createElement(CardContent_1.default, { style: { height: 300 } },
                        React.createElement(TableContainer_1.default, { style: { maxHeight: 260 } },
                            React.createElement(Table_1.default, { stickyHeader: true },
                                React.createElement(TableHead_1.default, null,
                                    React.createElement(TableRow_1.default, null, ['calories', 'carbs', 'dessert', 'fat', 'id', 'protein'].map(function (column, index) { return React.createElement(TableCell_1.default, { key: 'column-head-index-' + index }, column); }))),
                                React.createElement(TableBody_1.default, null, rows.map(function (row, index) { return React.createElement(TableRow_1.default, { key: 'row-body-index' + index },
                                    React.createElement(TableCell_1.default, null, row.calories),
                                    React.createElement(TableCell_1.default, null, row.carbs),
                                    React.createElement(TableCell_1.default, null, row.dessert),
                                    React.createElement(TableCell_1.default, null, row.fat),
                                    React.createElement(TableCell_1.default, null, row.id)); })))))),
                React.createElement(core_1.Grid, { item: true, xs: 6 },
                    React.createElement(CardContent_1.default, { style: { height: 300 } },
                        React.createElement(Table_2.VirtualizedTable, { headerHeight: 50, rowHeight: 100, rowCount: 200, rowGetter: productRowGetter, showRowHoverHighlight: true, columns: [
                                {
                                    dataKey: 'product',
                                    width: 400,
                                    cellRenderer: function (cellProps) { return React.createElement(TableCell_2.TableCellProduct, __assign({}, cellProps.rowData)); }
                                }
                            ] })))))));
};
exports.default = React.memo(DevelopTables);
