import React, { useContext, useEffect } from "react";
// Context
import { NotificationsContext } from "../../../notificationsContext";
import { ViewMode, SelectionMode } from "../../../constants";
// Hooks
import { markNotificationsRead, markNotificationsUnread, deleteNotifications, snoozeNotifications, } from "../../../../../hooks/useNotifications";
// Components
import { FinsembleToggleButtonBar } from "../../../../common/FinsembleToggleButtonBar";
import { Button } from "../../../../common/Button";
const DrawerControls = () => {
    const notificationsContext = useContext(NotificationsContext);
    const { viewMode, setViewMode, drawerControlProps, setDrawerControlProps, selectionMode, isSelectAll, setSelectAll, setSelectionMode, checkedNotifications, setCheckedNotifications, } = notificationsContext;
    const isSelectionMode = selectionMode === SelectionMode.SELECTION;
    const toggleControl = (clickedControlAction) => {
        // If we click on the control aready active, then there's nothing to toggle and we bail out.
        if (clickedControlAction === drawerControlProps.active)
            return;
        drawerControlProps.controls.forEach((control) => {
            if (control.action === clickedControlAction) {
                if (drawerControlProps.active === control.action) {
                    delete drawerControlProps.active;
                }
                else {
                    drawerControlProps.active = control.action;
                }
            }
        });
        setDrawerControlProps({ ...drawerControlProps });
    };
    const renderControls = () => (React.createElement(FinsembleToggleButtonBar, { options: drawerControlProps.controls.map((control) => {
            return {
                label: control.label,
                value: control.action,
            };
        }), selected: drawerControlProps.active, onChange: toggleControl, enabled: !isSelectionMode }));
    const toggleSelectAll = () => {
        if (isSelectAll) {
            // this variable is a toggle, therefore
            // if we are currently in select all mode
            // means we are about to unselect all (as in a batch action)
            setCheckedNotifications([]);
        }
        setSelectAll(!isSelectAll);
    };
    const readChecked = () => {
        markNotificationsRead(checkedNotifications);
    };
    const unreadChecked = () => {
        markNotificationsUnread(checkedNotifications);
    };
    const deleteChecked = () => {
        deleteNotifications(checkedNotifications);
    };
    const snoozeChecked = () => {
        snoozeNotifications(checkedNotifications);
    };
    useEffect(() => {
        // unchecks "Select All"
        if (selectionMode === SelectionMode.NO_SELECTION) {
            setSelectAll(false);
            checkedNotifications.length = 0;
        }
    }, [selectionMode, checkedNotifications]);
    return (React.createElement("div", { id: "notifications-center-controls" },
        React.createElement("div", { className: "notifications-center-controls__row" }, renderControls()),
        React.createElement("div", { className: "notifications-center-controls__row" },
            React.createElement(Button, { className: "fsbl-nc_toggle-select-mode", fashion: "primary", iconBefore: isSelectionMode ? "close" : "check", text: "Select", onClick: () => {
                    setSelectionMode(selectionMode === SelectionMode.NO_SELECTION ? SelectionMode.SELECTION : SelectionMode.NO_SELECTION);
                } }),
            isSelectionMode && (React.createElement(Button, { fashion: "primary", text: "Select All", className: "fsbl-nc_select-all", onClick: toggleSelectAll })),
            React.createElement("div", { className: "notifications-center-controls__view_mode" },
                React.createElement(FinsembleToggleButtonBar, { options: [
                        {
                            ariaLabel: "Card View",
                            label: React.createElement("i", { className: "ff-chart-alt-2" }),
                            value: ViewMode.CARD,
                        },
                        {
                            ariaLabel: "List View",
                            label: React.createElement("i", { className: "ff-adp-hamburger" }),
                            value: ViewMode.LIST,
                        },
                    ], onChange: (newValue) => {
                        setSelectionMode(SelectionMode.NO_SELECTION);
                        setViewMode(newValue);
                    }, selected: viewMode }))),
        isSelectionMode && (React.createElement("div", { className: "notifications-center-controls__row center bulk-actions" },
            React.createElement(Button, { fashion: "primary", text: "Mark Read", onClick: readChecked, disabled: checkedNotifications.length === 0 }),
            React.createElement(Button, { fashion: "primary", text: "Mark Unread", onClick: unreadChecked, disabled: checkedNotifications.length === 0 }),
            React.createElement(Button, { fashion: "primary", text: "Delete", onClick: deleteChecked, disabled: checkedNotifications.length === 0 }),
            React.createElement(Button, { fashion: "primary", text: "Snooze", onClick: snoozeChecked, disabled: checkedNotifications.length === 0 })))));
};
export default DrawerControls;
//# sourceMappingURL=DrawerControls.js.map