"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __assign = (this && this.__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;
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
            t[p[i]] = s[p[i]];
    return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var every = require("lodash/every");
var get = require("lodash/get");
var includes = require("lodash/includes");
var isPlainObject = require("lodash/isPlainObject");
var map = require("lodash/map");
var reject = require("lodash/reject");
var reverse = require("lodash/reverse");
var some = require("lodash/some");
var sortBy = require("lodash/sortBy");
var React = require("react");
var FaSort = require("react-icons/lib/fa/sort");
var styled_components_1 = require("styled-components");
var theme_1 = require("../theme");
var Button_1 = require("./Button");
var Grid_1 = require("./Grid");
var Input_1 = require("./Input");
var highlightStyle = "\n\tbackground-color: " + theme_1.default.colors.info.light + ";\n";
var BaseTable = styled_components_1.default.table(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\twidth: 100%;\n\tborder-spacing: 0;\n\n\t> thead {\n\t\tbackground-color: #f2f2f2;\n\n\t\t> tr > th {\n\t\t\ttext-align: left;\n\t\t\tpadding-left: 40px;\n\t\t\tpadding-top: 10px;\n\t\t\tpadding-bottom: 10px;\n\t\t\tfont-size: 16px;\n\t\t}\n\t}\n\n\t> tbody {\n\t\t> tr {\n\t\t\tcursor: ", ";\n\n\t\t\t> td {\n\t\t\t\ttext-align: left;\n\t\t\t\tfont-size: 14px;\n\t\t\t\tpadding-top: 14px;\n\t\t\t\tpadding-bottom: 14px;\n\t\t\t\tpadding-left: 40px;\n\t\t\t}\n\n\t\t\t&:nth-of-type(even) {\n\t\t\t\tbackground-color: #f8f8f8;\n\t\t\t}\n\n\t\t\t&: hover {\n\t\t\t\t", ";\n\t\t\t}\n\n\t\t\t&[data-checked='true'] {\n\t\t\t\t", " > td:first-child {\n\t\t\t\t\tbox-shadow: inset 3px 0px 0 ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n"], ["\n\twidth: 100%;\n\tborder-spacing: 0;\n\n\t> thead {\n\t\tbackground-color: #f2f2f2;\n\n\t\t> tr > th {\n\t\t\ttext-align: left;\n\t\t\tpadding-left: 40px;\n\t\t\tpadding-top: 10px;\n\t\t\tpadding-bottom: 10px;\n\t\t\tfont-size: 16px;\n\t\t}\n\t}\n\n\t> tbody {\n\t\t> tr {\n\t\t\tcursor: ", ";\n\n\t\t\t> td {\n\t\t\t\ttext-align: left;\n\t\t\t\tfont-size: 14px;\n\t\t\t\tpadding-top: 14px;\n\t\t\t\tpadding-bottom: 14px;\n\t\t\t\tpadding-left: 40px;\n\t\t\t}\n\n\t\t\t&:nth-of-type(even) {\n\t\t\t\tbackground-color: #f8f8f8;\n\t\t\t}\n\n\t\t\t&: hover {\n\t\t\t\t",
    ";\n\t\t\t}\n\n\t\t\t&[data-checked='true'] {\n\t\t\t\t", " > td:first-child {\n\t\t\t\t\tbox-shadow: inset 3px 0px 0 ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n"])), function (props) { return (!!props.onRowClick ? 'pointer' : 'auto'); }, function (props) {
    return !!props.onRowClick || !!props.onCheck ? highlightStyle : '';
}, highlightStyle, theme_1.default.colors.info.main);
var HeaderButton = styled_components_1.default(Button_1.default)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tdisplay: block;\n"], ["\n\tdisplay: block;\n"])));
var renderField = function (row, column) {
    var value = get(row, column.field);
    if (column.render) {
        return column.render(value, row);
    }
    return value == null ? '' : value;
};
var Table = (function (_super) {
    __extends(Table, _super);
    function Table(props) {
        var _this = _super.call(this, props) || this;
        if (props.onCheck && !props.rowKey) {
            throw new Error('A `rowKey` property must be provided if using `onCheck` with a Table component');
        }
        _this.state = {
            allChecked: false,
            reverse: false,
            checkedItems: [],
            sortColumn: null,
        };
        return _this;
    }
    Table.prototype.isChecked = function (item) {
        var rowKey = this.props.rowKey;
        if (!rowKey) {
            return false;
        }
        var identifier = item[rowKey];
        return some(this.state.checkedItems, (_a = {}, _a[rowKey] = identifier, _a));
        var _a;
    };
    Table.prototype.isEachRowChecked = function (checkedItems) {
        var rowKey = this.props.rowKey;
        if (!rowKey) {
            return false;
        }
        var selectedKeys = map(checkedItems, rowKey);
        return every(this.props.data, function (x) { return includes(selectedKeys, x[rowKey]); });
    };
    Table.prototype.sortData = function (data) {
        var _this = this;
        if (this.state.sortColumn === null) {
            return data;
        }
        var collection = sortBy(data.slice(), function (item) {
            var sortableValue = item[_this.state.sortColumn];
            return isPlainObject(sortableValue)
                ? sortableValue.value
                : sortableValue;
        });
        if (this.state.reverse) {
            reverse(collection);
        }
        return collection;
    };
    Table.prototype.toggleAllChecked = function () {
        var allChecked = !this.state.allChecked;
        var checkedItems = allChecked ? this.props.data.slice() : [];
        if (this.props.onCheck) {
            this.props.onCheck(checkedItems);
        }
        this.setState({ allChecked: allChecked, checkedItems: checkedItems });
    };
    Table.prototype.toggleChecked = function (item) {
        var rowKey = this.props.rowKey;
        if (!rowKey) {
            return false;
        }
        var identifier = item[rowKey];
        var isChecked = !this.isChecked(item);
        var checkedItems = isChecked
            ? this.state.checkedItems.concat(item)
            : reject(this.state.checkedItems, (_a = {}, _a[rowKey] = identifier, _a));
        if (this.props.onCheck) {
            this.props.onCheck(checkedItems);
        }
        this.setState({
            allChecked: this.isEachRowChecked(checkedItems),
            checkedItems: checkedItems,
        });
        var _a;
    };
    Table.prototype.toggleSort = function (field) {
        if (this.state.sortColumn === field) {
            this.setState({ reverse: !this.state.reverse });
            return;
        }
        this.setState({
            sortColumn: field,
            reverse: false,
        });
    };
    Table.prototype.render = function () {
        var _this = this;
        var _a = this.props, columns = _a.columns, data = _a.data, rowKey = _a.rowKey, props = __rest(_a, ["columns", "data", "rowKey"]);
        return (React.createElement(BaseTable, __assign({}, props),
            React.createElement("thead", null,
                React.createElement("tr", null,
                    this.props.onCheck && (React.createElement("th", null,
                        React.createElement(Input_1.default, { checked: this.state.allChecked, onChange: function () { return _this.toggleAllChecked(); }, type: "checkbox" }))),
                    map(columns, function (item) {
                        if (item.sortable) {
                            return (React.createElement("th", { key: item.field },
                                React.createElement(HeaderButton, { plaintext: true, primary: _this.state.sortColumn === item.field, onClick: function () { return _this.toggleSort(item.field); } },
                                    React.createElement(Grid_1.Flex, { align: "center" },
                                        item.label || item.field,
                                        "\u00A0",
                                        React.createElement(FaSort, { color: _this.state.sortColumn === item.field
                                                ? theme_1.default.colors.info.main
                                                : '' })))));
                        }
                        return React.createElement("th", { key: item.field }, item.label);
                    }))),
            React.createElement("tbody", null,
                this.props.tbodyPrefix,
                map(this.sortData(data), function (row, i) {
                    var isChecked = _this.props.onCheck ? _this.isChecked(row) : false;
                    return (React.createElement("tr", { "data-checked": isChecked, key: rowKey ? row[rowKey] : i, onClick: function () {
                            return _this.props.onRowClick && _this.props.onRowClick(row);
                        } },
                        _this.props.onCheck && (React.createElement("td", null,
                            React.createElement(Input_1.default, { checked: isChecked, onChange: function () { return _this.toggleChecked(row); }, type: "checkbox" }))),
                        map(columns, function (column) {
                            return React.createElement("td", { key: column.field }, renderField(row, column));
                        })));
                }))));
    };
    return Table;
}(React.Component));
exports.default = Table;
var templateObject_1, templateObject_2;
