import Head from 'next/head'
import styles from '../styles/Home.module.css'
import {OptionInterface} from "../components/elements/command/elements/option";
import {ArgumentInterface} from "../components/elements/command/elements/argument";
import Command from "../components/elements/command";
import Tabs from "../components/elements/tabs";
import Tab from "../components/elements/tabs/elements/tab";
import TabTitle from "../components/elements/tabs/elements/tab-title";
import TabSection from "../components/elements/tabs/elements/tab-section";
import Processes from "../components/elements/processes";

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}>
                <Tabs tabsClassName={styles.tabPanel}>
                    <Tab>
                        <TabTitle className={styles.tabPanelItem}>Команды</TabTitle>
                        <TabSection>
                            <div className={styles.tasks}>
                                {commands.map((command: CommandInterface, index: number) => (
                                    <Command key={index} {...command} />
                                ))}
                            </div>
                        </TabSection>
                    </Tab>
                    <Tab>
                        <TabTitle className={styles.tabPanelItem}>Процессы</TabTitle>
                        <TabSection>
                            <Processes />
                        </TabSection>
                    </Tab>
                </Tabs>
            </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
        },
    }
}
