import { bind } from "astal";
import AstalBluetooth from "gi://AstalBluetooth";


const BTDevice = ({ device }: { device: AstalBluetooth.Device }) => {
    return (
        <button
            visible={bind(device, "name").as(n => n !== null)}
            child={
                <centerbox
                    startWidget={
                        <box>
                            <image iconName={"chronometer-reset"} visible={bind( device, 'connecting' )}></image>
                            <image
                                iconName={bind(device, "icon")}
                                marginEnd={3}
                            ></image>
                        </box>
                    }
                    centerWidget={
                        <label
                            label={bind(device, "name").as(n => n ?? "No name")}
                            marginEnd={5}
                        ></label>
                    }
                    endWidget={
                        <box>
                            <label
                                label={bind(device, "batteryPercentage").as(
                                    bat => (bat >= 0 ? bat + "%" : "?%"),
                                )}
                                marginEnd={3}
                            ></label>
                            <image
                                iconName={bind(device, "trusted").as(v =>
                                    v ? "checkbox" : "paint-unknown-symbolic",
                                )}
                            ></image>
                        </box>
                    }
                ></centerbox>
            }
            onClicked={() => {
                // TODO: Make sure to check if device was previously paired and otherwise do some pairing shenanigans
                device.connect_device( () => {} );
            }}
        ></button>
    );
};


export default BTDevice;