import styles from './styles.module.css'
import {Table, TableBody, TableCell, TableHead, TableRow, IconButton, Autocomplete, TextField} from "@mui/material";
import Command, {CommandInterface} from "./elements/command";
import {useContext, useEffect, useState} from "react";
import PlayCircleOutline from '@mui/icons-material/PlayCircleOutline';
import ConfirmDialog from "../confirm-dialog";
import TabContext from "../../../context/tab";
import {TabEnum} from "../../../pages";
import smClient from "../../../api/sm/sm-client";

export default function Commands() {
    const {setTab} = useContext(TabContext)
    const [commands, setCommands] = useState<CommandInterface[]>([]);
    const [selectedCommand, setSelectedCommand] = useState<CommandInterface|null>(null);
    const [command2data, setCommand2data] = useState<Record<string, any>>({});
    const [value, setValue] = useState<string | null>('');
    const [open, setOpen] = useState<boolean>(false);

    let refreshCommands = async () => {
        const { data: commands } = await smClient.getCommands()
        setCommands(commands)
    }

    useEffect(() => {
        refreshCommands()
    }, [])

    useEffect(() => {
        let command = commands.filter((command) => command.name === value)
        setSelectedCommand(command[0] || null)
    }, [value])

    let variants = commands.map((command: CommandInterface, index: number) => command.name);

    let callback = (name: string, optionList: Record<string, any>, argumentList: Record<string, any>) => {
        let temp = {
            ...command2data
        }
        temp[name] = {
            options: optionList,
            arguments: argumentList,
        }
        setCommand2data(temp)
    }
    let lock = false
    let runCommand = async (dialogId: string) => {
        if (lock) {
            return
        }
        if (!selectedCommand) {
            return
        }
        lock = true
        let data = command2data[selectedCommand.name] || {}
        data['requestId'] = dialogId;
        await smClient.runCommand({
            commandName: selectedCommand.name,
            ...data
        })
        lock = false
        setTab(TabEnum.Processes)
    }

    return (
        <>
            <br/>
            <div className={styles.autocomplete}>
                <Autocomplete
                    value={value}
                    onChange={(event: any, newValue: string | null) => {
                        setValue(newValue);
                    }}
                    disablePortal
                    id="combo-box-demo"
                    options={variants}
                    renderInput={(params) => <TextField {...params} label="Commands" />}
                />
            </div>

            <Table>
                <TableHead>
                    <TableRow>
                        <TableCell>Name</TableCell>
                        <TableCell>Action</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {selectedCommand && <TableRow key={selectedCommand.name}>
                        <TableCell><Command command={selectedCommand} callback={callback} /></TableCell>
                        <TableCell>
                            <IconButton onClick={() => setOpen(true)} aria-label="run">
                                <PlayCircleOutline />
                            </IconButton>
                        </TableCell>
                    </TableRow>}
                </TableBody>
            </Table>
            <ConfirmDialog open={open} text={'$$$'} agreeCallback={runCommand} closeCallback={() => setOpen(false)}/>
        </>
    )
}