"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.backgroundExtension = exports.BackgroundExtensionContentWrapper = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const BackgroundMedia_1 = tslib_1.__importDefault(require("../../components/BackgroundMedia/BackgroundMedia.js"));
const utils_1 = require("../../utils/index.js");
const hooks_1 = require("../hooks/index.js");
const b = (0, utils_1.block)('page-constructor');
const BackgroundExtensionContentWrapper = ({ children }) => {
    const { content } = (0, hooks_1.useContent)();
    const { background } = content;
    return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [background && (0, jsx_runtime_1.jsx)(BackgroundMedia_1.default, { ...background, className: b('background') }), children] }));
};
exports.BackgroundExtensionContentWrapper = BackgroundExtensionContentWrapper;
const backgroundExtension = ({ wrapperProps = {}, globalDefaults = {}, }) => {
    return {
        name: 'Background Extension',
        id: '@gravity-ui/page-constructor/background-extension',
        settings: {
            ContentWrapper: exports.BackgroundExtensionContentWrapper,
            contentWrapperProps: wrapperProps,
            globalInputs: [
                {
                    type: 'section',
                    title: 'Background',
                    opened: false,
                    fields: [
                        {
                            type: 'segmentedRadioGroup',
                            title: 'Media type',
                            name: 'background._mediaType',
                            options: [
                                { content: 'Image', value: 'image' },
                                { content: 'Video', value: 'video' },
                                { content: 'YouTube', value: 'youtube' },
                                { content: 'Iframe', value: 'iframe' },
                            ],
                        },
                        {
                            type: 'text',
                            text: 'Light theme',
                            when: [
                                { field: 'background._mediaType', operator: '!==', value: undefined },
                            ],
                        },
                        {
                            type: 'textInput',
                            title: 'Desktop image URL',
                            name: 'background.image.light.desktop',
                            when: [
                                { field: 'background._mediaType', operator: '===', value: 'image' },
                            ],
                        },
                        {
                            type: 'textInput',
                            title: 'Tablet image URL',
                            name: 'background.image.light.tablet',
                            when: [
                                { field: 'background._mediaType', operator: '===', value: 'image' },
                            ],
                        },
                        {
                            type: 'textInput',
                            title: 'Mobile image URL',
                            name: 'background.image.light.mobile',
                            when: [
                                { field: 'background._mediaType', operator: '===', value: 'image' },
                            ],
                        },
                        {
                            type: 'textInput',
                            title: 'Video URL',
                            name: 'background.video.src',
                            when: [
                                { field: 'background._mediaType', operator: '===', value: 'video' },
                            ],
                        },
                        {
                            type: 'textInput',
                            title: 'YouTube URL',
                            name: 'background.youtube',
                            when: [
                                { field: 'background._mediaType', operator: '===', value: 'youtube' },
                            ],
                        },
                        {
                            type: 'textInput',
                            title: 'Iframe URL',
                            name: 'background.iframe.src',
                            when: [
                                { field: 'background._mediaType', operator: '===', value: 'iframe' },
                            ],
                        },
                        {
                            type: 'text',
                            text: 'Dark theme',
                            when: [
                                { field: 'background._mediaType', operator: '!==', value: undefined },
                            ],
                        },
                        {
                            type: 'textInput',
                            title: 'Desktop image URL',
                            name: 'background.image.dark.desktop',
                            when: [
                                { field: 'background._mediaType', operator: '===', value: 'image' },
                            ],
                        },
                        {
                            type: 'textInput',
                            title: 'Tablet image URL',
                            name: 'background.image.dark.tablet',
                            when: [
                                { field: 'background._mediaType', operator: '===', value: 'image' },
                            ],
                        },
                        {
                            type: 'textInput',
                            title: 'Mobile image URL',
                            name: 'background.image.dark.mobile',
                            when: [
                                { field: 'background._mediaType', operator: '===', value: 'image' },
                            ],
                        },
                        {
                            type: 'colorInput',
                            title: 'Color overlay',
                            name: 'background.color',
                        },
                        {
                            type: 'switch',
                            title: 'Parallax effect',
                            name: 'background.parallax',
                        },
                    ],
                },
            ],
            globalDefaults,
        },
    };
};
exports.backgroundExtension = backgroundExtension;
//# sourceMappingURL=BackgroundExtension.js.map
