"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Form = void 0;
const react_1 = __importStar(require("react"));
const View_1 = require("../View");
const id_1 = require("../../utilities/id");
const forms_1 = require("../../utilities/forms");
const Portal_1 = require("../Portal");
const AppContext_1 = require("../AppContext");
const Form_css_1 = __importDefault(require("./Form.css"));
const createId = id_1.createIdCreator('Form');
function Form({ onSubmit, children, implicitSubmit = true, disabled = false, id, }) {
    const translate = AppContext_1.useTranslate();
    const generatedId = id_1.useId(undefined, createId);
    const formId = id !== null && id !== void 0 ? id : generatedId;
    const nested = forms_1.useContainingForm() != null;
    const formDetails = react_1.useMemo(() => ({ id: formId, nested }), [
        formId,
        nested,
    ]);
    let implicitSubmitContent = null;
    if (implicitSubmit) {
        implicitSubmitContent = (<View_1.View visibility="hidden">
        <ImplicitSubmitter disabled={disabled} form={formDetails}>
          {typeof implicitSubmit === 'string'
            ? implicitSubmit
            : translate('submit')}
        </ImplicitSubmitter>
      </View_1.View>);
    }
    const handleSubmit = (event) => {
        event.preventDefault();
        event.stopPropagation();
        if (disabled)
            return;
        onSubmit();
    };
    return nested ? (<>
      <forms_1.FormContext.Provider value={formDetails}>
        {children}
        {implicitSubmitContent}
      </forms_1.FormContext.Provider>
      <Portal_1.Portal>
        <form action="" method="POST" noValidate className={Form_css_1.default.Form} id={formId} onSubmit={handleSubmit}/>
      </Portal_1.Portal>
    </>) : (<form action="" method="POST" noValidate className={Form_css_1.default.Form} id={formId} onSubmit={handleSubmit}>
      <forms_1.FormContext.Provider value={formDetails}>
        {children}
        {implicitSubmitContent}
      </forms_1.FormContext.Provider>
    </form>);
}
exports.Form = Form;
function ImplicitSubmitter({ form, children, disabled, }) {
    return (<button type="submit" disabled={disabled} tabIndex={-1} aria-hidden form={form.nested ? form.id : undefined}>
      {children}
    </button>);
}