"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FormattingEditForm = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const nano_theme_1 = require("nano-theme");
const use_t_1 = require("use-t");
const FormattingEdit_1 = require("../views/edit/FormattingEdit");
const ContextMenu_1 = require("nice-ui/lib/4-card/ContextMenu");
const Button_1 = require("nice-ui/lib/2-inline-block/Button");
const hooks_1 = require("../../../../web/react/hooks");
const blockClass = (0, nano_theme_1.rule)({
    maxW: '600px',
});
const FormattingEditForm = ({ formatting, onSave }) => {
    const [t] = (0, use_t_1.useT)();
    (0, hooks_1.useSyncStoreOpt)(formatting.conf()?.api);
    const validation = formatting.validate();
    const valid = validation === 'good' || validation === 'fine';
    const handleSubmit = () => {
        onSave?.();
    };
    return (React.createElement("form", { className: blockClass, onSubmit: (e) => {
            e.preventDefault();
            handleSubmit();
        } },
        React.createElement("div", { style: { padding: '16px' } },
            React.createElement(FormattingEdit_1.FormattingEdit, { formatting: formatting, onSave: handleSubmit })),
        React.createElement(ContextMenu_1.ContextSep, { line: true }),
        React.createElement("div", { style: { padding: '16px' } },
            React.createElement(Button_1.Button, { small: true, lite: !valid, primary: validation === 'good', block: true, disabled: !valid, submit: true, onClick: () => { } }, t('Done')))));
};
exports.FormattingEditForm = FormattingEditForm;
//# sourceMappingURL=FormattingEditForm.js.map