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

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

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

    const handleTypeChange = (index, newType) => {
        const updated = [..._parameters];
        if (newType.base_type === "list" && !newType.extend_type) {
            newType.extend_type = {
                base_type: "string",
                definition: {}
            };
        }
        updated[index].type = newType;
        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);
    };

    const toggleExpand = (index) => {
        setExpandedStates(prev => ({
            ...prev,
            [index]: !prev[index]
        }));
    };

    return (
        <div className="box">
            <div className="field">
                <div className="control">
                    <button className="button is-primary" onClick={handleAdd}>
                        Add Parameter
                    </button>
                </div>
            </div>
            <div style={{ maxHeight: "50vh", overflowY: "auto" }}>
                {_parameters.map((param, index) => (
                    <div key={index} className="box" style={{ marginBottom: "0.5rem" }}>
                        <div className="field is-grouped is-align-items-end">
                            <div className="control">
                                <label className="label">Name:</label>
                            </div>
                            <div className="control is-expanded">
                                <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">
                            <div className="is-flex is-justify-content-space-between is-align-items-center mb-1">
                                <label className="label mb-0">Type:</label>
                                <button 
                                    className="button is-small"
                                    onClick={() => toggleExpand(index)}
                                >
                                    {expandedStates[index] ? "-" : "+"}
                                </button>
                            </div>
                            {expandedStates[index] && (
                                <div className="control">
                                    <TypeEditor
                                        type={param.type}
                                        onChange={(newType) => handleTypeChange(index, newType)}
                                    />
                                </div>
                            )}
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
};

export default ParametersManager;