import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { useState } from "react";
import { toBool } from "../../util/Utility";
const RadioButtonElement = ({ field, onRemoveField, onEditField }) => {
    var _a, _b;
    const [edit, setEdit] = useState(false);
    const [newOption, setNewOption] = useState("");
    const handleAddOption = () => {
        if (newOption.trim() !== "") {
            const updatedOptions = [...(field.options || []), newOption];
            onEditField(field.id, { options: updatedOptions });
            setNewOption("");
        }
    };
    const handleRemoveOption = (optionIndex) => {
        var _a;
        const updatedOptions = (_a = field.options) === null || _a === void 0 ? void 0 : _a.filter((_, index) => index !== optionIndex);
        onEditField(field.id, { options: updatedOptions });
    };
    return (_jsx("div", { className: field.className, children: _jsxs("div", { className: "form-element frm-element", children: [_jsxs("label", { children: [field.label, " ", field.required ? "*" : ""] }), _jsx("div", { children: (_a = field.options) === null || _a === void 0 ? void 0 : _a.map((option, index) => (_jsxs("div", { className: "options", children: [_jsx("input", { type: "radio", id: `${field.id}-${index}`, name: field.label, value: option, required: field.required }), _jsx("label", { htmlFor: `${field.id}-${index}`, children: option })] }, index))) }), _jsxs("div", { className: "action-btns", children: [_jsx("button", { className: "frm-btn-red", onClick: () => {
                                onRemoveField(field.id);
                                setEdit(false);
                            }, children: _jsx("i", { className: "fa fa-trash" }) }), _jsx("button", { className: "frm-btn-blue", onClick: () => setEdit(!edit), children: _jsx("i", { className: "fa fa-pencil" }) })] }), edit && (_jsxs("div", { className: "edit-form", children: [_jsxs("div", { className: "form-field", children: [_jsx("label", { children: "Label" }), _jsx("input", { type: "text", value: field.label, onChange: (e) => onEditField(field.id, { label: e.target.value }) })] }), _jsxs("div", { className: "form-field mt-2", children: [_jsx("label", { children: "Required" }), _jsxs("select", { id: "required", defaultValue: field.required ? "Yes" : "No", onChange: (e) => onEditField(field.id, { required: toBool(e.target.value) }), children: [_jsx("option", { value: "Yes", children: "Yes" }), _jsx("option", { value: "No", children: "No" })] })] }), _jsxs("div", { className: "form-field mt-3", children: [_jsx("div", { className: "add-option ", children: _jsxs("form", { className: "flex", onSubmit: (e) => {
                                            e.preventDefault();
                                            handleAddOption();
                                        }, children: [_jsx("input", { type: "text", value: newOption, onChange: (e) => setNewOption(e.target.value), placeholder: "New option" }), _jsx("button", { type: "submit", className: "btn-blue", children: _jsx("i", { className: "fa fa-plus" }) })] }) }), _jsxs("div", { className: "mt-3", children: [_jsx("label", { children: "Options" }), _jsx("ul", { className: "option-list", children: (_b = field.options) === null || _b === void 0 ? void 0 : _b.map((option, index) => (_jsxs("li", { className: "option-item", children: [_jsx("div", { className: "option-label", children: option }), _jsx("button", { style: { width: '30px' }, className: "frm-btn-red", onClick: () => handleRemoveOption(index), children: _jsx("i", { className: "fa fa-trash" }) })] }, index))) })] })] })] }))] }) }, field.id));
};
export default RadioButtonElement;
