import { bind } from 'astal';
import { Astal, Gtk } from 'astal/gtk3';

import Brightness from '../../services/brightness';

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


export default () => {
    const brightness = Brightness.get_default();

    return (
        <PopupWindow
            name="brightness-slider"
            anchor={Astal.WindowAnchor.RIGHT | Astal.WindowAnchor.TOP}
        >
            <box className="widget" widthRequest={500}>
                <slider
                    hexpand
                    halign={Gtk.Align.FILL}
                    drawValue
                    cursor="pointer"

                    min={0}
                    max={100}

                    value={bind(brightness, 'screen').as((v) => v * 100)}
                    onDragged={(self) => {
                        brightness.screen = Number((self.value / 100).toFixed(2));
                    }}
                />
            </box>
        </PopupWindow>
    );
};