import { bind, Variable } from "astal";

import Network from "gi://AstalNetwork";

export default function NetworkButton() {
    const network = Network.get_default();

    const state = Variable.derive(
        [bind(network, "primary"), bind(network, "wifi"), bind(network, "wired")],
        (primary, wifi, wired) => {
            switch (primary) {
                case Network.Primary.WIFI:
                    return {
                        icon: wifi.iconName,
                        label: wifi.ssid,
                        tooltip: `Connected to ${wifi.ssid}`,
                    };
                case Network.Primary.WIRED:
                    return {
                        icon: wired.iconName,
                        label: "Wired",
                        tooltip: {
                            [Network.Internet.CONNECTED]: `Connected to Ethernet`,
                            [Network.Internet.CONNECTING]: `Connecting to Ethernet...`,
                            [Network.Internet.DISCONNECTED]: `Connected to Ethernet (no internet!)`,
                        }[wired.internet],
                    };
                default:
                    return {
                        icon: "network-disconnected-symbolic",
                        label: "Disconnected",
                        tooltip: "No connection",
                    };
            }
        }
    )

    const binding = bind(state);
    return <box tooltipText={binding.as((t) => t.tooltip)} spacing={5}>
        <image iconName={binding.as((i) => i.icon)} />
        <label label={binding.as((l) => l.label)} />
    </box>
}