import React, { useState, useContext, useEffect } from "react";
import { NotificationsContext } from "../../notificationsContext";
import { FinsembleIcon } from "../../../common/FinsembleIcon";
const isNotificationInCheckedNotifications = (checkedNotifications, notification) => checkedNotifications.some((checkedNotification) => checkedNotification.id === notification.id);
export const CheckButton = ({ notification }) => {
    const notificationsContext = useContext(NotificationsContext);
    const { checkedNotifications, setCheckedNotifications, isSelectAll, setSelectAll } = notificationsContext;
    const [isChecked, setIsChecked] = useState(isNotificationInCheckedNotifications(checkedNotifications, notification));
    useEffect(() => {
        if (isSelectAll && checkedNotifications.indexOf(notification) === -1) {
            setIsChecked(true);
        }
    }, [isSelectAll]);
    useEffect(() => {
        if (checkedNotifications.length === 0 && isChecked) {
            setIsChecked(false);
        }
    }, [checkedNotifications]);
    useEffect(() => {
        if (isChecked) {
            checkedNotifications.push(notification);
            setCheckedNotifications([...checkedNotifications]);
        }
        else {
            const index = checkedNotifications.findIndex((checkedNotification) => (checkedNotification.id = notification.id));
            if (index !== -1) {
                checkedNotifications.splice(index, 1);
                setSelectAll(false); // if we are unchecking one then select all is not active
                setCheckedNotifications([...checkedNotifications]);
            }
        }
    }, [isChecked]);
    const toggleCheck = () => {
        setIsChecked(!isChecked);
    };
    return (React.createElement("div", { key: notification.id, className: "check_icon_container", onClick: toggleCheck },
        React.createElement(FinsembleIcon, { className: `${isChecked ? "checked" : ""}`, icon: "check" })));
};
//# sourceMappingURL=CheckButton.js.map