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";
import Send from "@mui/icons-material/Send"

export default function Commands() {
    const {setTab} = useContext(TabContext)
    const [commands, setCommands] = useState<CommandInterface[]>([]);
    const [selectedCommand, setSelectedCommand] = useState<CommandInterface|null>(null);
    const [optionList, setOptionList] = useState<Record<string, any>>({});
    const [argumentList, setArgumentList] = 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>) => {
        setOptionList(optionList)
        setArgumentList(argumentList)
    }
    let lock = false
    let runCommand = async (dialogId: string) => {
        if (!selectedCommand) {
            return
        }
        if (lock) {
            return
        }
        lock = true
        await smClient.runCommand({
            commandName: selectedCommand.name,
            options: optionList,
            arguments: argumentList,
            requestId: dialogId,
        })
        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" />}
                />
                <IconButton onClick={() => selectedCommand && setOpen(true)} title={`Execute`} aria-label="Execute">
                    <Send color={selectedCommand ? 'primary' : 'inherit'} />
                </IconButton>
            </div>
            {selectedCommand && <ConfirmDialog title={selectedCommand.name} open={open} agreeCallback={runCommand} closeCallback={() => setOpen(false)}>
                <Command command={selectedCommand} callback={callback} />
            </ConfirmDialog>}
        </>
    )
}