import Head from 'next/head'
import styles from '../styles/Home.module.css'
import Processes from "../components/elements/processes";
import {Tabs, Tab, MenuItem, Select, InputLabel, TextareaAutosize, Button} from '@mui/material';
import {useContext, useEffect, useState} from "react";
import Commands from "../components/elements/commands";
import {Provider as TabProvider} from '../context/tab'
import Context from "../context/token";


export enum TabEnum {
    Commands,
    Processes,
}

export default function Home() {
    let {token, tokens, addToken} = useContext(Context)
    const [tab, setTab] = useState<TabEnum>(TabEnum.Processes);
    const handleChange = (event: any, tab: number) => setTab(tab)

    // useEffect(() => {
    //     const storedToken = grabToken()
    //     setToken(storedToken)
    //     const storedTokens = grabTokens()
    //     setTokens(storedTokens)
    // }, [])

    let onTokenInput = (event: any) => {

    }

    if (!token) {
        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}>
                    <h2>Для дальнейшей работы добавьте JWT токен</h2>
                    <TextareaAutosize
                        minRows={20}
                        style={{ width: '100%' }}
                        onInput={(event: any) => addToken(event.target.value)}
                    />
                </main>
            </>
        )
    }

    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}>
                {tokens.length > 0 && <>
                    <InputLabel id="tokens">Tokens</InputLabel>
                    <Select
                        value={token}
                        labelId="tokens"
                        id="demo-simple-select-autowidth"
                        label="Tokens"
                        onChange={(event: any) => {
                            // selectToken(event.target.value)
                            // const storedToken = grabToken()
                            // setToken(storedToken)
                            // if (storedToken) {
                            //     smClient.baseUrl = storedToken.payload.host
                            // }
                        }}
                    >
                        {tokens.map((token, index) => (
                            <MenuItem key={index} value={index}>{token.host}</MenuItem>
                        ))}
                    </Select>
                </>}


                {token && <>
                    <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>
        </>
    )
}
