import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { Button, CloseButton, FormControl, FormLabel, Input, Box, Circle, HStack, Spacer, Text, VStack, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalOverlay, } from "@chakra-ui/react";
import { CheckIcon, CloseIcon, WarningIcon, WarningTwoIcon, } from "@chakra-ui/icons";
import produce from "immer";
import React from "react";
export const ToastNotificationComponent = ({ variant, title, description, onClose }) => {
    const colorScheme = React.useMemo(() => {
        switch (variant) {
            case "error":
                return {
                    bg: "#fce9e7",
                    color: "#901607",
                    icon: _jsx(CloseIcon, { w: "10px", h: "10px" }),
                };
            case "success":
                return {
                    bg: "#ebf5e9",
                    color: "#216416",
                    icon: _jsx(CheckIcon, { w: "10px", h: "10px" }),
                };
            case "info":
                return {
                    bg: "#e6f0ff",
                    color: "#0065ff",
                    icon: _jsx(WarningIcon, { w: "16px", h: "16px" }),
                };
            case "warning":
                return {
                    bg: "#fce9e7",
                    color: "#ee7105",
                    icon: _jsx(WarningTwoIcon, { w: "16px", h: "16px" }),
                };
            case "muted":
                return {
                    bg: "gray.100",
                    color: "gray.400",
                    icon: _jsx(WarningTwoIcon, { w: "16px", h: "16px" }),
                };
        }
    }, [variant]);
    return (_jsx(Box, Object.assign({ color: colorScheme.color, p: "13.67px", bg: colorScheme.bg, borderRadius: "8px" }, { children: _jsxs(HStack, Object.assign({ spacing: "13.67px" }, { children: [_jsx(Box, Object.assign({ alignSelf: "start" }, { children: variant === "error" || variant === "success" ? (_jsx(Circle, Object.assign({ size: "16.67px", mt: "5px", bg: colorScheme.color, color: colorScheme.bg }, { children: colorScheme.icon }))) : (colorScheme.icon) })), _jsxs(Box, { children: [_jsx(Text, Object.assign({ color: colorScheme.color, fontWeight: "bold" }, { children: title })), _jsx(Text, Object.assign({ color: colorScheme.color }, { children: description }))] }), _jsx(Spacer, {}), _jsx(CloseButton, { alignSelf: "start", onClick: onClose })] })) })));
};
export const ToastEditorModal = ({ onClose, variant, value, onSave }) => {
    const [state, setState] = React.useState(value);
    const handleChange = React.useCallback((e) => {
        setState((state) => produce(state, (draft) => {
            draft[e.target.name] = e.target.value;
        }));
    }, []);
    const handleClose = React.useCallback(() => {
        setState(value);
        onClose();
    }, [value]);
    const handleSave = React.useCallback(() => {
        onSave(state);
        onClose();
    }, [state, handleClose]);
    return (_jsxs(Modal, Object.assign({ isOpen: true, onClose: handleClose }, { children: [_jsx(ModalOverlay, {}), _jsxs(ModalContent, { children: [_jsxs(ModalHeader, Object.assign({ fontSize: "lg" }, { children: ["Edit ", variant, " message"] })), _jsxs(ModalBody, { children: [_jsxs(VStack, Object.assign({ spacing: "16px" }, { children: [_jsxs(FormControl, Object.assign({ id: "title" }, { children: [_jsx(FormLabel, Object.assign({ fontWeight: "normal" }, { children: "Title" })), _jsx(Input, { name: "title", defaultValue: state.title, onChange: handleChange, size: "sm" })] })), _jsxs(FormControl, Object.assign({ id: "description" }, { children: [_jsx(FormLabel, Object.assign({ fontWeight: "normal" }, { children: "Description" })), _jsx(Input, { name: "description", defaultValue: state.description, onChange: handleChange, size: "sm" })] })), _jsx(Button, Object.assign({ w: "full", bg: "#0065ff", color: "white", colorScheme: "blue", onClick: handleSave, size: "sm" }, { children: "Save change" }))] })), _jsxs(VStack, Object.assign({ spacing: "16px", mt: "32px" }, { children: [_jsx(Text, Object.assign({ fontWeight: "bold" }, { children: "Preview:" })), _jsx(Box, Object.assign({ bg: "#F9F9FA", p: "40px", w: "full" }, { children: _jsx(ToastNotificationComponent, { variant: variant, title: state.title, description: state.description }) })), _jsx(Text, Object.assign({ color: "#6f809a", textAlign: "center" }, { children: "A preview of notification message above will appear on the device's apps screen" }))] }))] }), _jsx(ModalFooter, {})] })] })));
};
export const ToastNotificationContext = React.createContext({
    notification: null,
    closeNotification: () => { },
    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- for createContext type inference
    triggerNotification: (messages, timeout) => { },
});
export const ToastNotificationContextProvider = React.memo(function ToastNotificationContextProvider(props) {
    const [notification, setNotification] = React.useState(null);
    const timeoutRef = React.useRef(null);
    const closeNotification = React.useCallback(() => setNotification(null), []);
    const triggerNotification = React.useCallback((message, timeout = 5000) => {
        clearTimeout(timeoutRef.current);
        setNotification(message);
        timeoutRef.current = setTimeout(() => setNotification(null), timeout);
    }, []);
    const contextValue = React.useMemo(() => ({
        notification,
        closeNotification,
        triggerNotification,
    }), [notification, closeNotification, triggerNotification]);
    return (_jsx(ToastNotificationContext.Provider, Object.assign({ value: contextValue }, { children: props.children })));
});
const ToastNotification = () => {
    const { notification, closeNotification } = React.useContext(ToastNotificationContext);
    return notification ? (_jsxs(Modal, Object.assign({ isOpen: true, onClose: closeNotification }, { children: [_jsx(ModalOverlay, { backgroundColor: "transparent" }), _jsx(ModalContent, Object.assign({ position: "absolute", bottom: "10px", boxShadow: "none", backgroundColor: "transparent", px: "2%" }, { children: _jsx(Box, Object.assign({ p: 4 }, { children: _jsx(ToastNotificationComponent, { variant: notification.variant, title: notification.title, description: notification.description, onClose: closeNotification }) })) }))] }))) : null;
};
export default ToastNotification;
//# sourceMappingURL=ToastNotification.js.map