import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef, useState } from "react";
import Field from "./Field";
import Textbox2 from "./Textbox2";
import Transitiondiv from "./Transitiondiv";
import '../resources.css';
import Date from "./Date";
import Arrayinput from "./Arrayinput";
import loading_gif from '../assets/images/loading.gif';
const Form = (props) => {
    const fields = useRef([
        { id: "string", component: Textbox2 },
        { id: "number", component: Textbox2 },
        { id: "date", component: Date },
        { id: "array", component: Arrayinput }
    ]).current;
    const [loading, setLoading] = useState(false);
    //console.log("Initial State",props.initialState)
    const [formData, setFormData] = useState(props.dataSchema.map((item) => ({ id: item.key, data: props.initialState ? (props.initialState.find((item2) => item2.id == item.key) ? props.initialState.find((item2) => item2.id == item.key).data : undefined) : undefined })));
    const handler = (id, value) => {
        setFormData(formData.map((item) => item.id == id ? { ...item, data: value } : item));
    };
    const submit = async () => {
        setLoading(true);
        await props.eventHandler({ name: "submit", data: formData });
        setLoading(false);
    };
    return (_jsxs("div", { className: "avamodule-form-wrapper", children: [_jsx("div", { className: "avamodule-form-fields-wrapper", children: formData.map((item, i) => _jsx(Field, { id: item.id, hideTitle: true, classId: "form", onUpdate: { event: "oninput" }, index: i, value: item.data, formHandler: handler, componentInfo: { component: getComponent(props.dataSchema.find((item2) => item.id == item2.key)?.dataType, props.dataSchema.find((item2) => item.id == item2.key)?.dataTemplate), props: { placeholder: props.dataSchema[i].description, title: props.dataSchema[i].label } } }, item.id)) }), _jsxs("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "flex-end", gap: "10px" }, children: [_jsx(Transitiondiv, { wrapperStyles: { alignSelf: "flex-end" }, effect: "pop", type: "in", children: _jsx("button", { className: "button-dark", style: { alignSelf: "flex-end" }, onClick: !loading ? submit : () => { }, children: _jsx("p", { className: "nextbutton-text", children: "Submit" }) }) }), loading
                        ?
                            _jsx(Transitiondiv, { effect: "pop", type: "in", children: _jsx("img", { src: loading_gif, style: { width: "22px", height: "22px", objectFit: "contain" } }) })
                        :
                            null] })] }));
};
const getComponent = (type, template) => {
    switch (type) {
        case "string":
            switch (template) {
                case "date":
                    return Date;
                default:
                    return Textbox2;
            }
            break;
        case "number":
            switch (template) {
                default:
                    return Textbox2;
            }
            break;
        case "array":
            return Arrayinput;
            break;
    }
};
export default Form;
//# sourceMappingURL=Form.js.map