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

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

const WiFiList = () => {
    const popover = new Gtk.Popover({ cssClasses: ["WiFiPicker"] });

    return popover;
};

const renderWiFiList = () => {
    return <box>
        <label label="Test"></label>
    </box>
}

const Network = () => {
    const wifiList = WiFiList();

    return (
        <box>
            <button
                cssClasses={networkHelper.networkEnabled(en => {
                    if (en) return ["network-button", "net-on"];
                    else return ["network-button"];
                })}
                onClicked={() =>
                    networkHelper.setNetworking(
                        !networkHelper.networkEnabled.get(),
                    )
                }
                child={<box vertical>
                    <label label="Wired" cssClasses={[ 'button-name' ]}></label>
                    <label label={bind( net.wired, 'state' ).as( state => {
                        if ( state === STATE.ACTIVATED ) {
                            return 'Connected. 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';
                        }
                    } )}></label>
                </box>}
            ></button>
            <box>
                <button
                    cssClasses={bind(net.wifi, "enabled").as(b => {
                        const classes = ["network-button"];
                        if (b) {
                            classes.push("wifi-on");
                        }
                        return classes;
                    })}
                    child={<box vertical>
                        <label label="WiFi" cssClasses={[ 'button-name' ]}></label>
                        <label label={bind( net.wifi, 'state' ).as( state => {
                            if ( state === STATE.ACTIVATED ) {
                                return 'Connected. 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( en => en )}></label>
                        <label label="Disabled" visible={bind(net.wifi, 'enabled').as( en => !en )}></label>
                    </box>}
                ></button>
                <button
                    cssClasses={["network-button-context"]}
                    visible={bind(net.wifi, "enabled").as(b => b)}
                    onClicked={() => wifiList.popup()}
                ></button>
            </box>
            {wifiList}
        </box>
    );
};

export default Network;