import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styles from "./styles.module.css";
import MartyIcon from "../../assets/marty_selected.svg";
import CogIcon from "../../assets/cog_selected.svg";
import { ReactComponent as DisconnectIcon } from "../../assets/connection/disconnect_button.svg";
import { ReactComponent as DisconnectHoverIcon } from "../../assets/connection/disconnect_button-hover.svg";
import { useEffect, useState } from "react";
import RaftSignal from "../RaftSignal";
import RaftBattery from "../RaftBattery";
import { RaftTypeE } from "@robotical/webapp-types/dist-types/src/types/raft";
const SHOW_LOGS = true;
const TAG = "RobotButton";
const RobotButton = ({ robotType, connectedRaft, onClickDisconnect }) => {
    const [connectedRaftName, setConnectedRaftName] = useState("");
    const [batteryStrength, setBatteryStrength] = useState(0);
    const [RSSI, setRSSI] = useState(-200);
    const [isDisconnectHovered, setIsDisconnectHovered] = useState(false);
    useEffect(() => {
        if (!connectedRaft)
            return;
        const batteryUpdateTimout = setInterval(() => {
            setBatteryStrength(connectedRaft.getBatteryStrength());
            setRSSI(connectedRaft.getRSSI());
        }, 200);
        return () => clearInterval(batteryUpdateTimout);
    }, [connectedRaft]);
    useEffect(() => {
        if (connectedRaft) {
            setTimeout(() => {
                connectedRaft.getRaftName()
                    .then((name) => {
                    console.log("name", name);
                    setConnectedRaftName(name);
                })
                    .catch((error) => {
                    console.error(SHOW_LOGS, TAG, "Error getting raft name " + JSON.stringify(error));
                });
            }, 500);
        }
    }, [connectedRaft]);
    return _jsx("div", { className: [styles.robotButtonContainer].join(" "), children: _jsxs("div", { className: styles.robotButtonContainerInner, children: [_jsx("div", { className: styles.robotButtonIconContainer, children: _jsx("img", { src: robotType === RaftTypeE.COG ? CogIcon : MartyIcon, alt: "Robot icon", className: styles.robotButtonIcon }) }), _jsx("div", { className: styles.batteryContainer, children: _jsx("div", { className: styles.batteryIcon, children: _jsx(RaftBattery, { batteryStrength: batteryStrength }) }) }), _jsx("div", { className: styles.signalContainer, children: _jsx(RaftSignal, { signalStrength: RSSI }) }), _jsx("div", { className: styles.robotButtonNameContainer, children: _jsx("div", { className: styles.robotButtonName, children: truncateRobotName(connectedRaftName) }) }), _jsx("div", { className: styles.trashContainer, onClick: () => onClickDisconnect(connectedRaft?.id || ""), onMouseEnter: () => setIsDisconnectHovered(true), onMouseLeave: () => setIsDisconnectHovered(false), children: isDisconnectHovered ? _jsx(DisconnectHoverIcon, {}) : _jsx(DisconnectIcon, {}) })] }) });
};
export default RobotButton;
function truncateRobotName(name) {
    if (name.length > 13) {
        return name.substring(0, 11) + "...";
    }
    return name;
}
