import styles from './styles.module.css'
import {Table, TableBody, TableCell, TableHead, TableRow, IconButton, Autocomplete, TextField} from "@mui/material";
import Command, {CommandInterface} from "./elements/command";
import {useEffect, useState} from "react";
import PlayCircleOutline from '@mui/icons-material/PlayCircleOutline';
import { v4 } from "uuid"

export default function Commands() {
    const [commands, setCommands] = useState<CommandInterface[]>([]);
    const [selectedCommand, setSelectedCommand] = useState<CommandInterface|null>(null);
    const [command2data, setCommand2data] = useState<Record<string, any>>({});
    const [value, setValue] = useState<string | null>('');
    let requestId = v4()

    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)
    }

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

    useEffect(() => {
        let command = commands.filter((command) => command.name === value)
        setSelectedCommand(command[0] || null)
    }, [value])

    let variants = commands.map((command: CommandInterface, index: number) => command.name);

    let callback = (name: string, optionList: Record<string, any>, argumentList: Record<string, any>) => {
        let temp = {
            ...command2data
        }
        temp[name] = {
            options: optionList,
            arguments: argumentList,
        }
        setCommand2data(temp)
    }
    let lock = false
    let runCommand = async () => {
        if (lock) {
            return
        }
        if (!selectedCommand) {
            return
        }
        lock = true
        let url = `http://fmw.sipachev.sv/system-monitoring/commands/${selectedCommand.name}/run`
        let data = command2data[selectedCommand.name] || {}
        data['requestId'] = requestId;
        let response = await fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json;charset=utf-8',
                'X-Plugin-Token': 'passw0rd'
            },
            body: JSON.stringify(data)
        });
        lock = false
    }

    return (
        <>
            <br/>
            <div className={styles.autocomplete}>
                <Autocomplete
                    value={value}
                    onChange={(event: any, newValue: string | null) => {
                        setValue(newValue);
                    }}
                    disablePortal
                    id="combo-box-demo"
                    options={variants}
                    renderInput={(params) => <TextField {...params} label="Commands" />}
                />
            </div>

            <Table>
                <TableHead>
                    <TableRow>
                        <TableCell>Name</TableCell>
                        <TableCell>Action</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {selectedCommand && <TableRow key={selectedCommand.name}>
                        <TableCell><Command command={selectedCommand} callback={callback} /></TableCell>
                        <TableCell>
                            <IconButton onClick={runCommand} aria-label="run">
                                <PlayCircleOutline />
                            </IconButton>
                        </TableCell>
                    </TableRow>}
                </TableBody>
            </Table>
        </>
    )
}