"use strict";
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
/* @flow */
const React = __importStar(require("react"));
const prop_types_1 = __importDefault(require("prop-types"));
const get_1 = __importDefault(require("lodash/get"));
const classnames_1 = __importDefault(require("classnames"));
const Table_1 = __importDefault(require("@material-ui/core/Table"));
const TableBody_1 = __importDefault(require("@material-ui/core/TableBody"));
const TableCell_1 = __importDefault(require("@material-ui/core/TableCell"));
const TableHead_1 = __importDefault(require("@material-ui/core/TableHead"));
const TableRow_1 = __importDefault(require("@material-ui/core/TableRow"));
const withStyles_1 = __importDefault(require("components/hoc/withStyles"));
const TriangleArrow_1 = __importDefault(require("components/bosons/TriangleArrow"));
const ErrorBoundary_1 = __importDefault(require("components/hoc/ErrorBoundary"));
const Loading_1 = __importDefault(require("components/bosons/Loading"));
const ScrollObserver_1 = __importDefault(require("components/hoc/ScrollObserver"));
const styles_1 = __importDefault(require("./styles"));
class Table extends React.PureComponent {
    constructor() {
        super(...arguments);
        this._onRequestSort = column => event => {
            const { sortable } = this.props;
            if (!sortable || column.notSortable) {
                return;
            }
            if (this.props.onRequestSort) {
                this.props.onRequestSort(column);
            }
        };
        this._onRemoveClicked = row => event => {
            if (this.props.onRemoveClicked) {
                this.props.onRemoveClicked(row, event);
            }
        };
        this._onAddClicked = row => event => {
            if (this.props.onAddClicked) {
                this.props.onAddClicked(row, event);
            }
        };
        this._onRowClick = row => event => {
            const { onRowClick } = this.props;
            if (onRowClick) {
                onRowClick(event, row);
            }
        };
        this._onCellClick = ({ row, column, index }) => e => {
            const { onCellClick } = this.props;
            if (onCellClick) {
                onCellClick(e, { row, column, index });
            }
        };
    }
    _renderSortIcon(column) {
        const { classes } = this.props;
        if (!column.sorted) {
            return (React.createElement("div", { className: classes.sortIconWrapper },
                React.createElement(TriangleArrow_1.default, { color: '#B7B7B7', direction: 'up', size: 5 }),
                React.createElement(TriangleArrow_1.default, { color: '#B7B7B7', classes: { component: classes.downArrow }, direction: 'down', size: 5 })));
        }
        return (React.createElement("div", { className: classes.sortIconWrapper },
            column.sorted &&
                column.order === 'asc' && (React.createElement(TriangleArrow_1.default, { color: '#B7B7B7', direction: 'up', size: 5 })),
            column.sorted &&
                column.order === 'desc' && (React.createElement(TriangleArrow_1.default, { color: '#B7B7B7', direction: 'down', size: 5 }))));
    }
    _renderHeader() {
        const { columnData, classes, sortable, showRemoveIcon, showAddIcon, } = this.props;
        return (React.createElement(TableHead_1.default, null,
            React.createElement(TableRow_1.default, null,
                columnData.map((column, index) => (React.createElement(TableCell_1.default, { key: index, className: classnames_1.default(classes.tableHeaderCellWrapper, get_1.default(column, 'classes.tableHeaderCellWrapper', '')) },
                    React.createElement("div", { className: classes.tableHeaderCell, onClick: this._onRequestSort(column) },
                        React.createElement("div", { className: classnames_1.default(classes.tableHeaderText, {
                                'sorted-column': column.sorted && sortable,
                            }) }, column.label),
                        sortable &&
                            !column.notSortable &&
                            this._renderSortIcon(column))))),
                showAddIcon && React.createElement(TableCell_1.default, { padding: "checkbox" }),
                showRemoveIcon && React.createElement(TableCell_1.default, { padding: "checkbox" }))));
    }
    _renderData() {
        const { columnData, data, classes, showRemoveIcon, showAddIcon, cellStyler, loading, } = this.props;
        let totalColumns = columnData.length;
        if (showAddIcon) {
            totalColumns++;
        }
        if (showRemoveIcon) {
            totalColumns++;
        }
        return (React.createElement(TableBody_1.default, null,
            data.map((row, index) => (React.createElement(TableRow_1.default, { "data-test": `row-${index}`, classes: { root: classes.tableRowRoot }, key: index, onClick: this._onRowClick(row) },
                columnData.map((column, index) => {
                    const columnClasses = column.classes || {};
                    const cellText = row[column.id] !== '' && typeof row[column.id] !== 'undefined'
                        ? row[column.id]
                        : column.default || '—';
                    const cellTextDom = (React.createElement("span", { className: classnames_1.default(classes.cellValueText, columnClasses.cellValueText) }, cellText));
                    return (React.createElement(TableCell_1.default, { "data-test": `cell-${cellText}-${index}`, className: classnames_1.default(classes.tableCellRoot, columnClasses.tableCellRoot), onClick: this._onCellClick({ row, column, index }), key: index },
                        React.createElement("div", { className: classnames_1.default(classes.cellValue, columnClasses.cellValue, cellStyler ? cellStyler(row, column) : '') }, this.props.cellRenderer
                            ? this.props.cellRenderer(row, column, cellTextDom)
                            : cellTextDom)));
                }),
                showAddIcon && (React.createElement(TableCell_1.default, { className: classnames_1.default(classes.tableCellRoot, classes.closeIconCellRoot), padding: "checkbox", onClick: this._onAddClicked(row) },
                    React.createElement("div", { className: classes.closeIcon },
                        React.createElement("i", { className: classnames_1.default('ion-plus') })))),
                showRemoveIcon && (React.createElement(TableCell_1.default, { className: classnames_1.default(classes.tableCellRoot, classes.closeIconCellRoot), padding: "checkbox", onClick: this._onRemoveClicked(row) },
                    React.createElement("div", { className: classes.closeIcon },
                        React.createElement("i", { className: classnames_1.default('icon icon-close') }))))))),
            data.length === 0 &&
                !loading && (React.createElement(TableRow_1.default, { classes: { root: classes.tableRowRoot } },
                React.createElement(TableCell_1.default, { className: classes.tableCellRoot, padding: "none", colSpan: totalColumns },
                    React.createElement("div", { className: classes.noDatCell }, "No data to display")))),
            React.createElement(TableRow_1.default, { classes: {
                    root: classnames_1.default(classes.tableRowRoot, !loading ? classes.hideLoading : ''),
                } },
                React.createElement(TableCell_1.default, { className: classes.tableCellRoot, padding: "none", colSpan: totalColumns },
                    React.createElement("div", { className: classes.loadingCell },
                        React.createElement(Loading_1.default, { size: 30 }))))));
    }
    _renderTable() {
        const { classes } = this.props;
        return (React.createElement(Table_1.default, { className: classnames_1.default(classes.tableRoot) },
            this._renderHeader(),
            this._renderData()));
    }
    render() {
        let { classes, onBottomReached, onTopReached, onBottomReachedThreshold, onTopReachedThreshold, } = this.props;
        return (React.createElement(ErrorBoundary_1.default, null,
            React.createElement(ScrollObserver_1.default, { onBottomReachedThreshold: onBottomReachedThreshold, onBottomReached: onBottomReached, onTopReachedThreshold: onTopReachedThreshold, onTopReached: onTopReached },
                React.createElement("div", { className: classes.component }, this._renderTable()))));
    }
}
Table.propTypes = Object.assign({ columnData: prop_types_1.default.arrayOf(prop_types_1.default.shape({
        id: prop_types_1.default.string.isRequired,
        label: prop_types_1.default.string.isRequired,
        sorted: prop_types_1.default.bool,
        order: prop_types_1.default.oneOf(['asc', 'desc']),
        type: prop_types_1.default.oneOf(['string', 'date', 'number']),
        classes: prop_types_1.default.object,
    })).isRequired, data: prop_types_1.default.array.isRequired, onRowClick: prop_types_1.default.func, onCellClick: prop_types_1.default.func, sortable: prop_types_1.default.bool, stripe: prop_types_1.default.bool, onRequestSort: prop_types_1.default.func, showRemoveIcon: prop_types_1.default.bool, onRemoveClicked: prop_types_1.default.func, showAddIcon: prop_types_1.default.bool, onAddClicked: prop_types_1.default.func, cellStyler: prop_types_1.default.func, cellRenderer: prop_types_1.default.func, loading: prop_types_1.default.bool }, ScrollObserver_1.default.propTypes, { classes: prop_types_1.default.object });
Table.defaultProps = {
    stripe: true,
    sortable: true,
    columnData: [],
    data: [],
    onRowClick: () => { },
    onCellClick: () => { },
    onRequestSort: () => { },
    onRemoveClicked: () => { },
    showRemoveIcon: true,
    showAddIcon: false,
    onAddClicked: () => { },
    cellStyler: () => '',
    loading: false,
    onBottomReachedThreshold: 200,
    onTopReachedThreshold: 200,
};
exports.default = withStyles_1.default(styles_1.default)(Table);
//# sourceMappingURL=index.js.map