"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FormGroupColumn = void 0;
const react_1 = __importDefault(require("react"));
const components_1 = require("../../../components");
const Item_1 = require("./Item");
const utils_1 = require("../utils");
const varsUtilities_1 = require("../../../varsUtilities");
const inlines_1 = require("inlines");
const FormGroupColumn = ({ onChange, parsedData, fieldWidth, onChangeField, labelWidth, hasChanges, valuesChanged, values, alwaysAccept, setChanges, autoFocus, style, confirmationLabel, confirmationVariant, field, }) => {
    const fields = [];
    let hasAutoFocus = false;
    for (const d of parsedData) {
        fields.push(react_1.default.createElement(Item_1.FormItem, { autoFocus: !hasAutoFocus && autoFocus, fieldWidth: fieldWidth, width: labelWidth, key: d.field, item: d, onChange: onChangeField, value: hasChanges
                ? (0, utils_1.getValue)(d.field, valuesChanged.current) ??
                    d.value ??
                    (0, utils_1.getValue)(d.field, values)
                : d.value ?? (0, utils_1.getValue)(d.field, values), onChangeObj: onChange, objValues: values, hasChanges: hasChanges, valuesChanged: valuesChanged, setChanges: setChanges, alwaysAccept: alwaysAccept }));
        hasAutoFocus = true;
    }
    if (confirmationVariant === 'modal') {
        return (react_1.default.createElement(react_1.default.Fragment, null,
            react_1.default.createElement(components_1.Column, { style: {
                    width: '100%',
                    height: '100%',
                    position: 'relative',
                    ...style,
                } }, fields),
            react_1.default.createElement(inlines_1.styled.div, { style: {
                    // position: 'sticky',
                    // bottom: 0,
                    left: 0,
                    right: 0,
                    position: 'sticky',
                    top: 'auto',
                    bottom: 0,
                    overflow: 'hidden',
                    background: (0, varsUtilities_1.color)('standalone', 'modal', 'default'),
                    display: 'flex',
                    justifyContent: 'end',
                    alignItems: 'center',
                    '& > * + *': {
                        marginLeft: '24px',
                    },
                    minHeight: 98,
                    padding: '24px 32px 32px',
                    // margin: '0 -32px',
                    borderTop: `1px solid ${(0, varsUtilities_1.color)('border', 'default', 'strong')}`,
                } }, alwaysAccept || !hasChanges ? null : (react_1.default.createElement(components_1.Confirmation, { label: confirmationLabel, variant: "buttons", onCancel: () => {
                    valuesChanged.current = {};
                    setChanges(false);
                }, onConfirm: async () => {
                    await onChange(valuesChanged.current);
                    valuesChanged.current = {};
                    setChanges(false);
                } })))));
    }
    return (react_1.default.createElement(components_1.Column, { style: {
            width: '100%',
            ...style,
        } },
        fields,
        alwaysAccept || !hasChanges
            ? null
            : confirmationVariant !== 'none' && (react_1.default.createElement(components_1.Confirmation, { label: confirmationLabel, variant: confirmationVariant, onCancel: () => {
                    valuesChanged.current = {};
                    setChanges(false);
                }, onConfirm: async () => {
                    await onChange(valuesChanged.current);
                    valuesChanged.current = {};
                    setChanges(false);
                } }))));
};
exports.FormGroupColumn = FormGroupColumn;
//# sourceMappingURL=index.js.map