import Head from 'next/head'
import styles from '../styles/Home.module.css'
import {OptionInterface} from "../components/elements/option";
import {ArgumentInterface} from "../components/elements/argument";
import Command from "../components/elements/command";

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

interface CommandsInterface {
    commands: CommandInterface[],
}

export default function Home({commands}: CommandsInterface) {
    return (
        <>
            <Head>
                <title>System monitoring</title>
                <meta name="description" content="System monitoring service"/>
                <meta name="viewport" content="width=device-width, initial-scale=1"/>
                <link rel="icon" href="/favicon.ico"/>
            </Head>
            <main className={styles.main}>
                <h1>Tasks</h1>
                <div className={styles.tasks}>
                    {commands.map((command: CommandInterface, index: number) => (
                        <Command key={index} {...command} />
                    ))}
                </div>
            </main>
        </>
    )
}

export async function getStaticProps(context: any) {
    let response = await fetch('http://fmw.sipachev.sv/system-monitoring/commands');
    const commands: CommandsInterface = await response.json()
    return {
        props: {
            'commands': commands
        },
    }
}
