"use strict";
exports.__esModule = true;
exports.useBreakpoints = void 0;
var tslib_1 = require("tslib");
var react_1 = require("react");
var defaultPoints = [
    '5xs',
    '4xs',
    '3xs',
    '2xs',
    'xs',
    's',
    'm',
    'l',
    'xl',
    '2xl',
    '3xl',
    '4xl',
    '5xl',
];
var defaultMap = {
    '5xs': 320,
    '4xs': 360,
    '3xs': 480,
    '2xs': 720,
    'xs': 960,
    's': 1020,
    'm': 1200,
    'l': 1400,
    'xl': 1600,
    '2xl': 1800,
    '3xl': 2000,
    '4xl': 2200,
    '5xl': 2400
};
var mapping = function (width, map) {
    var points = {};
    for (var key in map) {
        if (Object.prototype.hasOwnProperty.call(map, key)) {
            points[key] = width >= map[key];
        }
    }
    return points;
};
var isEq = function (state, newState) {
    var eq = true;
    for (var key in newState) {
        if (state[key] !== newState[key]) {
            eq = false;
            return eq;
        }
    }
    return eq;
};
var useBreakpoints = function (map) {
    var pointsMap = map || defaultMap;
    var _a = (0, tslib_1.__read)((0, react_1.useState)(function () {
        return mapping(document.documentElement.clientWidth, pointsMap);
    }), 2), points = _a[0], setSetPoints = _a[1];
    (0, react_1.useLayoutEffect)(function () {
        var subscribe = function () {
            var newPoints = mapping(document.documentElement.clientWidth, pointsMap);
            setSetPoints(function (state) { return (isEq(state, newPoints) ? state : newPoints); });
        };
        window.addEventListener('resize', subscribe);
        return function () { return window.removeEventListener('resize', subscribe); };
    }, []);
    return points;
};
exports.useBreakpoints = useBreakpoints;
