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