import React, {useEffect, useState} from "react";
import TypeEditor from "./TypeEditor";

const ParametersManager = ({ parameters, onChange }) => {
    const [_parameters, setParameters] = useState(parameters || []);

    const handleAdd = () => {
        const updated = [
            ..._parameters,
            {
                name: "",
                type: { base_type: "string" }
            }
        ];
        setParameters(updated);
        onChange(updated);
    };
    useEffect(() => {
        setParameters(parameters);
    }, [parameters]);

    const handleNameChange = (index, newName) => {
        const updated = [..._parameters];
        updated[index].name = newName;
        setParameters(updated);
        onChange(updated);
    };

    const handleDelete = (index) => {
        const updated = [..._parameters];
        updated.splice(index, 1);
        setParameters(updated);
        onChange(updated);
    };

    return (
        <div className="box">
            <div className="field">
                <div className="control">
                    <button className="button is-primary" onClick={handleAdd}>
                        Add Parameter
                    </button>
                </div>
            </div>
            {_parameters.map((param, index) => (
                <div key={index} className="box" style={{ marginBottom: "1rem" }}>
                    <div className="field is-grouped is-grouped-multiline">
                        <div className="control is-expanded">
                            <label className="label">Name:</label>
                            <input
                                type="text"
                                className="input"
                                value={param.name}
                                onChange={(e) => handleNameChange(index, e.target.value)}
                                placeholder="Parameter name"
                            />
                        </div>
                        <div className="control">
                            <button
                                className="button is-danger"
                                onClick={() => handleDelete(index)}
                            >
                                Delete
                            </button>
                        </div>
                    </div>
                    <div className="field">
                        <label className="label">Type:</label>
                        <div className="control">
                            <TypeEditor
                                type={param.type}
                                onChange={(newType) => {
                                    const updated = [..._parameters];
                                    updated[index].type = newType;
                                    setParameters(updated);
                                    onChange(updated);
                                }}
                            />
                        </div>
                    </div>
                </div>
            ))}
        </div>
    );
};

export default ParametersManager;