import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Plus, Trash2 } from "lucide-react";
import { Button, FormItem } from "@vertesia/ui/core";
import clsx from "clsx";
import { useState } from "react";
import { FormContext, FormContextProvider, useForm } from "./FormContext.js";
import { Input } from "./inputs.js";
export function Form({ object, components, onSubmit, children, onChange, disabled }) {
    const _onSubmit = (evt) => {
        evt.stopPropagation();
        evt.preventDefault();
        onSubmit && onSubmit(object.value);
    };
    object.observer = onChange;
    return (_jsx(FormContextProvider, { value: new FormContext(object, components || {}, disabled ?? false), children: _jsx("form", { className: "w-full", onSubmit: _onSubmit, children: children }) }));
}
function GeneratedFormFields() {
    const ctx = useForm();
    return (_jsx("div", { className: 'flex flex-col gap-4 w-full', children: ctx.object.properties.map(renderProperty) }));
}
export function GeneratedForm({ children, ...props }) {
    return (_jsxs(Form, { ...props, children: [_jsx(GeneratedFormFields, {}), children] }));
}
function renderProperty(prop) {
    if (prop.isList) {
        return _jsx(ListField, { object: prop }, prop.name);
    }
    else if (prop.isObject) {
        return _jsx(CompositeField, { object: prop }, prop.name);
    }
    else {
        return _jsx(ScalarField, { object: prop }, prop.name);
    }
}
function renderItemProperty(prop, editor) {
    if (prop.isList) {
        return _jsx(ListField, { object: prop });
    }
    else if (prop.isObject) {
        return _jsx(CompositeField, { object: prop });
    }
    else {
        return _jsx(ScalarField, { object: prop, editor: editor });
    }
}
export function ScalarField({ object, editor, inline = false }) {
    if (!editor) {
        editor = object.schema.editor;
    }
    const { components, disabled } = useForm();
    const Component = (editor && components[editor]) || Input;
    const inputType = object.getInputType();
    if (inputType === 'checkbox') {
        inline = true;
    }
    const handleOnChange = (event) => {
        if (disabled)
            return;
        const { value } = event.target;
        object.value = object.schema.isNumber ? parseFloat(value) : value;
    };
    return (_jsx(FormItem, { label: object.title, required: object.schema.isRequired, description: object.schema.description, className: clsx('flex', inline ? 'flex-row items-center' : 'flex-col'), children: !object.isListItem && _jsx(Component, { object: object, type: inputType, onChange: handleOnChange, disabled: disabled }) }));
}
function CompositeField({ object }) {
    return (_jsxs("div", { className: "flex flex-col gap-4 my-4 py-2 pl-4 border-l-4 border-l-solid border-l-slate-100 dark:border-l-slate-600", children: [!object.isListItem && _jsx("div", { className: 'text-gray-900 dark:text-gray-200 font-semibold', children: object.title }), object.properties.map(renderProperty)] }));
}
function ListField({ object }) {
    const [value, setValue] = useState(object.value || []);
    const { disabled } = useForm();
    const addItem = () => {
        if (disabled)
            return;
        object.add();
        setValue([...object.value]);
    };
    const deleteItem = (index) => {
        if (disabled)
            return;
        object.remove(index);
        setValue([...object.value]);
    };
    return (_jsxs("div", { className: "flex flex-col gap-4 my-4 py-2 pl-4 border-l-4 border-l-solid border-l-slate-100 darK:border-l-slate-600", children: [!object.isListItem && _jsx("div", { className: 'text-gray-900 dark:text-gray-200 font-semibold', children: object.title }), object.items.map((item, index) => {
                return _jsx(ListItem, { object: item, list: object, onDelete: () => deleteItem(index), disabled: disabled }, `${index}-${value[index] ?? ''}`);
            }), _jsx("div", { children: _jsxs(Button, { variant: 'secondary', onClick: addItem, disabled: disabled, children: [_jsx(Plus, { className: "size-6" }), " Add"] }) })] }));
}
function ListItem({ list, object, onDelete, disabled }) {
    return (_jsxs("div", { className: 'flex gap-2 w-full', children: [_jsx("div", { className: "flex-1", children: renderItemProperty(object, list.schema.arraySchema.editor) }), _jsx(Button, { variant: 'secondary', onClick: onDelete, disabled: disabled, children: _jsx(Trash2, { className: 'size-4' }) })] }));
}
//# sourceMappingURL=Form.js.map