import styles from './styles.module.css'
import Options from "./elements/options";
import Arguments from "./elements/arguments";
import {OptionInterface} from "./elements/option";
import {ArgumentInterface} from "./elements/argument";
import {Provider} from "./context";
import {useState} from "react";

export interface CommandInterface {
    class: string,
    name: string,
    description: string,
    options: OptionInterface[],
    arguments: ArgumentInterface[],
}

export default function Command(command: CommandInterface) {
    const [optionList, setOptionList] = useState<Record<string, any>>({});
    const [argumentList, setArgumentList] = useState<Record<string, any>>({});

    let onClick = async (event: any) => {
        let url = `http://fmw.sipachev.sv/system-monitoring/commands/${command.name}/run`
        let data = {
            options: optionList,
            arguments: argumentList,
        }
        console.log('data', data)
        let response = await fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json;charset=utf-8',
                'X-Plugin-Token': 'passw0rd'
            },
            body: JSON.stringify(data)
        });
        let result = await response.json();
        console.log('result', result)
    }
    return (
        <Provider value={{optionList, setOptionList, argumentList, setArgumentList}}>
            <div className={styles.task}>
                <div title={command.description}>
                    {command.name}&nbsp;
                    <Options optionList={command.options} />
                    <Arguments argumentList={command.arguments} />
                </div>
                <div>
                    <button onClick={onClick}>Run</button>
                </div>
            </div>
        </Provider>
    )
}