import React, { useState } from "react";

const EnumsEditor = ({ enums, onChange }) => {
    const [_enums, setEnums] = useState(enums || []);

    return (
        <div className="box">
            <ul>
                {_enums.map((item, index) => (
                    <li key={index} className="field has-addons" style={{ marginBottom: "0.5rem" }}>
                        <div className="control is-expanded">
                            <input
                                className="input is-small"
                                type="text"
                                value={item}
                                onChange={(e) => {
                                    const updated = [..._enums];
                                    updated[index] = e.target.value;
                                    setEnums(updated);
                                    onChange(updated);
                                }}
                            />
                        </div>
                        <div className="control">
                            <button
                                className="button is-small is-danger"
                                type="button"
                                onClick={() => {
                                    const updated = [..._enums];
                                    updated.splice(index, 1);
                                    setEnums(updated);
                                    onChange(updated);
                                }}
                            >
                                <span className="icon is-small">
                                    <i className="fas fa-times" />
                                </span>
                            </button>
                        </div>
                    </li>
                ))}
            </ul>
            <div className="field">
                <div className="control">
                    <button
                        className="button is-small is-primary"
                        type="button"
                        onClick={() => {
                            const updated = [..._enums, ""];
                            setEnums(updated);
                            onChange(updated);
                        }}
                    >
                        <span className="icon is-small">
                          <i className="fas fa-plus" />
                        </span>
                        <span>Add Enum</span>
                    </button>
                </div>
            </div>
        </div>
    );
};

export default EnumsEditor;