<?php

namespace YOOtheme;

return [
    'name' => 'popover',
    'title' => 'Popover',
    'group' => 'multiple items',
    'icon' => '${url:images/icon.svg}',
    'iconSmall' => '${url:images/iconSmall.svg}',
    'element' => true,
    'container' => true,
    'width' => 500,
    'defaults' => [
        'show_title' => true,
        'show_meta' => true,
        'show_content' => true,
        'show_image' => true,
        'show_link' => true,
        'drop_mode' => 'hover',
        'drop_position' => 'top-center',
        'card_style' => 'default',
        'title_hover_style' => 'reset',
        'title_element' => 'h3',
        'meta_style' => 'text-meta',
        'meta_align' => 'below-title',
        'meta_element' => 'div',
        'image_card_padding' => true,
        'image_svg_color' => 'emphasis',
        'link_text' => 'Read more',
        'link_style' => 'default',
        'margin_top' => 'default',
        'margin_bottom' => 'default',
    ],
    'placeholder' => [
        'children' => [
            [
                'type' => 'popover_item',
                'props' => [
                    'position_x' => 20,
                    'position_y' => 50,
                ],
            ],
            [
                'type' => 'popover_item',
                'props' => [
                    'position_x' => 50,
                    'position_y' => 20,
                ],
            ],
            [
                'type' => 'popover_item',
                'props' => [
                    'position_x' => 70,
                    'position_y' => 70,
                ],
            ],
        ],
    ],
    'updates' => __DIR__ . '/updates.php',
    'templates' => [
        'render' => __DIR__ . '/templates/template.php',
        'content' => __DIR__ . '/templates/content.php',
    ],
    'transforms' => [
        'render' => function ($node) {
            if (empty($node->props['background_image'])) {
                $node->props['background_image'] = Url::to(
                    '~assets/images/element-image-placeholder.png',
                );
            }
        },
    ],
    'fields' => [
        'background_image' => [
            'label' => 'Image',
            'type' => 'image',
            'source' => true,
        ],
        'background_image_width' => [
            'label' => 'Image Width',
            'attrs' => [
                'placeholder' => 'auto',
            ],
            'enable' => 'background_image',
        ],
        'background_image_height' => [
            'label' => 'Image Height',
            'attrs' => [
                'placeholder' => 'auto',
            ],
            'enable' => 'background_image',
        ],
        'background_image_alt' => [
            'label' => 'Image Alt',
            'source' => true,
            'enable' => 'background_image',
        ],
        'content' => [
            'label' => 'Items',
            'type' => 'content-items',
            'item' => 'popover_item',
            'media' => [
                'type' => 'image',
                'item' => [
                    'title' => 'title',
                    'image' => 'src',
                ],
            ],
        ],
        'show_title' => [
            'label' => 'Display',
            'type' => 'checkbox',
            'text' => 'Show the title',
        ],
        'show_meta' => [
            'type' => 'checkbox',
            'text' => 'Show the meta text',
        ],
        'show_content' => [
            'type' => 'checkbox',
            'text' => 'Show the content',
        ],
        'show_image' => [
            'type' => 'checkbox',
            'text' => 'Show the image',
        ],
        'show_link' => [
            'description' =>
                'Show or hide content fields without the need to delete the content itself.',
            'type' => 'checkbox',
            'text' => 'Show the link',
        ],
        'background_image_focal_point' => [
            'label' => 'Focal Point',
            'description' => 'Set a focal point to control cropping.',
            'type' => 'select',
            'options' => [
                'Top Left' => 'top-left',
                'Top Center' => 'top-center',
                'Top Right' => 'top-right',
                'Center Left' => 'center-left',
                'Center Center' => '',
                'Center Right' => 'center-right',
                'Bottom Left' => 'bottom-left',
                'Bottom Center' => 'bottom-center',
                'Bottom Right' => 'bottom-right',
            ],
            'source' => true,
        ],
        'height_expand' => [
            'label' => 'Height',
            'description' =>
                'Expand the height of the element to fill the available space in the column. Alternatively, the height can adapt to the height of the viewport, and optionally subtract the header height to fill the first visible viewport.',
            'type' => 'checkbox',
            'text' => 'Fill the available column space',
        ],
        'height_viewport' => [
            'type' => 'checkbox',
            'text' => 'Set viewport height',
            'enable' => '!height_expand',
        ],
        'height_viewport_height' => [
            'type' => 'number',
            'attrs' => [
                'placeholder' => '100',
                'min' => 0,
                'step' => 10,
            ],
            'enable' => '!height_expand && height_viewport',
        ],
        'height_viewport_offset' => [
            'type' => 'checkbox',
            'text' => 'Subtract height above',
            'enable' => '!height_expand && height_viewport && (height_viewport_height || 0) <= 100',
        ],
        'background_image_loading' => [
            'label' => 'Loading',
            'description' =>
                'By default, images are loaded lazy. Enable eager loading for images in the initial viewport.',
            'type' => 'checkbox',
            'text' => 'Load image eagerly',
        ],
        'background_image_border' => [
            'label' => 'Border',
            'description' => 'Select the image border style.',
            'type' => 'select',
            'options' => [
                'None' => '',
                'Rounded' => 'rounded',
                'Circle' => 'circle',
                'Pill' => 'pill',
            ],
        ],
        'marker_color' => [
            'label' => 'Color',
            'description' => 'Set light or dark color mode.',
            'type' => 'select',
            'options' => [
                'None' => '',
                'Light' => 'light',
                'Dark' => 'dark',
            ],
        ],
        'drop_mode' => [
            'label' => 'Mode',
            'description' => 'Display the popover on click or hover.',
            'type' => 'select',
            'options' => [
                'Click' => 'click',
                'Hover' => 'hover',
            ],
        ],
        'drop_position' => [
            'label' => 'Position',
            'description' =>
                'Select the popover alignment to its marker. If the popover doesn\'t fit its container, it will flip automatically.',
            'type' => 'select',
            'options' => [
                'Top' => 'top-center',
                'Bottom' => 'bottom-center',
                'Left' => 'left-center',
                'Right' => 'right-center',
            ],
        ],
        'drop_width' => [
            'label' => 'Width',
            'type' => 'number',
            'description' => 'Enter a width for the popover in pixels.',
            'attrs' => [
                'placeholder' => '300',
            ],
        ],
        'card_style' => [
            'label' => 'Style',
            'description' => 'Select a card style.',
            'type' => 'select',
            'options' => [
                'Default' => 'default',
                'Primary' => 'primary',
                'Secondary' => 'secondary',
                'Overlay' => 'overlay',
            ],
        ],
        'card_link' => [
            'label' => 'Link',
            'description' => 'Link the whole card if a link exists.',
            'type' => 'checkbox',
            'text' => 'Link card',
            'enable' => 'show_link',
        ],
        'card_size' => [
            'label' => 'Padding',
            'description' => 'Set the padding between the card\'s edge and its content.',
            'type' => 'select',
            'options' => [
                'Small' => 'small',
                'Default' => '',
                'Large' => 'large',
            ],
        ],
        'title_style' => [
            'label' => 'Style',
            'description' =>
                'Title styles differ in font-size but may also come with a predefined color, size and font.',
            'type' => 'select',
            'options' => [
                'None' => '',
                'Heading Small' => 'heading-small',
                'Heading H1' => 'h1',
                'Heading H2' => 'h2',
                'Heading H3' => 'h3',
                'Heading H4' => 'h4',
                'Heading H5' => 'h5',
                'Heading H6' => 'h6',
                'Text Meta' => 'text-meta',
                'Text Lead' => 'text-lead',
                'Text Small' => 'text-small',
                'Text Large' => 'text-large',
            ],
            'enable' => 'show_title',
        ],
        'title_link' => [
            'label' => 'Link',
            'description' => 'Link the title if a link exists.',
            'type' => 'checkbox',
            'text' => 'Link title',
            'enable' => 'show_title && show_link',
        ],
        'title_hover_style' => [
            'label' => 'Hover Style',
            'description' => 'Set the hover style for a linked title.',
            'type' => 'select',
            'options' => [
                'None' => 'reset',
                'Heading Link' => 'heading',
                'Default Link' => '',
            ],
            'enable' => 'show_title && show_link && (title_link || card_link)',
        ],
        'title_decoration' => [
            'label' => 'Decoration',
            'description' =>
                'Decorate the title with a divider, bullet or a line that is vertically centered to the heading.',
            'type' => 'select',
            'options' => [
                'None' => '',
                'Divider' => 'divider',
                'Bullet' => 'bullet',
                'Line' => 'line',
            ],
            'enable' => 'show_title',
        ],
        'title_font_family' => [
            'label' => 'Font Family',
            'description' =>
                'Select an alternative font family. Mind that not all styles have different font families.',
            'type' => 'select',
            'options' => [
                'None' => '',
                'Default' => 'default',
                'Primary' => 'primary',
                'Secondary' => 'secondary',
                'Tertiary' => 'tertiary',
            ],
            'enable' => 'show_title',
        ],
        'title_color' => [
            'label' => 'Color',
            'description' =>
                'Select the text color. If the Background option is selected, styles that don\'t apply a background image use the primary color instead.',
            'type' => 'select',
            'options' => [
                'None' => '',
                'Muted' => 'muted',
                'Emphasis' => 'emphasis',
                'Primary' => 'primary',
                'Secondary' => 'secondary',
                'Success' => 'success',
                'Warning' => 'warning',
                'Danger' => 'danger',
                'Background' => 'background',
            ],
            'enable' => 'show_title',
        ],
        'title_element' => [
            'label' => 'HTML Element',
            'description' =>
                'Set the level for the section heading or give it no semantic meaning.',
            'type' => 'select',
            'options' => [
                'h1' => 'h1',
                'h2' => 'h2',
                'h3' => 'h3',
                'h4' => 'h4',
                'h5' => 'h5',
                'h6' => 'h6',
                'div' => 'div',
            ],
            'enable' => 'show_title',
        ],
        'title_margin' => [
            'label' => 'Margin Top',
            'description' =>
                'Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.',
            'type' => 'select',
            'options' => [
                'X-Small' => 'xsmall',
                'Small' => 'small',
                'Default' => '',
                'Medium' => 'medium',
                'Large' => 'large',
                'X-Large' => 'xlarge',
                'None' => 'remove',
            ],
            'enable' => 'show_title',
        ],
        'meta_style' => [
            'label' => 'Style',
            'description' =>
                'Select a predefined meta text style, including color, size and font-family.',
            'type' => 'select',
            'options' => [
                'None' => '',
                'Text Meta' => 'text-meta',
                'Text Lead' => 'text-lead',
                'Text Small' => 'text-small',
                'Text Large' => 'text-large',
                'Heading H1' => 'h1',
                'Heading H2' => 'h2',
                'Heading H3' => 'h3',
                'Heading H4' => 'h4',
                'Heading H5' => 'h5',
                'Heading H6' => 'h6',
            ],
            'enable' => 'show_meta',
        ],
        'meta_color' => [
            'label' => 'Color',
            'description' => 'Select the text color.',
            'type' => 'select',
            'options' => [
                'None' => '',
                'Muted' => 'muted',
                'Emphasis' => 'emphasis',
                'Primary' => 'primary',
                'Secondary' => 'secondary',
                'Success' => 'success',
                'Warning' => 'warning',
                'Danger' => 'danger',
            ],
            'enable' => 'show_meta',
        ],
        'meta_align' => [
            'label' => 'Alignment',
            'description' => 'Align the meta text.',
            'type' => 'select',
            'options' => [
                'Above Title' => 'above-title',
                'Below Title' => 'below-title',
                'Below Content' => 'below-content',
            ],
            'enable' => 'show_meta',
        ],
        'meta_element' => [
            'label' => 'HTML Element',
            'description' =>
                'Set the level for the section heading or give it no semantic meaning.',
            'type' => 'select',
            'options' => [
                'h1' => 'h1',
                'h2' => 'h2',
                'h3' => 'h3',
                'h4' => 'h4',
                'h5' => 'h5',
                'h6' => 'h6',
                'div' => 'div',
            ],
            'enable' => 'show_meta',
        ],
        'meta_margin' => [
            'label' => 'Margin Top',
            'description' =>
                'Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.',
            'type' => 'select',
            'options' => [
                'X-Small' => 'xsmall',
                'Small' => 'small',
                'Default' => '',
                'Medium' => 'medium',
                'Large' => 'large',
                'X-Large' => 'xlarge',
                'None' => 'remove',
            ],
            'enable' => 'show_meta',
        ],
        'content_style' => [
            'label' => 'Style',
            'description' =>
                'Select a predefined text style, including color, size and font-family.',
            'type' => 'select',
            'options' => [
                'None' => '',
                'Text Meta' => 'text-meta',
                'Text Lead' => 'text-lead',
                'Text Small' => 'text-small',
                'Text Large' => 'text-large',
                'Heading H1' => 'h1',
                'Heading H2' => 'h2',
                'Heading H3' => 'h3',
                'Heading H4' => 'h4',
                'Heading H5' => 'h5',
                'Heading H6' => 'h6',
            ],
            'enable' => 'show_content',
        ],
        'content_margin' => [
            'label' => 'Margin Top',
            'description' =>
                'Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.',
            'type' => 'select',
            'options' => [
                'X-Small' => 'xsmall',
                'Small' => 'small',
                'Default' => '',
                'Medium' => 'medium',
                'Large' => 'large',
                'X-Large' => 'xlarge',
                'None' => 'remove',
            ],
            'enable' => 'show_content',
        ],
        'image_width' => [
            'type' => 'number',
            'attrs' => [
                'placeholder' => 'auto',
            ],
            'enable' => 'show_image',
        ],
        'image_height' => [
            'type' => 'number',
            'attrs' => [
                'placeholder' => 'auto',
            ],
            'enable' => 'show_image',
        ],
        'image_card_padding' => [
            'label' => 'Padding',
            'description' => 'Attach the image to the drop\'s edge.',
            'type' => 'checkbox',
            'text' => 'Align image without padding',
            'enable' => 'show_image',
        ],
        'image_border' => [
            'label' => 'Border',
            'description' => 'Select the image border style.',
            'type' => 'select',
            'options' => [
                'None' => '',
                'Rounded' => 'rounded',
                'Circle' => 'circle',
                'Pill' => 'pill',
            ],
            'enable' => 'show_image && !image_card_padding',
        ],
        'image_link' => [
            'label' => 'Link',
            'description' => 'Link the image if a link exists.',
            'type' => 'checkbox',
            'text' => 'Link image',
            'enable' => 'show_image && show_link',
        ],
        'image_svg_inline' => [
            'label' => 'Inline SVG',
            'description' =>
                'Inject SVG images into the page markup so that they can easily be styled with CSS.',
            'type' => 'checkbox',
            'text' => 'Make SVG stylable with CSS',
            'enable' => 'show_image',
        ],
        'image_svg_animate' => [
            'type' => 'checkbox',
            'text' => 'Animate strokes',
            'enable' => 'show_image && image_svg_inline',
        ],
        'image_svg_color' => [
            'label' => 'SVG Color',
            'description' =>
                'Select the SVG color. It will only apply to supported elements defined in the SVG.',
            'type' => 'select',
            'options' => [
                'None' => '',
                'Muted' => 'muted',
                'Emphasis' => 'emphasis',
                'Primary' => 'primary',
                'Secondary' => 'secondary',
                'Success' => 'success',
                'Warning' => 'warning',
                'Danger' => 'danger',
            ],
            'enable' => 'show_image && image_svg_inline',
        ],
        'link_text' => [
            'label' => 'Text',
            'description' => 'Enter the text for the link.',
            'enable' => 'show_link',
        ],
        'link_aria_label' => [
            'label' => 'ARIA Label',
            'description' =>
                'Enter a descriptive text label to make it accessible if the link has no visible text.',
            'enable' => 'show_link',
        ],
        'link_target' => [
            'label' => 'Attributes',
            'description'  => 'Optionally, open the link in a new window, treat it as download, don\'t endorse the linked page or don\'t include the referrer header.',
            'type' => 'checkbox',
            'text' => 'Open in a new window',
            'enable' => 'show_link',
        ],
        'link_download' => [
            'type' => 'checkbox',
            'text' => 'Download',
            'enable' => 'show_link',
        ],
        'link_rel_nofollow' => [
            'type' => 'checkbox',
            'text' => 'Nofollow',
            'enable' => 'show_link',
        ],
        'link_rel_noreferrer' => [
            'type' => 'checkbox',
            'text' => 'Noreferrer',
            'enable' => 'show_link',
        ],
        'link_style' => [
            'label' => 'Style',
            'description' => 'Set the link style.',
            'type' => 'select',
            'options' => [
                'Button Default' => 'default',
                'Button Primary' => 'primary',
                'Button Secondary' => 'secondary',
                'Button Danger' => 'danger',
                'Button Text' => 'text',
                'Link' => '',
                'Link Muted' => 'link-muted',
                'Link Text' => 'link-text',
            ],
            'enable' => 'show_link',
        ],
        'link_size' => [
            'label' => 'Button Size',
            'description' => 'Set the button size.',
            'type' => 'select',
            'options' => [
                'Small' => 'small',
                'Default' => '',
                'Large' => 'large',
            ],
            'enable' => 'show_link && link_style && !$match(link_style, \'link-(muted|text)\')',
        ],
        'link_fullwidth' => [
            'type' => 'checkbox',
            'text' => 'Full width button',
            'enable' => 'show_link && link_style && !$match(link_style, \'link-(muted|text)\')',
        ],
        'link_margin' => [
            'label' => 'Margin Top',
            'description' =>
                'Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.',
            'type' => 'select',
            'options' => [
                'X-Small' => 'xsmall',
                'Small' => 'small',
                'Default' => '',
                'Medium' => 'medium',
                'Large' => 'large',
                'X-Large' => 'xlarge',
                'None' => 'remove',
            ],
            'enable' => 'show_link',
        ],
        'position' => '${builder.position}',
        'position_left' => '${builder.position_left}',
        'position_right' => '${builder.position_right}',
        'position_top' => '${builder.position_top}',
        'position_bottom' => '${builder.position_bottom}',
        'position_z_index' => '${builder.position_z_index}',
        'blend' => '${builder.blend}',
        'margin_top' => '${builder.margin_top}',
        'margin_bottom' => '${builder.margin_bottom}',
        'maxwidth' => '${builder.maxwidth}',
        'maxwidth_breakpoint' => '${builder.maxwidth_breakpoint}',
        'block_align' => '${builder.block_align}',
        'block_align_breakpoint' => '${builder.block_align_breakpoint}',
        'block_align_fallback' => '${builder.block_align_fallback}',
        'text_align' => '${builder.text_align_justify}',
        'text_align_breakpoint' => '${builder.text_align_breakpoint}',
        'text_align_fallback' => '${builder.text_align_justify_fallback}',
        'animation' => '${builder.animation}',
        '_parallax_button' => '${builder._parallax_button}',
        'visibility' => '${builder.visibility}',
        'container_padding_remove' => '${builder.container_padding_remove}',
        'name' => '${builder.name}',
        'status' => '${builder.status}',
        'source' => '${builder.source}',
        'id' => '${builder.id}',
        'class' => '${builder.cls}',
        'attributes' => '${builder.attrs}',
        'css' => [
            'label' => 'CSS',
            'description' =>
                'Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-element</code>, <code>.el-marker</code>, <code>.el-item</code>, <code>.el-title</code>, <code>.el-meta</code>, <code>.el-content</code>, <code>.el-image</code>, <code>.el-link</code>',
            'type' => 'editor',
            'editor' => 'code',
            'mode' => 'css',
            'attrs' => [
                'debounce' => 500,
                'hints' => [
                    '.el-element',
                    '.el-marker',
                    '.el-item',
                    '.el-title',
                    '.el-meta',
                    '.el-content',
                    '.el-image',
                    '.el-link',
                ],
            ],
            'source' => true,
        ],
        'transform' => '${builder.transform}',
    ],
    'fieldset' => [
        'default' => [
            'type' => 'tabs',
            'fields' => [
                [
                    'title' => 'Content',
                    'fields' => [
                        'background_image',
                        [
                            'description' =>
                                'Setting just one value preserves the original proportions. The image will be resized and cropped automatically, and where possible, high resolution images will be auto-generated.',
                            'name' => '_background_image_dimension',
                            'type' => 'grid',
                            'width' => '1-2',
                            'fields' => ['background_image_width', 'background_image_height'],
                        ],
                        'background_image_alt',
                        'content',
                        'show_title',
                        'show_meta',
                        'show_content',
                        'show_image',
                        'show_link',
                    ],
                ],
                [
                    'title' => 'Settings',
                    'fields' => [
                        [
                            'label' => 'Background Image',
                            'type' => 'group',
                            'divider' => true,
                            'fields' => [
                                'background_image_focal_point',
                                'height_expand',
                                'height_viewport',
                                'height_viewport_height',
                                'height_viewport_offset',
                                'background_image_loading',
                                'background_image_border',
                            ],
                        ],
                        [
                            'label' => 'Marker',
                            'type' => 'group',
                            'divider' => true,
                            'fields' => ['marker_color', 'drop_mode'],
                        ],
                        [
                            'label' => 'Popover',
                            'type' => 'group',
                            'divider' => true,
                            'fields' => [
                                'drop_position',
                                'drop_width',
                                'card_style',
                                'card_link',
                                'card_size',
                            ],
                        ],
                        [
                            'label' => 'Title',
                            'type' => 'group',
                            'divider' => true,
                            'fields' => [
                                'title_style',
                                'title_link',
                                'title_hover_style',
                                'title_decoration',
                                'title_font_family',
                                'title_color',
                                'title_element',
                                'title_margin',
                            ],
                        ],
                        [
                            'label' => 'Meta',
                            'type' => 'group',
                            'divider' => true,
                            'fields' => [
                                'meta_style',
                                'meta_color',
                                'meta_align',
                                'meta_element',
                                'meta_margin',
                            ],
                        ],
                        [
                            'label' => 'Content',
                            'type' => 'group',
                            'divider' => true,
                            'fields' => ['content_style', 'content_margin'],
                        ],
                        [
                            'label' => 'Image',
                            'type' => 'group',
                            'divider' => true,
                            'fields' => [
                                [
                                    'label' => 'Width/Height',
                                    'description' =>
                                        'Setting just one value preserves the original proportions. The image will be resized and cropped automatically, and where possible, high resolution images will be auto-generated.',
                                    'type' => 'grid',
                                    'width' => '1-2',
                                    'fields' => ['image_width', 'image_height'],
                                ],
                                'image_card_padding',
                                'image_border',
                                'image_link',
                                'image_svg_inline',
                                'image_svg_animate',
                                'image_svg_color',
                            ],
                        ],
                        [
                            'label' => 'Link',
                            'type' => 'group',
                            'divider' => true,
                            'fields' => [
                                'link_text',
                                'link_aria_label',
                                'link_target',
                                'link_download',
                                'link_rel_nofollow',
                                'link_rel_noreferrer',
                                'link_style',
                                'link_size',
                                'link_fullwidth',
                                'link_margin',
                            ],
                        ],
                        [
                            'label' => 'General',
                            'type' => 'group',
                            'fields' => [
                                'position',
                                'position_left',
                                'position_right',
                                'position_top',
                                'position_bottom',
                                'position_z_index',
                                'blend',
                                'margin_top',
                                'margin_bottom',
                                'maxwidth',
                                'maxwidth_breakpoint',
                                'block_align',
                                'block_align_breakpoint',
                                'block_align_fallback',
                                'text_align',
                                'text_align_breakpoint',
                                'text_align_fallback',
                                'animation',
                                '_parallax_button',
                                'visibility',
                                'container_padding_remove',
                            ],
                        ],
                    ],
                ],
                '${builder.advanced}',
            ],
        ],
    ],
];
