import React, { useState } from 'react';
import { Play, Square, RotateCcw, Power, Trash2, Move, Eye } from 'lucide-react';
import { YahboomControls } from './YahboomControls';
import { DreameControls } from './DreameControls';
import { HueControls } from './HueControls';
interface Robot {
robot_id: string;
robot_type: string;
platform?: string;
connected: boolean;
is_virtual?: boolean;
metadata?: any;
}
interface RobotControlsProps {
selectedRobot: Robot | null;
onCommand: (robotId: string, command: any) => void;
}
const RobotControls: React.FC<RobotControlsProps> = ({
selectedRobot,
onCommand
}) => {
const [linearVelocity, setLinearVelocity] = useState(0.5);
const [angularVelocity, setAngularVelocity] = useState(0);
const handleCommand = (commandType: string, params?: any) => {
if (!selectedRobot) return;
const command = {
action: commandType,
...params
};
onCommand(selectedRobot.robot_id, command);
};
const handleMove = () => {
handleCommand('move', {
linear_x: linearVelocity,
linear_y: 0,
angular_z: angularVelocity
});
};
const handleStop = () => {
handleCommand('move', {
linear_x: 0,
linear_y: 0,
angular_z: 0
});
};
if (!selectedRobot) {
return (
<div className="bg-gray-800 rounded-lg shadow-lg p-6">
<h2 className="text-xl font-semibold text-gray-100 mb-4">Robot Controls</h2>
<div className="text-center py-12 text-gray-400">
<Square className="w-12 h-12 mx-auto mb-4 opacity-50" />
<p>Select a robot to control</p>
</div>
</div>
);
}
return (
<div className="bg-gray-800 rounded-lg shadow-lg p-6">
<h2 className="text-xl font-semibold text-gray-100 mb-4">Robot Controls</h2>
<div className="mb-4">
<h3 className="text-lg font-medium text-gray-100 mb-2">
{selectedRobot.is_virtual ? '🎮' : '🤖'} {selectedRobot.robot_id}
</h3>
<p className="text-sm text-gray-400">
{selectedRobot.is_virtual ? 'Virtual' : 'Physical'} {selectedRobot.robot_type}
{selectedRobot.platform && ` • ${selectedRobot.platform}`}
</p>
</div>
{!selectedRobot.connected && (
<div className="bg-red-900 border border-red-700 rounded-lg p-3 mb-4">
<p className="text-red-200 text-sm">⚠️ Robot is offline</p>
</div>
)}
{/* Robot-Specific Controls */}
{selectedRobot.robot_type === 'yahboom' && (
<YahboomControls robot={selectedRobot} onCommand={onCommand} />
)}
{selectedRobot.robot_type === 'dreame' && (
<DreameControls robot={selectedRobot} onCommand={onCommand} />
)}
{selectedRobot.robot_type === 'hue' && (
<HueControls robot={selectedRobot} onCommand={onCommand} />
)}
{/* Generic Controls for Other Robot Types (incl. gazebo, scout, etc.) */}
{!['yahboom', 'dreame', 'hue'].includes(selectedRobot.robot_type) && (
<>
{/* Movement Controls */}
<div className="mb-6">
<h4 className="text-md font-medium text-gray-100 mb-3">Movement</h4>
<div className="space-y-3 mb-4">
<div>
<label className="block text-sm text-gray-300 mb-1">
Linear Velocity: {linearVelocity.toFixed(1)} m/s
</label>
<input
type="range"
min="-1"
max="1"
step="0.1"
value={linearVelocity}
onChange={(e) => setLinearVelocity(parseFloat(e.target.value))}
className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
/>
</div>
<div>
<label className="block text-sm text-gray-300 mb-1">
Angular Velocity: {angularVelocity.toFixed(1)} rad/s
</label>
<input
type="range"
min="-2"
max="2"
step="0.1"
value={angularVelocity}
onChange={(e) => setAngularVelocity(parseFloat(e.target.value))}
className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
/>
</div>
</div>
<div className="flex gap-2">
<button
onClick={handleMove}
disabled={!selectedRobot.connected}
className="flex-1 flex items-center justify-center gap-2 bg-green-600 hover:bg-green-700 disabled:bg-gray-600 px-4 py-2 rounded-lg transition-colors"
>
<Move className="w-4 h-4" />
Move
</button>
<button
onClick={handleStop}
disabled={!selectedRobot.connected}
className="flex-1 flex items-center justify-center gap-2 bg-red-600 hover:bg-red-700 disabled:bg-gray-600 px-4 py-2 rounded-lg transition-colors"
>
<Square className="w-4 h-4" />
Stop
</button>
</div>
</div>
{/* Action Controls */}
<div className="mb-6">
<h4 className="text-md font-medium text-gray-100 mb-3">Actions</h4>
<div className="grid grid-cols-2 gap-2">
<button
onClick={() => handleCommand('start_patrol')}
disabled={!selectedRobot.connected}
className="flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 px-3 py-2 rounded-lg transition-colors text-sm"
>
<Play className="w-4 h-4" />
Patrol
</button>
<button
onClick={() => handleCommand('stop_patrol')}
disabled={!selectedRobot.connected}
className="flex items-center justify-center gap-2 bg-orange-600 hover:bg-orange-700 disabled:bg-gray-600 px-3 py-2 rounded-lg transition-colors text-sm"
>
<Square className="w-4 h-4" />
Stop
</button>
<button
onClick={() => handleCommand('return_home')}
disabled={!selectedRobot.connected}
className="flex items-center justify-center gap-2 bg-purple-600 hover:bg-purple-700 disabled:bg-gray-600 px-3 py-2 rounded-lg transition-colors text-sm"
>
<RotateCcw className="w-4 h-4" />
Home
</button>
<button
onClick={() => handleCommand('reboot')}
disabled={!selectedRobot.connected}
className="flex items-center justify-center gap-2 bg-yellow-600 hover:bg-yellow-700 disabled:bg-gray-600 px-3 py-2 rounded-lg transition-colors text-sm"
>
<Power className="w-4 h-4" />
Reboot
</button>
</div>
</div>
{/* Virtual Robot Controls */}
{selectedRobot.is_virtual && (
<div className="border-t border-gray-700 pt-4">
<h4 className="text-md font-medium text-gray-100 mb-3">Virtual Controls</h4>
<button
onClick={() => handleCommand('delete_vbot')}
className="w-full flex items-center justify-center gap-2 bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg transition-colors"
>
<Trash2 className="w-4 h-4" />
Delete Virtual Robot
</button>
</div>
)}
{/* Camera Control (if available) */}
{!selectedRobot.is_virtual && (
<div className="border-t border-gray-700 pt-4">
<h4 className="text-md font-medium text-gray-100 mb-3">Camera</h4>
<button
onClick={() => handleCommand('get_camera')}
disabled={!selectedRobot.connected}
className="w-full flex items-center justify-center gap-2 bg-indigo-600 hover:bg-indigo-700 disabled:bg-gray-600 px-4 py-2 rounded-lg transition-colors"
>
<Eye className="w-4 h-4" />
View Camera
</button>
</div>
)}
</>
)}
</div>
);
};
export default RobotControls;
