import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { useState } from "react";
import { toBool } from "../../util/Utility";
const FileElement = ({ field, onRemoveField, onEditField }) => {
    var _a;
    const [edit, setEdit] = useState(false);
    const [newOption, setNewOption] = useState("");
    const fileExtensions = [".jpg", ".png", ".pdf", ".doc", ".docx"]; // Predefined extensions
    const handleAddOption = () => {
        var _a;
        if (newOption && !((_a = field.options) === null || _a === void 0 ? void 0 : _a.includes(newOption))) {
            onEditField(field.id, { options: [...(field.options || []), newOption] });
            setNewOption("");
        }
    };
    const handleRemoveOption = (index) => {
        const updatedOptions = [...(field.options || [])];
        updatedOptions.splice(index, 1);
        onEditField(field.id, { options: updatedOptions });
    };
    return (_jsx("div", { className: field.className, children: _jsxs("div", { className: "form-element frm-element", children: [_jsxs("div", { className: "file-upload-container", children: [_jsxs("label", { className: "file-label", children: [field.label, " ", field.required ? "*" : ""] }), _jsxs("div", { className: "file-upload-box", onClick: () => { var _a; return (_a = document.getElementById(`file-input-${field.id}`)) === null || _a === void 0 ? void 0 : _a.click(); }, children: [_jsx("p", { className: "file-upload-text", children: "Click to upload or drag and drop a file here" }), _jsx("button", { type: "button", className: "file-upload-button", children: "Choose File" }), _jsx("input", { type: "file", id: `file-input-${field.id}`, accept: (field.options || []).join(","), className: "file-input-hidden", required: field.required, onChange: (e) => console.log(e.target.files) })] })] }), _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: [_jsxs("div", { className: "add-option flex", children: [_jsxs("select", { value: newOption, onChange: (e) => setNewOption(e.target.value), children: [_jsx("option", { value: "", children: "Select file type" }), fileExtensions.map((ext, index) => (_jsx("option", { value: ext, children: ext }, index)))] }), _jsx("button", { onClick: handleAddOption, 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: (_a = field.options) === null || _a === void 0 ? void 0 : _a.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 FileElement;
