"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 Card_1 = __importDefault(require("@mui/material/Card"));
var CardContent_1 = __importDefault(require("@mui/material/CardContent"));
var TableContainer_1 = __importDefault(require("@mui/material/TableContainer"));
var Table_1 = __importDefault(require("@mui/material/Table"));
var TableHead_1 = __importDefault(require("@mui/material/TableHead"));
var TableRow_1 = __importDefault(require("@mui/material/TableRow"));
var TableCell_1 = __importDefault(require("@mui/material/TableCell"));
var TableBody_1 = __importDefault(require("@mui/material/TableBody"));
var Table_2 = require("./Table");
// import { TableRowLoading } from './Table/TableRow';
// import { Index, TableCellProps } from 'react-virtualized';
// import { ColumnData } from './Table/VirtualizedTable';
// import TableHeadSelect from './Table/TableHead/TableHeadSelect';
// import TableCellSelect from './Table/TableCell/TableCellSelect';
// import {
//   TableCellDateTime,
//   TableCellDateTimeRange,
//   TableCellDefault,
//   TableCellProduct
// } from './Table/TableCell';
// import { ContentEllipseMode } from './Table/TableCell/TableCellDefault';
var TableCellProduct_1 = __importDefault(require("./Table/TableCell/TableCellProduct"));
var material_1 = require("@mui/material");
var TableHeadDefault_1 = __importDefault(require("./Table/TableHead/TableHeadDefault"));
var useSortParamsRouter_1 = __importDefault(require("../Effect/useSortParamsRouter"));
var colors_1 = require("@mui/material/colors");
var Card_2 = require("./Card");
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: index % 2 === 0,
    hasNoTvLock: true,
    id: '4716YT',
    name: index % 2 === 0
        ? 'Das ist ein Produktname'
        : 'Das ist ein sehr langer Produktname Das ist ein sehr langer Produktname Das ist ein sehr langer ProduktnameDas 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 = Array(200).fill(undefined).map(function (_, index) { return createProductDataVirtualizedTable(index); });
// for (let i = 0; i < 200; i += 1) {
//   productRows.push(createProductDataVirtualizedTable(i));
// }
var tableStyle = { height: 400 };
var DevelopTables = function () {
    var _a = (0, useSortParamsRouter_1.default)({ sortBy: 'name' }), _b = _a[0], sortBy = _b.sortBy, sortDirection = _b.sortDirection, setSort = _a[1];
    var header = React.useCallback(function () { return (React.createElement(TableRow_1.default, { sx: { backgroundColor: colors_1.common.white } }, ["rowIndex", "isProductBundle", "hasNoTvLock", "id", "height", "inStockPool", "productType", "mediaUris",]
        .map(function (key, inde) {
        return React.createElement(TableHeadDefault_1.default, { dataKey: key, key: key, sortBy: sortBy, height: 48, onClick: function () {
                setSort({
                    sortBy: key,
                    sortDirection: sortDirection === 'asc'
                        ? 'desc'
                        : 'asc'
                });
            }, sortDirection: sortDirection, disableSort: inde % 2 === 0, label: key });
    }))); }, [sortBy, sortDirection, setSort]);
    return (React.createElement(React.Fragment, null,
        React.createElement(Card_1.default, { sx: { width: '100%', height: '100%' } },
            React.createElement(Card_2.AppCardContent, { sx: { height: '100%' } },
                React.createElement(Table_2.VirtualizedTable, { 
                    // showRowHoverHighlight
                    data: productRows, style: tableStyle, sortBy: sortBy, sortDirection: sortDirection, fixedHeaderContent: header, itemContent: function (index, row) { return React.createElement(React.Fragment, { key: index },
                        React.createElement(TableCell_1.default, null, row.rowIndex),
                        React.createElement(TableCell_1.default, null, row.isProductBundle ? 'true' : 'false'),
                        React.createElement(TableCell_1.default, null, row.hasNoTvLock ? 'true' : 'false'),
                        React.createElement(TableCell_1.default, null, row.id),
                        React.createElement(TableCell_1.default, null, row.height),
                        React.createElement(TableCell_1.default, null, row.inStockPool ? 'true' : 'false'),
                        React.createElement(TableCell_1.default, null, row.productType),
                        React.createElement(TableCellProduct_1.default, __assign({}, row))); } }))),
        React.createElement(Card_1.default, { sx: { width: '100%' } },
            React.createElement(material_1.Grid, { container: true },
                React.createElement(material_1.Grid, { item: true, xs: 6 },
                    React.createElement(CardContent_1.default, { sx: { height: 300 } },
                        React.createElement(TableContainer_1.default, { sx: { 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(material_1.Grid, { item: true, xs: 6 },
                    React.createElement(CardContent_1.default, { sx: { height: 300 } }))))));
};
exports.default = DevelopTables;
