import { bind } from "astal";
import Brightness from "../../../../util/brightness";

const brightness = Brightness.get_default();

const BrightnessModule = () => {
    print( brightness.screen * 100 );
    const setBrightness = (value: number) => {
        brightness.screen = value;
    }
    return (
        <box visible={bind(brightness, 'screenAvailable')}>
            <image iconName={"brightness-high-symbolic"}></image>
            <label label={bind(brightness, "screen").as(b => `${Math.round(100 * b)}%`)}></label>
            <slider
                value={Math.round( brightness.screen * 100) / 100}
                hexpand
                max={1}
                min={0.01}
                step={0.01}
                vexpand
                onChangeValue={self => setBrightness(self.value)}
            ></slider>
        </box>
    );
};

export default {
    BrightnessModule
};