import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import BackgroundMedia from "../../components/BackgroundMedia/BackgroundMedia.js";
import { block } from "../../utils/index.js";
import { useContent } from "../hooks/index.js";
const b = block('page-constructor');
export const BackgroundExtensionContentWrapper = ({ children }) => {
    const { content } = useContent();
    const { background } = content;
    return (_jsxs(React.Fragment, { children: [background && _jsx(BackgroundMedia, { ...background, className: b('background') }), children] }));
};
export const backgroundExtension = ({ wrapperProps = {}, globalDefaults = {}, }) => {
    return {
        name: 'Background Extension',
        id: '@gravity-ui/page-constructor/background-extension',
        settings: {
            ContentWrapper: 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,
        },
    };
};
//# sourceMappingURL=BackgroundExtension.js.map
