import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { createElement as _createElement } from "react";
import { createContext, useCallback, useContext, useState, } from "react";
import { Notification as NotificationCmp } from "../../components/new/notification/notification";
import styled from "styled-components";
import { NOTIFICATION } from "../../constants/z-index";
import { NOTIFICATION as NOTIFICATION_TIMEOUT } from "../../constants/timers";
const Container = styled.div `
  z-index: ${NOTIFICATION};
  display: flex;
  flex-flow: column nowrap;
  row-gap: 16px;
  position: fixed;
  top: 0;
  right: 0;
  width: fit-content;
  height: 0;
  overflow-y: visible;
  margin-top: 86px;
  margin-right: 24px;
`;
const Ctx = createContext({
    close(id) {
        throw new Error("not implemented");
    },
    notify(notification) {
        throw new Error("not implemented");
    },
});
const NotificationCtx = ({ children }) => {
    const [notifications, setNotifications] = useState([]);
    const close = useCallback((closeId) => {
        setNotifications((prev) => prev.filter(({ id }) => id !== closeId));
    }, []);
    const notify = useCallback((notification) => {
        const id = ~~(Math.random() * 1e9);
        setTimeout(() => {
            close(id);
        }, NOTIFICATION_TIMEOUT);
        setNotifications((prev) => prev.concat({ ...notification, id }));
        return id;
    }, [close]);
    return _jsxs(Ctx.Provider, { value: { close, notify }, children: [_jsx(Container, { children: notifications.map((notification, key) => _createElement(NotificationCmp, { onClose: () => close(notification.id), ...notification, key: key })).reverse() }), children] });
};
NotificationCtx.displayName = "notification";
export const useNotification = () => useContext(Ctx);
export const NotificationProvider = NotificationCtx;
//# sourceMappingURL=index.js.map