class FilterAdd extends Filter {
    constructor(props) {
        super(props);
        this.state = {
            Filter: {
                Name: "",
                Field: 0,
                Operation: 0,
                Arguments: [""]
            }
        }
    }

    render = () => {
        console.log(this.state.Filter);
        return (
            <div className="addFilter">
                <h2>New Filter</h2>
                <InputV3 Name="Name" handleOnChange={this.handleChange} />
                <DropDownV3 Name="Field" Options={this.fieldOptions} handleOnChange={this.handleChange} />
                <DropDownV3 Name="Operation" Options={this.operationOptions} handleOnChange={this.handleChange} />
                <FilterArgsInput {...this.state.Filter} handleChange={this.handleChange} />
            </div>
        )
    }

    handleChange = (value, fieldName) => {
        this.setState((prevState) => {
            if (fieldName == "Operation" || fieldName == "Field") value = parseInt(value);
            if (fieldName == "Operation") prevState.Filter.Arguments = (value == 8) ? ["", ""] : [""];
            prevState.Filter[fieldName] = value;
            return { Filter: prevState.Filter }
        })
    }

}

class FilterArgsInput extends React.Component {
    render = () => {
        const InputSet = this.props.Arguments.map((arg, index) => <div key={index}>
            <InputV3 Value={arg} />
            {this.props.Operation === 8 && index < this.props.Arguments.length - 1 && " And "}
            {this.props.Operation === 7 && <i className="fa fa-times" onClick={() => { this.handleArgChange(this.props.Arguments.filter((arg, iterator) => iterator != index)) }}></i>}
        </div>);

        return (
            <div onChange={this.handleArgumentsChange}>
                {InputSet}
                {this.props.Operation === 7 && <i className="fa fa-plus" onClick={() => { this.handleArgChange([...this.props.Arguments, ""]) }}></i>}
            </div>
        )
    }

    handleArgChange = (args) => {
        this.props.handleChange(args, "Arguments");
    }
}