import {Table, TableBody, TableCell, TableHead, TableRow} from "@mui/material";
import Command, {CommandInterface} from "./elements/command";
import {useEffect, useState} from "react";

export default function Commands() {
    const [commands, setCommands] = useState<CommandInterface[]>([]);

    let refreshCommands = async () => {
        let response = await fetch('http://fmw.sipachev.sv/system-monitoring/commands', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json;charset=utf-8',
                'X-Plugin-Token': 'passw0rd'
            },
        });
        const commands: CommandInterface[] = await response.json()
        setCommands(commands)
        setTimeout(() => refreshCommands, 1000)
    }

    useEffect(() => {
        refreshCommands()
    }, [])

    return (
        <Table>
            <TableHead>
                <TableRow>
                    <TableCell>Name</TableCell>
                    <TableCell>Action</TableCell>
                </TableRow>
            </TableHead>
            <TableBody>
                {commands.map((command: CommandInterface, index: number) => (
                    <TableRow key={command.name}>
                        <TableCell><Command key={index} {...command} /></TableCell>
                    </TableRow>
                ))}
            </TableBody>
        </Table>
    )
}