import { bind } from 'astal';
import { App } from 'astal/gtk3';

import AstalNotifd from 'gi://AstalNotifd';

import Separator from '../../misc/separator';

const SPACING = 4;

// Types
import PopupWindow from '../../misc/popup-window';


export default () => {
    const notifications = AstalNotifd.get_default();

    return (
        <button
            className="bar-item"
            cursor="pointer"

            onButtonReleaseEvent={(self) => {
                const win = App.get_window('win-notif-center') as PopupWindow;

                win.set_x_pos(
                    self.get_allocation(),
                    'right',
                );

                win.visible = !win.visible;
            }}

            setup={(self) => {
                App.connect('window-toggled', (_, win) => {
                    if (win.name === 'win-notif-center') {
                        self.toggleClassName('toggle-on', win.visible);
                    }
                });
            }}
        >
            <box>
                <icon
                    icon={bind(notifications, 'notifications').as((notifs) => {
                        if (notifications.dontDisturb) {
                            return 'notification-disabled-symbolic';
                        }
                        else if (notifs.length > 0) {
                            return 'notification-new-symbolic';
                        }
                        else {
                            return 'notification-symbolic';
                        }
                    })}
                />

                <Separator size={SPACING} />

                <label label={bind(notifications, 'notifications').as((n) => String(n.length))} />
            </box>
        </button>
    );
};