'use strict';

var React = require('react');
var Glimmer = require('./Glimmer-cjs.js');
var DataListContext = require('./DataListContext-cjs.js');
var useActiveLayout = require('./useActiveLayout-cjs.js');

var styles = {"wrapper":"_85AuDa3YmT4-","loadingItem":"_7DSXt2KpxYc-","glimmer":"_80Ger-sdJDc-","spinning":"ZL6R4NENP64-"};

const LOADING_STATE_LIMIT_ITEMS = 10;
const DATALIST_LOADINGSTATE_ROW_TEST_ID = "ATL-DataList-LoadingState-Row";
function DataListLoadingState() {
    const { headers } = DataListContext.useDataListContext();
    const { layout, activeBreakpoint } = useActiveLayout.useActiveLayout();
    if (!layout)
        return null;
    const glimmerSize = activeBreakpoint === "xs" ? "small" : "large";
    const glimmersFromHeader = Object.keys(headers).reduce((data, key) => (Object.assign(Object.assign({}, data), { [key]: (React.createElement("div", { className: styles.glimmer },
            React.createElement(Glimmer.Glimmer, { size: glimmerSize }))) })), {});
    const loadingData = new Array(LOADING_STATE_LIMIT_ITEMS).fill(glimmersFromHeader);
    return (React.createElement("div", { className: styles.wrapper }, loadingData.map((child, i) => (React.createElement("div", { key: i, className: styles.loadingItem, "data-testid": DATALIST_LOADINGSTATE_ROW_TEST_ID }, layout(child))))));
}

exports.DATALIST_LOADINGSTATE_ROW_TEST_ID = DATALIST_LOADINGSTATE_ROW_TEST_ID;
exports.DataListLoadingState = DataListLoadingState;
exports.LOADING_STATE_LIMIT_ITEMS = LOADING_STATE_LIMIT_ITEMS;
