import React__default from 'react';
import '@emotion/core';
import { _ as __rest, a as __assign, b as __makeTemplateObject } from './_tslib-5c49bd3f.js';
import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
import '@emotion/styled';
import '@emotion/react';
import { s as styled } from './css-efbd0d2d.js';
import './auto-id.esm-bfe8e225.js';
import { u as useCustomCss } from './utilities-357c56e6.js';
import './InputWrapper.js';
import { Checkbox } from './Checkbox.js';

var GridTable = function (_a) {
    var template = _a.template, rows = _a.rows, customCss = _a.customCss, selectable = _a.selectable, checkable = _a.checkable, showRowCount = _a.showRowCount, onRowSelectionChange = _a.onRowSelectionChange, onClick = _a.onClick, summary = _a.summary, props = __rest(_a, ["template", "rows", "customCss", "selectable", "checkable", "showRowCount", "onRowSelectionChange", "onClick", "summary"]);
    var resolvedCss = useCustomCss(customCss);
    var checkedRowsRef = React__default.useRef();
    var _b = React__default.useState({}), checkedRows = _b[0], setCheckedRows = _b[1];
    var lastChecked = React__default.useRef(-1);
    var tableRef = React__default.useRef(null);
    var checkboxRef = React__default.useRef(null);
    var updateRowSelection = React__default.useCallback(function (rows) {
        var result = typeof rows === 'function' ? rows(checkedRowsRef.current) : rows;
        checkedRowsRef.current = result;
        setCheckedRows(result);
        if (onRowSelectionChange) {
            onRowSelectionChange(result);
        }
    }, [onRowSelectionChange]);
    var checkAllRows = function () {
        if (!Object.values(checkedRows).some(function (x) { return x; })) {
            var fullObject = rows.reduce(function (obj, row) {
                obj[row.id] = true;
                return obj;
            }, {});
            updateRowSelection(fullObject);
        }
        else {
            updateRowSelection({});
        }
    };
    var handleInnerRows = React__default.useCallback(function (lastRow, currentRow, checked) {
        var lastRowIndex = rows.findIndex(function (row) { return row.id === lastRow; });
        var currentRowIndex = rows.findIndex(function (row) { return row.id === currentRow; });
        var rowArray = Array(Math.max(lastRowIndex, currentRowIndex) -
            Math.min(lastRowIndex, currentRowIndex) +
            1)
            .fill(currentRowIndex)
            .map(function (x, i) { return rows[Math.min(lastRowIndex, currentRowIndex) + i].id; });
        if (checked) {
            updateRowSelection(function (prevCheckedRows) {
                var newIds = rowArray.reduce(function (obj, id) {
                    obj[id] = false;
                    return obj;
                }, {});
                return __assign(__assign({}, prevCheckedRows), newIds);
            });
        }
        else {
            updateRowSelection(function (prevCheckedRows) {
                var newIds = rowArray.reduce(function (obj, id) {
                    obj[id] = true;
                    return obj;
                }, {});
                return __assign(__assign({}, prevCheckedRows), newIds);
            });
        }
    }, [rows, updateRowSelection]);
    var onSelection = React__default.useCallback(function (e, rowId) {
        var _a, _b;
        var uncheck = function () {
            return updateRowSelection(function (prevCheckedRows) {
                var _a;
                return (__assign(__assign({}, prevCheckedRows), (_a = {}, _a[rowId] = false, _a)));
            });
        };
        var check = function () {
            return updateRowSelection(function (prevCheckedRows) {
                var _a;
                return (__assign(__assign({}, prevCheckedRows), (_a = {}, _a[rowId] = true, _a)));
            });
        };
        var isChecked = !!checkedRows[rowId];
        if (e.shiftKey && checkable) {
            //shift key was held
            handleInnerRows(lastChecked.current, rowId, isChecked);
        }
        else {
            if ((e.ctrlKey || e.metaKey) && checkable) {
                if (isChecked) {
                    uncheck();
                }
                else {
                    check();
                }
            }
            else {
                //no key was held
                if (isChecked) {
                    if (e.target.nodeName === 'INPUT') {
                        //if the checkbox was clicked
                        uncheck();
                    }
                    else {
                        //the row was clicked
                        updateRowSelection((_a = {}, _a[rowId] = true, _a));
                    }
                }
                else {
                    if (e.target.nodeName === 'INPUT') {
                        check();
                    }
                    else {
                        updateRowSelection((_b = {}, _b[rowId] = true, _b));
                    }
                }
            }
        }
        lastChecked.current = rowId;
    }, [checkable, handleInnerRows, updateRowSelection, checkedRows]);
    return (jsxs(Fragment, { children: [showRowCount && (jsx(RowCountSpan, __assign({ role: "status" }, { children: jsx("span", { children: rows.length > 0 ? "Results: " + rows.length : '' }, void 0) }), void 0)),
            jsxs(Table, __assign({ css: resolvedCss }, props, { ref: tableRef, summary: summary }, { children: [template && rows.length > 0 && (jsx(TableHeader, { children: jsxs(TableRow, { children: [checkable && (jsx(Cell, __assign({ ref: checkboxRef }, { children: jsx(Checkbox, { id: "checkbox", ariaLabel: "select all rows", onChange: function () { return checkAllRows(); }, checked: Object.values(checkedRows).filter(function (x) { return x === true; })
                                            .length === rows.length }, void 0) }), void 0)),
                                template.map(function (t, i) { return (jsx(TableHead, { children: jsx("div", __assign({ style: { display: 'flex', flexDirection: 'row' } }, { children: t.label }), void 0) }, i)); })] }, void 0) }, void 0)),
                    jsx(TableBody, { children: rows &&
                            rows.map(function (row) {
                                return (jsx(Row, { cells: row.cells, template: template, id: row.id, checkable: checkable, selectable: selectable, onSelection: onSelection, checked: !!checkedRows[row.id] }, row.id));
                            }) }, void 0)] }), void 0)] }, void 0));
};
var Table = styled('table')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-align: left;\n  border-spacing: 0;\n  background: transparent;\n  td {\n    padding: 0 1.2em;\n    font-weight: 600;\n    font-size: 0.875em;\n    -webkit-touch-callout: none;\n    -webkit-user-select: none;\n    -khtml-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    &[data-interactive='false'] {\n      cursor: default;\n    }\n    &:focus-visible {\n      outline-color: ", ";\n    }\n  }\n"], ["\n  text-align: left;\n  border-spacing: 0;\n  background: transparent;\n  td {\n    padding: 0 1.2em;\n    font-weight: 600;\n    font-size: 0.875em;\n    -webkit-touch-callout: none;\n    -webkit-user-select: none;\n    -khtml-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    &[data-interactive='false'] {\n      cursor: default;\n    }\n    &:focus-visible {\n      outline-color: ", ";\n    }\n  }\n"])), function (_a) {
    var theme = _a.theme;
    return theme.colors.inputFocus;
});
var TableRow = styled('tr')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 33px;\n  justify-content: flex-start;\n  align-items: center;\n  background: #fff;\n  &:nth-of-type(even) {\n    background: #f2f3f7;\n  }\n  &[data-checked='true'] {\n    background: #a8eeff;\n  }\n"], ["\n  height: 33px;\n  justify-content: flex-start;\n  align-items: center;\n  background: #fff;\n  &:nth-of-type(even) {\n    background: #f2f3f7;\n  }\n  &[data-checked='true'] {\n    background: #a8eeff;\n  }\n"])));
var Cell = styled('td')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 0 1.2em;\n  font-weight: 600;\n  font-size: 0.875em;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  -khtml-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  &[data-interactive='false'] {\n    cursor: default;\n  }\n  &:focus-visible {\n    box-shadow: 0px 0px 0px 3px ", ";\n  }\n"], ["\n  padding: 0 1.2em;\n  font-weight: 600;\n  font-size: 0.875em;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  -khtml-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  &[data-interactive='false'] {\n    cursor: default;\n  }\n  &:focus-visible {\n    box-shadow: 0px 0px 0px 3px ", ";\n  }\n"])), function (_a) {
    var theme = _a.theme;
    return theme.colors.inputFocus;
});
var CheckboxWrapper = styled('div')(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 0.6em 0;\n"], ["\n  padding: 0.6em 0;\n"])));
var TableBody = styled('tbody')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding-top: 20px;\n  background: transprent;\n  box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.29);\n  border-radius: 10px;\n  tr:first-of-type td:first-of-type {\n    border-top-left-radius: 10px;\n  }\n  tr:first-of-type td:last-of-type {\n    border-top-right-radius: 10px;\n  }\n  tr:last-of-type td:first-of-type {\n    border-bottom-left-radius: 10px;\n  }\n  tr:last-of-type td:last-of-type {\n    border-bottom-right-radius: 10px;\n  }\n  tr:first-of-type {\n    border-top-left-radius: 10px;\n    border-top-right-radius: 10px;\n  }\n  tr:last-of-type {\n    border-bottom-left-radius: 10px;\n    border-bottom-right-radius: 10px;\n  }\n"], ["\n  padding-top: 20px;\n  background: transprent;\n  box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.29);\n  border-radius: 10px;\n  tr:first-of-type td:first-of-type {\n    border-top-left-radius: 10px;\n  }\n  tr:first-of-type td:last-of-type {\n    border-top-right-radius: 10px;\n  }\n  tr:last-of-type td:first-of-type {\n    border-bottom-left-radius: 10px;\n  }\n  tr:last-of-type td:last-of-type {\n    border-bottom-right-radius: 10px;\n  }\n  tr:first-of-type {\n    border-top-left-radius: 10px;\n    border-top-right-radius: 10px;\n  }\n  tr:last-of-type {\n    border-bottom-left-radius: 10px;\n    border-bottom-right-radius: 10px;\n  }\n"])));
var TableHeader = styled('thead')(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background: transparent;\n  cursor: default;\n  tr {\n    height: 50px;\n    background: transparent;\n  }\n"], ["\n  background: transparent;\n  cursor: default;\n  tr {\n    height: 50px;\n    background: transparent;\n  }\n"])));
var TableHead = styled('th')(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  padding: 0 1em;\n  font-weight: 600;\n  color: #30323b;\n"], ["\n  padding: 0 1em;\n  font-weight: 600;\n  color: #30323b;\n"])));
var RowCountSpan = styled('span')(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  text-align: right;\n"], ["\n  text-align: right;\n"])));
var Row = React__default.memo(function (_a) {
    var checkable = _a.checkable, selectable = _a.selectable, template = _a.template, cells = _a.cells, id = _a.id, checked = _a.checked, onSelection = _a.onSelection;
    var checkboxRef = React__default.useRef(null);
    var onCheckBoxClick = React__default.useCallback(function (e, id) {
        if (onSelection) {
            onSelection(e, id);
        }
    }, [onSelection]);
    return (jsxs(TableRow, __assign({ id: id, "data-checked": checked }, { children: [checkable && (jsx(Cell, __assign({ ref: checkboxRef }, { children: jsx(CheckboxWrapper, { children: jsx(Checkbox, { id: "checkbox-" + id, ariaLabel: "select this row", onChange: function (_, e) { return onCheckBoxClick(e, id); }, checked: checked }, void 0) }, void 0) }), void 0)),
            template.map(function (t, i) {
                var cellContent = (jsx("div", { children: typeof t.render === 'function'
                        ? t.render(cells[t.id], cells)
                        : cells[t.id] }, i));
                return (jsx(Cell, __assign({ "data-interactive": t.interactive, onClick: function (e) {
                        t.interactive
                            ? null
                            : (selectable || checkable) && onCheckBoxClick(e, id);
                    } }, { children: cellContent }), t.id));
            })] }), void 0));
});
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

export { GridTable };
//# sourceMappingURL=GridTable.js.map
