import styles from './styles.module.css'
import {useContext, useEffect, useState} from "react";
import Argument, {ArgumentInterface} from "../argument";
import Context, {ContextInterface} from "../command/context";

interface ArgumentsInterface {
    argumentList: ArgumentInterface[]
}

export default function Arguments({argumentList}: ArgumentsInterface) {
    let {argumentList: al} = useContext<ContextInterface>(Context)
    let [availableArguments, setAvailableArguments] = useState<ArgumentInterface[]>(argumentList);

    useEffect(() => {
        let result: ArgumentInterface[] = [];
        for (let argument of argumentList) {
            result.push(argument)
            if (!al[argument.name]) {
                break
            }
        }
        setAvailableArguments(result)
    }, [al]);

    if (!argumentList.length) {
        return <></>
    }

    return (
        <>
            --&nbsp;
            {availableArguments.map((argument: ArgumentInterface, index: number) => {
                return (
                    <Argument key={index} {...argument} />
                )
            })}
        </>
    )
}