import Head from 'next/head'
import styles from '../styles/Home.module.css'
import Processes from "../components/elements/processes";
import {Tabs, Tab} from '@mui/material';
import {useState} from "react";
import Commands from "../components/elements/commands";
import {Provider as TabProvider} from '../context/tab'

export enum TabEnum {
    Commands,
    Processes,
}

export default function Home() {
    const [tab, setTab] = useState<TabEnum>(TabEnum.Processes);
    const handleChange = (event: any, tab: number) => setTab(tab)
    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
                    value={tab}
                    onChange={handleChange}
                    variant="scrollable"
                    scrollButtons
                    allowScrollButtonsMobile
                    aria-label="scrollable force tabs example"
                >
                    <Tab value={TabEnum.Commands} label="Commands" />
                    <Tab value={TabEnum.Processes} label="Processes" />
                </Tabs>
                <TabProvider value={{tab, setTab}}>
                    {tab === TabEnum.Commands && <Commands />}
                    {tab === TabEnum.Processes && <Processes />}
                </TabProvider>

            </main>
        </>
    )
}
