import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment, useState } from "react";
import { FormFieldList } from "./components/data/FormData";
import InputElement from "./components/form/formElements/InputElement";
import TextareaElement from "./components/form/formElements/TextareaElement";
import SelectElement from "./components/form/formElements/SelectElement";
import CheckboxElement from "./components/form/formElements/CheckboxElement";
import RadioButtonElement from "./components/form/formElements/RadioButtonElement";
import FileElement from "./components/form/formElements/FileElement";
import FormSettings from "./components/form/FormSettings";
import './components/style/index.css';
import 'font-awesome/css/font-awesome.min.css';
const FormBuilder = ({ onGetFormJson }) => {
    const [selectedFields, setSelectedFields] = useState([]);
    const handleAddField = (fieldKey) => {
        setSelectedFields((prevFields) => [
            ...prevFields,
            Object.assign({ id: Date.now() }, FormFieldList[fieldKey]),
        ]);
    };
    const handleRemoveField = (fieldId) => {
        setSelectedFields((prevFields) => prevFields.filter((field) => field.id !== fieldId));
    };
    const handleEditField = (fieldId, updatedField) => {
        setSelectedFields((prevFields) => prevFields.map((field) => field.id === fieldId ? Object.assign(Object.assign({}, field), updatedField) : field));
    };
    const handleSaveChange = () => {
        onGetFormJson(selectedFields);
    };
    const renderField = (field) => {
        switch (field.type) {
            case 'text':
            case 'number':
            case 'url':
            case 'date':
            case 'email':
                return (_jsx(InputElement, { field: field, onRemoveField: handleRemoveField, onEditField: handleEditField }));
            case 'textarea':
                return (_jsx(TextareaElement, { field: field, onRemoveField: handleRemoveField, onEditField: handleEditField }));
            case 'select':
                return (_jsx(SelectElement, { field: field, onRemoveField: handleRemoveField, onEditField: handleEditField }));
            case 'checkbox':
                return (_jsx(CheckboxElement, { field: field, onRemoveField: handleRemoveField, onEditField: handleEditField }));
            case 'radio':
                return (_jsx(RadioButtonElement, { field: field, onRemoveField: handleRemoveField, onEditField: handleEditField }));
            case 'file':
                return (_jsx(FileElement, { field: field, onRemoveField: handleRemoveField, onEditField: handleEditField }));
            default:
                return null;
        }
    };
    return (_jsxs("div", { className: "frm-container", children: [_jsxs("div", { className: "frm-row", children: [_jsx("div", { className: "frm-col-3 frm-element-section", children: _jsx(FormSettings, { handleAddField: handleAddField }) }), _jsx("div", { className: "frm-col-9", children: _jsx("div", { className: "frm-form", children: selectedFields.length === 0 ? (_jsx("div", { className: "center-message", children: _jsxs("div", { children: [_jsx("h2", { children: "Your Custom Form" }), _jsx("p", { children: "Start building your form by selecting elements from the left sidebar." }), _jsx("p", { children: "Click on fields to customize your layout, and adjust settings to fit your needs." })] }) })) : selectedFields.map((field, i) => (_jsx(Fragment, { children: renderField(field) }, i))) }) })] }), _jsx("div", { className: "text-right mt-3", children: _jsx("button", { onClick: () => handleSaveChange(), className: "frm-btn btn-submit", children: "Save Changes" }) })] }));
};
export default FormBuilder;
