import { _ as __rest } from './tslib.es6-es.js';
import React__default, { createContext, useContext, useState } from 'react';
import classnames from 'classnames';
import { useResizeObserver } from '@jobber/hooks';
import { I as Icon } from './Icon-es.js';
import { B as ButtonDismiss } from './ButtonDismiss-es.js';
import { B as Button } from './Button-es.js';
import { T as Text } from './Text-es.js';

var styles = {"banner":"ucGelS5nNm0-","notice":"_5VzH3Cz9ps8-","error":"_16jyB9OYJIs-","warning":"_4h-6cc8lZo8-","success":"k7T2IV0R8Q0-","bannerChildren":"dG2vHE6g8f0-","bannerContent":"j9IeihCCYxI-","medium":"D5X29shmSr0-","bannerAction":"W0pSTO-oRmk-","closeButton":"-IYYDBmq2Q0-","iconWrapper":"BQhacg0OlMs-","successIcon":"wc5os7zGk30-","errorIcon":"R0t3TbhBBqo-","warningIcon":"i5fVmbzbYVM-","noticeIcon":"onwyp3UI3so-","spinning":"fZdByimVT5Q-"};

const BannerContext = createContext({
    type: "success",
    isVisible: true,
    setIsVisible: () => {
        // noop
    },
});
const BannerContextProvider = BannerContext.Provider;
function useBanner() {
    return useContext(BannerContext);
}

function Banner({ children, type, primaryAction, dismissible = true, icon, onDismiss, controlledVisiblity, }) {
    if (primaryAction != undefined) {
        primaryAction = Object.assign({
            size: "small",
            type: "primary",
            variation: "subtle",
        }, primaryAction);
    }
    return (React__default.createElement(Banner.Provider, { type: type, visible: controlledVisiblity, onDismiss: onDismiss, icon: React__default.createElement(Banner.Icon, { name: icon }), dismissButton: dismissible && React__default.createElement(Banner.DismissButton, null) },
        React__default.createElement(Banner.Content, null, children),
        primaryAction && React__default.createElement(Banner.Action, Object.assign({}, primaryAction))));
}
Banner.Provider = function BannerProvider({ children, visible, type, onDismiss, icon, dismissButton, UNSAFE_className, UNSAFE_style, }) {
    const [isVisible, _setIsVisible] = useState(true);
    const showBanner = visible !== null && visible !== void 0 ? visible : isVisible;
    const setIsVisible = (newValue) => {
        // Only update internal visibility if it's not controlled by the parent.
        if (typeof visible === "undefined") {
            _setIsVisible(newValue);
        }
        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
    };
    return (React__default.createElement(BannerContextProvider, { value: {
            type,
            isVisible: showBanner,
            setIsVisible,
        } },
        React__default.createElement(InternalWrapper, { icon: icon, dismissButton: dismissButton, UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style }, children)));
};
function InternalWrapper({ children, icon, dismissButton, UNSAFE_className, UNSAFE_style, }) {
    const { isVisible, type } = useBanner();
    const bannerWidths = {
        small: 320,
        medium: 480,
    };
    const [bannerRef, { width: bannerWidth = bannerWidths.small }] = useResizeObserver({
        widths: bannerWidths,
    });
    const bannerClassNames = classnames(styles.banner, [styles[type]], {
        [styles.medium]: bannerWidth >= bannerWidths.medium,
    }, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container);
    if (!isVisible)
        return null;
    return (React__default.createElement("div", { ref: bannerRef, className: bannerClassNames, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container, role: type === "error" ? "alert" : "status" },
        React__default.createElement("div", { className: styles.bannerContent }, icon !== null && icon !== void 0 ? icon : React__default.createElement(Banner.Icon, null),
            children), dismissButton !== null && dismissButton !== void 0 ? dismissButton : React__default.createElement(Banner.DismissButton, null)));
}
Banner.Icon = function BannerIcon(_a) {
    var { backgroundColor, UNSAFE_className, UNSAFE_style } = _a, iconProps = __rest(_a, ["backgroundColor", "UNSAFE_className", "UNSAFE_style"]);
    const { type } = useBanner();
    const name = iconProps.name || getBannerIcon(type);
    const color = iconProps.customColor ? undefined : "surface";
    const size = "small";
    if (!name)
        return null;
    const overrideStyles = {};
    if (backgroundColor) {
        overrideStyles.backgroundColor = `var(--color-${backgroundColor})`;
    }
    const classNames = classnames(styles.iconWrapper, styles[`${type}Icon`], UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container);
    return (React__default.createElement("span", { className: classNames, style: Object.assign(Object.assign({}, overrideStyles), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container) },
        React__default.createElement(Icon, Object.assign({ color: color, size: size, UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.icon, UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.icon }, iconProps, { name: name }))));
};
Banner.Content = function BannerContent(props) {
    var _a, _b;
    let children = props.children;
    if (children && typeof children === "string") {
        children = React__default.createElement(Text, null, children);
    }
    return (React__default.createElement("div", { className: classnames(styles.bannerChildren, (_a = props.UNSAFE_className) === null || _a === void 0 ? void 0 : _a.container), style: (_b = props.UNSAFE_style) === null || _b === void 0 ? void 0 : _b.container }, children));
};
Banner.DismissButton = function DismissButton(props) {
    var _a, _b, _c, _d;
    const { setIsVisible } = useBanner();
    const ariaLabel = (_a = props.ariaLabel) !== null && _a !== void 0 ? _a : "Dismiss notification";
    const onClick = (_b = props.onClick) !== null && _b !== void 0 ? _b : (() => {
        setIsVisible(false);
    });
    return (React__default.createElement("div", { className: classnames(styles.closeButton, (_c = props.UNSAFE_className) === null || _c === void 0 ? void 0 : _c.container), style: (_d = props.UNSAFE_style) === null || _d === void 0 ? void 0 : _d.container },
        React__default.createElement(ButtonDismiss, { onClick: onClick, ariaLabel: ariaLabel })));
};
Banner.Action = function Action(_a) {
    var { UNSAFE_className, UNSAFE_style } = _a, buttonProps = __rest(_a, ["UNSAFE_className", "UNSAFE_style"]);
    const classNames = classnames(styles.bannerAction, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container);
    return (React__default.createElement("div", { className: classNames, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container },
        React__default.createElement(Button, Object.assign({ size: "small", type: "primary", variation: "subtle", UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.button, UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.button }, buttonProps))));
};
function getBannerIcon(type) {
    switch (type) {
        case "notice":
            return "info";
        case "success":
            return "checkmark";
        case "warning":
            return "warning";
        case "error":
            return "alert";
    }
}

export { Banner as B };
