import React, { useEffect, useState } from "react";
import { materialRenderers, materialCells
// @ts-ignore
 } from "@jsonforms/material-renderers";
// @ts-ignore
import { JsonForms } from "@jsonforms/react";
import { useCloudUiProvider } from "../Providers";
const API_ENDPOINT = "https://cloud-ui-ishbaid.vercel.app/api/forms";
const FASTGEN_ENDPINT = "https://cloudui.fastgenapp.com/forms";
export const CloudForm = ({ id, onChange, onCtaClick, defaultValues, isDraft = false }) => {
    var _a;
    const [formSchema, setFormSchema] = useState(null);
    const [uiSchema, setUiSchema] = useState(null);
    const [initialData, setInitialData] = useState(defaultValues !== null && defaultValues !== void 0 ? defaultValues : null);
    const [formResponse, setFormResponse] = useState(null);
    const [cta, setCta] = useState(null);
    const { apiKey } = useCloudUiProvider();
    const buttonColor = cta && ((_a = cta.primary) === null || _a === void 0 ? void 0 : _a.color) ? `bg-$[${cta.primary.color}]` : "bg-indigo-600";
    useEffect(() => {
        fetchFormData();
    }, []);
    const handleChange = (state) => {
        if (onChange) {
            onChange(state);
        }
        setFormResponse(state.data);
    };
    const handleCtaClick = async () => {
        if (onCtaClick) {
            onCtaClick();
        }
        await fetch(FASTGEN_ENDPINT + "/" + id + "/responses", {
            method: "POST",
            body: JSON.stringify({
                responseData: formResponse,
                apiKey
            })
        });
    };
    const fetchFormData = async () => {
        const response = await fetch(API_ENDPOINT + "/" + id, {
            headers: new Headers({
                "X-Api-Key": apiKey
            })
        });
        let data = (await response.json()).form;
        if (isDraft) {
            data = data.draft;
        }
        if (Object.hasOwnProperty.call(data, "formSchema")) {
            setFormSchema(data.formSchema);
        }
        if (Object.hasOwnProperty.call(data, "uiSchema")) {
            setUiSchema(data.uiSchema);
        }
        if (Object.hasOwnProperty.call(data, "defaultValues")) {
            setInitialData(data.defaultValues);
        }
        if (Object.hasOwnProperty.call(data, "cta")) {
            setCta(data.cta);
        }
    };
    return formSchema ? (React.createElement(React.Fragment, null,
        React.createElement(JsonForms, { schema: formSchema, uischema: uiSchema, data: initialData, renderers: materialRenderers, cells: materialCells, onChange: handleChange }),
        cta && (React.createElement("div", { className: "flex flex-col" },
            React.createElement("button", { type: "button", className: "self-end rounded-md bg-indigo-600 my-2 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600", onClick: handleCtaClick }, cta.primary.label))))) : (React.createElement("div", null, "Loading..."));
};
//# sourceMappingURL=CloudForm.js.map