import React from "react";
import { renderDescription, renderTitle } from "./common";
import { GridLayout } from "./grid-layout";
import { RowLayout } from "./row-layout";
import { getHelpComponent } from "../help";
export const ObjectFieldTemplate = (props) => {
    const id = props.idSchema.$id;
    if (id === 'root' || !isCollapsible(props.schema)) {
        return renderFieldWithTitle(props);
    }
    if (isCollapsible(props.schema)) {
        return renderCollapsibleField(props);
    }
    return renderProperties(props.properties, props.schema);
};
function renderFieldWithTitle(props) {
    return React.createElement(React.Fragment, {}, renderSectionHeader(props), renderDescription(props.description), renderProperties(props.properties, props.schema));
}
function renderSectionHeader(props) {
    const help = getHelpComponent(props.schema);
    if (!help) {
        return renderTitle(props.title);
    }
    return React.createElement(React.Fragment, {}, renderTitle(props.title), help);
}
function renderCollapsibleField(props) {
    const defaultOpen = !isCollapsed(props.schema);
    const helpElement = getHelpComponent(props.schema, {
        slot: 'header',
    });
    return React.createElement('limel-collapsible-section', {
        header: props.title,
        id: getSchemaObjectPropertyPath(props.formContext.schema, props.idSchema),
        'is-open': defaultOpen,
    }, helpElement, renderDescription(props.description), renderProperties(props.properties, props.schema));
}
function getSchemaObjectPropertyPath(schema, subSchema) {
    var _a, _b;
    const refPrefixLength = 2;
    const matchAllForwardSlashes = /\//g;
    const rootPath = (_a = schema.$ref) === null || _a === void 0 ? void 0 : _a.replace(matchAllForwardSlashes, '.').slice(refPrefixLength);
    const subSchemaPath = (_b = subSchema.$id) === null || _b === void 0 ? void 0 : _b.replace('_', '.properties.');
    return subSchemaPath.replace('root', rootPath);
}
function renderProperties(properties, schema) {
    var _a;
    const layout = (_a = schema.lime) === null || _a === void 0 ? void 0 : _a.layout;
    return renderLayout(properties, layout);
}
function renderLayout(properties, layout) {
    const type = (layout === null || layout === void 0 ? void 0 : layout.type) || 'default';
    const layouts = {
        default: renderDefaultLayout,
        grid: renderGridLayout,
        row: renderRowLayout,
    };
    return layouts[type](properties, layout);
}
function renderDefaultLayout(properties) {
    return React.createElement('div', {
        className: 'limel-form-layout--default',
    }, properties.map((element) => element.content));
}
function renderGridLayout(properties, layout) {
    return React.createElement(GridLayout, {
        options: layout,
    }, properties.map((element) => element.content));
}
function renderRowLayout(properties) {
    return React.createElement(RowLayout, {}, properties.map((element) => element.content));
}
function isCollapsible(schema) {
    var _a;
    return !!((_a = schema.lime) === null || _a === void 0 ? void 0 : _a.collapsible);
}
function isCollapsed(schema) {
    return schema.lime.collapsed !== false;
}
