"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const components_1 = require("../../components/index.js");
const InnerForm_1 = tslib_1.__importDefault(require("../../components/InnerForm/InnerForm.js"));
const mobileContext_1 = require("../../gravity-blocks/context/mobileContext/index.js");
const theme_1 = require("../../gravity-blocks/context/theme/index.js");
const grid_1 = require("../../gravity-blocks/grid/index.js");
const useDeviceValue_1 = require("../../gravity-blocks/hooks/useDeviceValue.js");
const models_1 = require("../../models/index.js");
const sub_blocks_1 = require("../../sub-blocks/index.js");
const utils_1 = require("../../utils/index.js");
const utils_2 = require("./utils.js");
const b = (0, utils_1.block)('form-block');
const colSizes = { [grid_1.GridColumnSize.Lg]: 6, [grid_1.GridColumnSize.All]: 12 };
const Form = (props) => {
    const { formData, title, textContent, direction = models_1.FormBlockDirection.Center, background, customFormNode, additionalContentNode, } = props;
    const [contentLoaded, setContentLoaded] = React.useState(false);
    const isMobile = React.useContext(mobileContext_1.MobileContext);
    const theme = (0, theme_1.useTheme)();
    const themedBackground = (0, utils_1.getThemedValue)(background, theme) || undefined;
    const themedBackgroundStyle = (0, useDeviceValue_1.useDeviceValue)(themedBackground?.style) || undefined;
    const withBackground = Boolean(themedBackground &&
        (themedBackground.src ||
            themedBackground.desktop ||
            (0, utils_2.hasBackgroundCSS)(themedBackgroundStyle ?? {})));
    const onContentLoad = React.useCallback(() => {
        setContentLoaded(true);
    }, []);
    if (!formData && !customFormNode) {
        return null;
    }
    let formType;
    if ((0, models_1.isYandexDataForm)(formData)) {
        formType = models_1.FormBlockDataTypes.YANDEX;
    }
    else if ((0, models_1.isHubspotDataForm)(formData)) {
        formType = models_1.FormBlockDataTypes.HUBSPOT;
    }
    return ((0, jsx_runtime_1.jsxs)("div", { className: b({
            'with-background': withBackground,
            'form-type': formType,
        }), children: [themedBackground && ((0, jsx_runtime_1.jsx)(components_1.BackgroundImage, { ...themedBackground, style: themedBackgroundStyle, className: b('media'), imageClassName: b('image') })), (0, jsx_runtime_1.jsx)(grid_1.Grid, { children: (0, jsx_runtime_1.jsxs)(grid_1.Row, { alignItems: direction === models_1.FormBlockDirection.Center
                        ? grid_1.GridAlignItems.Center
                        : grid_1.GridAlignItems.Start, className: b('row', {
                        direction,
                    }), children: [(0, jsx_runtime_1.jsx)(grid_1.Col, { sizes: colSizes, className: b('content-col'), children: textContent && ((0, jsx_runtime_1.jsxs)("div", { className: b('content-wrapper'), children: [(0, jsx_runtime_1.jsx)(sub_blocks_1.Content, { theme: "default", ...textContent, centered: direction === models_1.FormBlockDirection.Center, colSizes: { all: 12 }, className: b('content') }), additionalContentNode && ((0, jsx_runtime_1.jsx)("div", { className: b('additional-content', {
                                            centered: direction === models_1.FormBlockDirection.Center,
                                        }), children: additionalContentNode }))] })) }), (0, jsx_runtime_1.jsx)(grid_1.Col, { sizes: colSizes, className: b('form-col'), children: (0, jsx_runtime_1.jsx)("div", { className: b('form-wrapper'), children: (0, jsx_runtime_1.jsx)("div", { className: b('full-form', {
                                        hidden: !contentLoaded,
                                    }), children: customFormNode || ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [title && ((0, jsx_runtime_1.jsx)(components_1.Title, { title: {
                                                    text: title,
                                                    textSize: 's',
                                                }, className: b('title', { mobile: isMobile }), colSizes: { all: 12 } })), (0, jsx_runtime_1.jsx)(InnerForm_1.default, { className: b('form'), formData: formData, onContentLoad: onContentLoad })] })) }) }) })] }) })] }));
};
exports.default = Form;
//# sourceMappingURL=Form.js.map
