import { bind } from "astal";
import { Gtk } from "astal/gtk4";
import AstalNetwork from "gi://AstalNetwork";
import networkHelper from "./network-helper";
import NetworkMenu from "./NetworkMenu";

const net = AstalNetwork.get_default();
const STATE = AstalNetwork.DeviceState;

const Network = () => {
    const netMenu = NetworkMenu.NetworkMenu();
    return (
        <box>
            <button
                cssClasses={networkHelper.networkEnabled(en => {
                    if (en) return ["toggle-button", "toggle-on"];
                    else return ["toggle-button"];
                })}
                onClicked={() =>
                    networkHelper.setNetworking(
                        !networkHelper.networkEnabled.get(),
                    )
                }
                child={
                    <box vertical>
                        <label
                            label={bind(net.wifi, "enabled").as(
                                stat => `Network (${stat ? "WiFi" : "Wired"})`,
                            )}
                            cssClasses={["title-2"]}
                        ></label>
                        <label
                            label={bind(net.wired, "state").as(state => {
                                if (state === STATE.ACTIVATED) {
                                    return (
                                        "Wired. IP: " + networkHelper.getIP()
                                    );
                                } else if (state === STATE.DISCONNECTED) {
                                    return "Disconnected";
                                } else if (state === STATE.FAILED) {
                                    return "Error";
                                } else if (
                                    state === STATE.PREPARE ||
                                    state === STATE.CONFIG ||
                                    state === STATE.IP_CHECK ||
                                    state === STATE.IP_CONFIG
                                ) {
                                    return "Connecting...";
                                } else {
                                    return "Unavailable";
                                }
                            })}
                            visible={bind(net.wifi, "enabled").as(v => !v)}
                        ></label>
                        <label
                            label={bind(net.wifi, "state").as(state => {
                                if (state === STATE.ACTIVATED) {
                                    return `${net.wifi.get_ssid()} (${networkHelper.getIP()})`;
                                } else if (state === STATE.DISCONNECTED) {
                                    return "Disconnected";
                                } else if (state === STATE.FAILED) {
                                    return "Error";
                                } else if (
                                    state === STATE.PREPARE ||
                                    state === STATE.CONFIG ||
                                    state === STATE.IP_CHECK ||
                                    state === STATE.IP_CONFIG
                                ) {
                                    return "Connecting...";
                                } else {
                                    return "Unavailable";
                                }
                            })}
                            visible={bind(net.wifi, "enabled")}
                        ></label>
                    </box>
                }
            ></button>
            <button
                cssClasses={["actions-button"]}
                visible={networkHelper.networkEnabled()}
                onClicked={() => netMenu.popup()}
                child={
                    <box>
                        <image iconName={"arrow-right-symbolic"}></image>
                        { netMenu }
                    </box>
                }
                tooltipText={"View available devices"}
            ></button>
        </box>
    );
};

export default {
    Network,
};