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

import AstalWp from 'gi://AstalWp';

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


export default () => {
    const speaker = AstalWp.get_default()?.audio.default_speaker;

    if (!speaker) {
        throw new Error('Could not find default audio devices.');
    }

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

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

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

                win.visible = !win.visible;
            }}
        >
            <overlay passThrough>
                <circularprogress
                    startAt={0.75}
                    endAt={0.75}
                    value={bind(speaker, 'volume')}

                    rounded
                    className={bind(speaker, 'mute').as((muted) => muted ? 'disabled' : '')}
                />

                <icon icon={bind(speaker, 'volumeIcon')} />
            </overlay>
        </button>
    );
};