import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { useState } from "react";
import { toBool } from "../../util/Utility";
const TextareaElement = ({ field, onRemoveField, onEditField }) => {
    const [edit, setEdit] = useState(false);
    return (_jsx("div", { className: field.className, children: _jsxs("div", { className: "form-element frm-element", children: [_jsxs("label", { children: [field.label, " ", field.required ? '*' : ''] }), _jsx("textarea", { required: field.required, placeholder: field.placeholder }), _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: "Placeholder" }), _jsx("input", { type: "text", value: field.placeholder, onChange: (e) => onEditField(field.id, { placeholder: 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" })] })] })] }))] }) }, field.id));
};
export default TextareaElement;
