<?php
require_once plugin_dir_path(__FILE__) . 'Decorations.php';
require_once plugin_dir_path(__FILE__) . 'Shapes.php';

class DIPI_ImageMask extends DIPI_Builder_Module
{

    public $slug = 'dipi_image_mask';
    public $vb_support = 'on';
    private $decorations = null;
    private $shapes = null;
    private static $layerID = 0;
    private function getLayerId($prefix = 'SVG_')
    {
        self::$layerID++;
        return $prefix . self::$layerID;
    }
    protected $module_credits = array(
        'module_uri' => 'https://divi-pixel.com/modules/image-mask',
        'author' => 'Divi Pixel',
        'author_uri' => 'https://divi-pixel.com',
    );

    public function init()
    {
        $this->decorations = new DIPI_SVG_Decorations();
        $this->shapes = new DIPI_SVG_Shapes();
        $this->icon_path = plugin_dir_path(__FILE__) . 'icon.svg';
        $this->name = esc_html__('Pixel Image Mask', 'dipi-divi-pixel');

        add_filter('et_fb_backend_helpers', [$this, 'default_helpers'], 100, 1);
    }

    public function default_helpers($helpers)
    {
        $helpers['defaults']['dipi_image_mask'] = [
            'image' => 'data:image/png;base64, ',
        ];
        return $helpers;
    }

    public function get_settings_modal_toggles()
    {
        $toggles = [
            'general' => [],
        ];
        $toggles['general']['toggles'] = [
            'main_content' => esc_html__('Mask Settings', 'dipi-divi-pixel'),
            'viewbox' => ['title' => esc_html__('Mask ViewBox Size', 'dipi-divi-pixel')],
            'layer_1' => ['title' => esc_html__('Border Layer', 'dipi-divi-pixel')],
            'layer_2' => ['title' => esc_html__('Decoration Element 1', 'dipi-divi-pixel')],
            'layer_3' => ['title' => esc_html__('Decoration Element 2', 'dipi-divi-pixel')],
        ];
        return $toggles;
    }

    public function get_fields()
    {
        $fields = [];

        $fields['image'] = [
            'label' => esc_html__('Image', 'dipi-divi-pixel'),
            'type' => 'upload',
            'upload_button_text' => esc_attr__('Upload Image', 'dipi-divi-pixel'),
            'choose_text' => esc_attr__('Chose Image', 'dipi-divi-pixel'),
            'update_text' => esc_attr__('Update Image', 'dipi-divi-pixel'),
            'hide_metadata' => true,
            'option_category' => 'basic_option',
            'toggle_slug' => 'main_content',
            'dynamic_content' => 'image',
        ];
        $fields["alt"] = [
            'label' => esc_html__('Alt text of Media library', 'dipi-divi-pixel'),
            'type' => 'text',
            'readonly'        => 'readonly',
            'toggle_slug' => 'main_content',
        ];
        $fields["img_alt"] = [
            'label' => esc_html__('Image Alt Text', 'dipi-divi-pixel'),
            'type' => 'text',
            'description' => esc_html__('Define the HTML ALT text for your image here.', 'dipi-divi-pixel'),
            'toggle_slug' => 'main_content',
            'dynamic_content' => 'text'
        ];

        $fields['use_custom_mask'] = [
            'label' => esc_html__('Use Custom Mask', 'dipi-divi-pixel'),
            'type' => 'yes_no_button',
            'options' => [
                'off' => esc_html__('No', 'et_builder'),
                'on' => esc_html__('Yes', 'et_builder'),
            ],
            'default' => 'off',
            'option_category' => 'basic_option',
            'toggle_slug' => 'main_content',
        ];

        $thumbs_url = plugins_url('/assets/', __FILE__);
        $fields['shape'] = [
            'label' => esc_html__('Select Mask', 'dipi-divi-pixel'),
            'description' => esc_html__('Select the mask shape you want to use on your image.', 'dipi-divi-pixel'),
            'type' => 'dipi_field_imageselect',
            'subtype' => 'radio',
            'default' => 'Shape1',
            'toggle_slug' => 'main_content',
            'options' => array(
                'Shape1' => $thumbs_url . 'shapes-01.svg',
                'Shape3' => $thumbs_url . 'shapes-03.svg',
                'Shape13' => $thumbs_url . 'shapes-13.svg',
                'Shape14' => $thumbs_url . 'shapes-14.svg',
                'Shape15' => $thumbs_url . 'shapes-15.svg',
                'Shape16' => $thumbs_url . 'shapes-16.svg',
                'Shape4' => $thumbs_url . 'shapes-04.svg',
                'Shape6' => $thumbs_url . 'shapes-06.svg',
                'Shape7' => $thumbs_url . 'shapes-07.svg',
                'Shape17' => $thumbs_url . 'shapes-17.svg',

                'Shape25' => $thumbs_url . 'shapes-25.svg',
                'Shape26' => $thumbs_url . 'shapes-26.svg',
                'Shape27' => $thumbs_url . 'shapes-27.svg',
                'Shape2' => $thumbs_url . 'shapes-02.svg',
                'Shape5' => $thumbs_url . 'shapes-05.svg',
                'Shape12' => $thumbs_url . 'shapes-12.svg',
                'Shape8' => $thumbs_url . 'shapes-08.svg',
                'Shape37' => $thumbs_url . 'shapes-37.svg',
                'Shape24' => $thumbs_url . 'shapes-24.svg',
                'Shape23' => $thumbs_url . 'shapes-23.svg',

                'Shape9' => $thumbs_url . 'shapes-09.svg',
                'Shape10' => $thumbs_url . 'shapes-10.svg',
                'Shape32' => $thumbs_url . 'shapes-32.svg',
                'Shape34' => $thumbs_url . 'shapes-34.svg',
                'Shape35' => $thumbs_url . 'shapes-35.svg',
                'Shape36' => $thumbs_url . 'shapes-36.svg',
                'Shape18' => $thumbs_url . 'shapes-18.svg',
                'Shape19' => $thumbs_url . 'shapes-19.svg',
                'Shape11' => $thumbs_url . 'shapes-11.svg',
                'Shape20' => $thumbs_url . 'shapes-20.svg',

                'Shape21' => $thumbs_url . 'shapes-21.svg',
                'Shape22' => $thumbs_url . 'shapes-22.svg',
                'Shape28' => $thumbs_url . 'shapes-28.svg',
                'Shape39' => $thumbs_url . 'shapes-39.svg',
                'Shape29' => $thumbs_url . 'shapes-29.svg',
                'Shape30' => $thumbs_url . 'shapes-30.svg',
                'Shape33' => $thumbs_url . 'shapes-33.svg',
                'Shape40' => $thumbs_url . 'shapes-40.svg',
                'Shape38' => $thumbs_url . 'shapes-38.svg',
                'Shape31' => $thumbs_url . 'shapes-31.svg',
            ),
            'show_if' => ['use_custom_mask' => 'off'],
        ];
        $fields['custom_mask'] = [
            'label' => esc_html__('Custom Mask', 'dipi-divi-pixel'),
            'type' => 'upload',
            'upload_button_text' => esc_attr__('Upload Image', 'dipi-divi-pixel'),
            'choose_text' => esc_attr__('Chose Image', 'dipi-divi-pixel'),
            'update_text' => esc_attr__('Update Image', 'dipi-divi-pixel'),
            'hide_metadata' => true,
            'option_category' => 'basic_option',
            'toggle_slug' => 'main_content',
            'dynamic_content' => 'image',
            'show_if' => ['use_custom_mask' => 'on'],
        ];

        $fields['shape_rotate'] = [
            'label' => esc_html__('Rotate Mask', 'dipi-divi-pixel'),
            'type' => 'range',
            'option_category' => 'basic_option',
            'toggle_slug' => 'main_content',
            'default' => '0deg',
            'fixed_unit' => 'deg',
            'range_settings' => [
                'min' => '0',
                'max' => '360',
            ],
        ];

        $fields['shape_scale_x'] = [
            'label' => esc_html__('Mask Width', 'dipi-divi-pixel'),
            'type' => 'range',
            'option_category' => 'basic_option',
            'toggle_slug' => 'main_content',
            'unitless' => true,
            'default' => '1',
            'range_settings' => [
                'min' => '0',
                'max' => '2',
                'step' => '0.01',
            ],
        ];

        $fields['shape_scale_y'] = [
            'label' => esc_html__('Mask Height', 'dipi-divi-pixel'),
            'type' => 'range',
            'option_category' => 'basic_option',
            'toggle_slug' => 'main_content',
            'unitless' => true,
            'default' => '1',
            'range_settings' => [
                'min' => '0',
                'max' => '2',
                'step' => '0.01',
            ],
        ];

        $fields['shape_flip'] = [
            'label' => esc_html__('Flip Mask', 'dipi-divi-pixel'),
            'description' => esc_html__('Flip the mask horizontally or vertically to change the shape and its direction.', 'dipi-divi-pixel'),
            'type' => 'multiple_buttons',
            'options' => array(
                'horizontal' => array(
                    'title' => esc_html__('Horizontal', 'dipi-divi-pixel'),
                    'icon' => 'flip-horizontally',
                ),
                'vertical' => array(
                    'title' => esc_html__('Vertical', 'dipi-divi-pixel'),
                    'icon' => 'flip-vertically',
                ),
            ),
            'toggleable' => true,
            'multi_selection' => true,
            'default' => '',
            'toggle_slug' => 'main_content',
        ];

        $fields['image_width'] = [
            'label' => esc_html__('Image Size', 'dipi-divi-pixel'),
            'type' => 'range',
            'option_category' => 'basic_option',
            'toggle_slug' => 'main_content',
            'default' => '100%',
            'fixed_unit' => '%',
            'range_settings' => [
                'min' => '0',
                'max' => '200',
            ],
        ];

        $fields['image_horz'] = [
            'label' => esc_html__('Image Horizontal Position', 'dipi-divi-pixel'),
            'type' => 'range',
            'option_category' => 'basic_option',
            'toggle_slug' => 'main_content',
            'default' => '0',
            'unitless' => true,
            'range_settings' => [
                'min' => -1000,
                'max' => 1000,
            ],
        ];

        $fields['image_vert'] = [
            'label' => esc_html__('Image Vertical Position', 'dipi-divi-pixel'),
            'type' => 'range',
            'option_category' => 'basic_option',
            'toggle_slug' => 'main_content',
            'default' => '0',
            'unitless' => true,
            'range_settings' => [
                'min' => -1000,
                'max' => 1000,
            ],
        ];

        $fields['viewbox_width'] = [
            'label' => esc_html__('Viewbox Width', 'dipi-divi-pixel'),
            'type' => 'range',
            'option_category' => 'basic_option',
            'toggle_slug' => 'viewbox',
            'default' => '1000',
            'unitless' => true,
            'range_settings' => [
                'min' => '0',
                'max' => '2000',
                'step' => '1',
            ],
        ];

        $fields['viewbox_height'] = [
            'label' => esc_html__('Viewbox Height', 'dipi-divi-pixel'),
            'type' => 'range',
            'option_category' => 'basic_option',
            'toggle_slug' => 'viewbox',
            'default' => '1000',
            'unitless' => true,
            'range_settings' => [
                'min' => '0',
                'max' => '2000',
                'step' => '1',
            ],
        ];

        $fields['viewbox_x'] = [
            'label' => esc_html__('Viewbox X Position', 'dipi-divi-pixel'),
            'type' => 'range',
            'option_category' => 'basic_option',
            'toggle_slug' => 'viewbox',
            'default' => '0',
            'unitless' => true,
            'range_settings' => [
                'min' => '-1000',
                'max' => '1000',
            ],
        ];

        $fields['viewbox_y'] = [
            'label' => esc_html__('Viewbox Y Position', 'dipi-divi-pixel'),
            'type' => 'range',
            'option_category' => 'basic_option',
            'toggle_slug' => 'viewbox',
            'default' => '0',
            'unitless' => true,
            'range_settings' => [
                'min' => '-1000',
                'max' => '1000',
            ],
        ];
        

        $fields['layer_1_enable'] = [
            'label' => esc_html__('Enable Border Layer', 'dipi-divi-pixel'),
            'type' => 'yes_no_button',
            'options' => [
                'off' => esc_html__('No', 'et_builder'),
                'on' => esc_html__('Yes', 'et_builder'),
            ],
            'default' => 'off',
            'option_category' => 'basic_option',
            'toggle_slug' => 'layer_1',
        ];

        $fields['layer_1_background_type'] = [
            'label' => esc_html__('Background Style', 'dipi-divi-pixel'),
            'type' => 'select',
            'options' => array(
                esc_html__('Solid Color', 'dipi-divi-pixel'),
                esc_html__('Gradient', 'dipi-divi-pixel'),
            ),
            'default' => 'Solid Color',
            'option_category' => 'basic_option',
            'toggle_slug' => 'layer_1',
            'data_type' => '',
            'show_if' => array(
                'layer_1_enable' => 'on',
            ),
        ];

        $fields['layer_1_background_color'] = [
            'label' => esc_html__('Background Color', 'dipi-divi-pixel'),
            'type' => 'color-alpha',
            'default' => '#000',
            'option_category' => 'basic_option',
            'toggle_slug' => 'layer_1',
            'show_if' => array(
                'layer_1_enable' => 'on',
                'layer_1_background_type' => 'Solid Color',
            ),
        ];

        $fields['layer_1_gradient_color_start'] = [
            'label' => esc_html__('Gradient Color Start', 'dipi-divi-pixel'),
            'type' => 'color-alpha',
            'default' => '#fff',
            'option_category' => 'basic_option',
            'toggle_slug' => 'layer_1',
            'show_if' => array(
                'layer_1_enable' => 'on',
                'layer_1_background_type' => 'Gradient',
            ),
        ];

        $fields['layer_1_gradient_color_end'] = [
            'label' => esc_html__('Gradient Color End', 'dipi-divi-pixel'),
            'type' => 'color-alpha',
            'default' => '#fff',
            'option_category' => 'basic_option',
            'toggle_slug' => 'layer_1',
            'show_if' => array(
                'layer_1_enable' => 'on',
                'layer_1_background_type' => 'Gradient',
            ),
        ];

        $fields['layer_2_enable'] = [
            'label' => esc_html__('Enable Decoration Element', 'dipi-divi-pixel'),
            'type' => 'yes_no_button',
            'options' => [
                'off' => esc_html__('No', 'et_builder'),
                'on' => esc_html__('Yes', 'et_builder'),
            ],
            'default' => 'off',
            'option_category' => 'basic_option',
            'toggle_slug' => 'layer_2',
        ];

        $fields['docration_element_1'] = [
            'label' => esc_html__('Decoraction Element', 'dipi-divi-pixel'),
            'type' => 'select',
            'options' => array(
                'DottedSquare' => esc_html__('Dotted Square', 'dipi-divi-pixel'),
                'DottedCircle' => esc_html__('Dotted Circle', 'dipi-divi-pixel'),
                'DottedTraingle' => esc_html__('Dotted Traingle', 'dipi-divi-pixel'),
                'DottedShape' => esc_html__('Dotted Shape', 'dipi-divi-pixel'),
                'StrokeTriangle' => esc_html__('Stroke Triangle', 'dipi-divi-pixel'),
                'StrokeCircle' => esc_html__('Stroke Circle', 'dipi-divi-pixel'),
                'StrokeSquare' => esc_html__('Stroke Square', 'dipi-divi-pixel'),
                'AbstractSquare' => esc_html__('Abstract Square', 'dipi-divi-pixel'),
                'AbstractCircle' => esc_html__('Abstract Circle', 'dipi-divi-pixel'),
                'FilledCircle' => esc_html__('Filled Circle', 'dipi-divi-pixel'),
                'FilledSquare' => esc_html__('Filled Square', 'dipi-divi-pixel'),
                'FilledTriangle' => esc_html__('Filled Triangle', 'dipi-divi-pixel'),
                'LinedSquare' => esc_html__('Lined Square', 'dipi-divi-pixel'),
                'LinedCircle' => esc_html__('Lined Circle', 'dipi-divi-pixel'),
                'LinedTriangle' => esc_html__('Lined Triangle', 'dipi-divi-pixel'),
            ),
            'default' => 'LinedCircle',
            'option_category' => 'basic_option',
            'toggle_slug' => 'layer_2',
            'show_if' => array(
                'layer_2_enable' => 'on',
            ),
        ];

        $fields['layer_2_above_image'] = [
            'label' => esc_html__('Show Above Image', 'dipi-divi-pixel'),
            'type' => 'yes_no_button',
            'options' => [
                'off' => esc_html__('No', 'et_builder'),
                'on' => esc_html__('Yes', 'et_builder'),
            ],
            'default' => 'on',
            'option_category' => 'basic_option',
            'toggle_slug' => 'layer_2',
            'show_if' => array(
                'layer_2_enable' => 'on',
            ),
        ];

        $fields['layer_2_background_color'] = [
            'label' => esc_html__('Background Color', 'dipi-divi-pixel'),
            'type' => 'color-alpha',
            'default' => '#000',
            'option_category' => 'basic_option',
            'toggle_slug' => 'layer_2',
            'show_if' => array(
                'layer_2_enable' => 'on',
            ),
        ];

        $fields['layer_2_horz'] = [
            'label' => esc_html__('Horizontal Position', 'dipi-divi-pixel'),
            'type' => 'range',
            'option_category' => 'basic_option',
            'toggle_slug' => 'layer_2',
            'default' => '25%',
            'fixed_unit' => '%',
            'range_settings' => [
                'min' => -100,
                'max' => 100,
            ],
            'show_if' => array(
                'layer_2_enable' => 'on',
            ),
        ];

        $fields['layer_2_vert'] = [
            'label' => esc_html__('Vertical Position', 'dipi-divi-pixel'),
            'type' => 'range',
            'option_category' => 'basic_option',
            'toggle_slug' => 'layer_2',
            'default' => '-25%',
            'fixed_unit' => '%',
            'range_settings' => [
                'min' => -100,
                'max' => 100,
            ],
            'show_if' => array(
                'layer_2_enable' => 'on',
            ),
        ];

        $fields['layer_2_scale'] = [
            'label' => esc_html__('Scale', 'dipi-divi-pixel'),
            'type' => 'range',
            'option_category' => 'basic_option',
            'toggle_slug' => 'layer_2',
            'default' => '1',
            'unitless' => true,
            'range_settings' => [
                'step' => '0.01',
                'min' => '-3',
                'max' => '3',
            ],
            'show_if' => array(
                'layer_2_enable' => 'on',
            ),
        ];

        $fields['layer_2_rotate'] = [
            'label' => esc_html__('Rotate', 'dipi-divi-pixel'),
            'type' => 'range',
            'option_category' => 'basic_option',
            'toggle_slug' => 'layer_2',
            'default' => '0',
            'unitless' => true,
            'range_settings' => [
                'step' => '1',
                'min' => '0',
                'max' => '360',
            ],
            'show_if' => array(
                'layer_2_enable' => 'on',
            ),
        ];

        $fields['layer_3_enable'] = [
            'label' => esc_html__('Enable Decoration Element', 'dipi-divi-pixel'),
            'type' => 'yes_no_button',
            'options' => [
                'off' => esc_html__('No', 'et_builder'),
                'on' => esc_html__('Yes', 'et_builder'),
            ],
            'default' => 'off',
            'option_category' => 'basic_option',
            'toggle_slug' => 'layer_3',
        ];

        $fields['docration_element_2'] = [
            'label' => esc_html__('Decoraction Element', 'dipi-divi-pixel'),
            'type' => 'select',
            'options' => array(
                'StrokeTriangle' => esc_html__('Stroke Triangle', 'dipi-divi-pixel'),
                'StrokeCircle' => esc_html__('Stroke Circle', 'dipi-divi-pixel'),
                'StrokeSquare' => esc_html__('Stroke Square', 'dipi-divi-pixel'),
                'DottedSquare' => esc_html__('Dotted Square', 'dipi-divi-pixel'),
                'DottedCircle' => esc_html__('Dotted Circle', 'dipi-divi-pixel'),
                'DottedTraingle' => esc_html__('Dotted Traingle', 'dipi-divi-pixel'),
                'DottedShape' => esc_html__('Dotted Shape', 'dipi-divi-pixel'),
                'AbstractSquare' => esc_html__('Abstract Square', 'dipi-divi-pixel'),
                'AbstractCircle' => esc_html__('Abstract Circle', 'dipi-divi-pixel'),
                'FilledCircle' => esc_html__('Filled Circle', 'dipi-divi-pixel'),
                'FilledSquare' => esc_html__('Filled Square', 'dipi-divi-pixel'),
                'FilledTriangle' => esc_html__('Filled Triangle', 'dipi-divi-pixel'),
                'LinedSquare' => esc_html__('Lined Square', 'dipi-divi-pixel'),
                'LinedCircle' => esc_html__('Lined Circle', 'dipi-divi-pixel'),
                'LinedTriangle' => esc_html__('Lined Triangle', 'dipi-divi-pixel'),
            ),
            'default' => 'LinedCircle',
            'option_category' => 'basic_option',
            'toggle_slug' => 'layer_3',
            'show_if' => array(
                'layer_3_enable' => 'on',
            ),
        ];

        $fields['layer_3_above_image'] = [
            'label' => esc_html__('Show Above Image', 'dipi-divi-pixel'),
            'type' => 'yes_no_button',
            'options' => [
                'off' => esc_html__('No', 'et_builder'),
                'on' => esc_html__('Yes', 'et_builder'),
            ],
            'default' => 'on',
            'option_category' => 'basic_option',
            'toggle_slug' => 'layer_3',
            'show_if' => array(
                'layer_3_enable' => 'on',
            ),
        ];

        $fields['layer_3_background_color'] = [
            'label' => esc_html__('Background Color', 'dipi-divi-pixel'),
            'type' => 'color-alpha',
            'default' => '#000',
            'option_category' => 'basic_option',
            'toggle_slug' => 'layer_3',
            'show_if' => array(
                'layer_3_enable' => 'on',
            ),
        ];

        $fields['layer_3_horz'] = [
            'label' => esc_html__('Horizontal Position', 'dipi-divi-pixel'),
            'type' => 'range',
            'option_category' => 'basic_option',
            'toggle_slug' => 'layer_3',
            'default' => '-15%',
            'fixed_unit' => '%',
            'range_settings' => [
                'min' => -100,
                'max' => 100,
            ],
            'show_if' => array(
                'layer_3_enable' => 'on',
            ),
        ];

        $fields['layer_3_vert'] = [
            'label' => esc_html__('Vertical Position', 'dipi-divi-pixel'),
            'type' => 'range',
            'option_category' => 'basic_option',
            'toggle_slug' => 'layer_3',
            'default' => '30%',
            'fixed_unit' => '%',
            'range_settings' => [
                'min' => -100,
                'max' => 100,
            ],
            'show_if' => array(
                'layer_3_enable' => 'on',
            ),
        ];

        $fields['layer_3_scale'] = [
            'label' => esc_html__('Scale', 'dipi-divi-pixel'),
            'type' => 'range',
            'option_category' => 'basic_option',
            'toggle_slug' => 'layer_3',
            'default' => '1',
            'unitless' => true,
            'range_settings' => [
                'step' => '0.1',
                'min' => '-3',
                'max' => '3',
            ],
            'show_if' => array(
                'layer_3_enable' => 'on',
            ),
        ];

        $fields['layer_3_rotate'] = [
            'label' => esc_html__('Rotate', 'dipi-divi-pixel'),
            'type' => 'range',
            'option_category' => 'basic_option',
            'toggle_slug' => 'layer_3',
            'default' => '0',
            'unitless' => true,
            'range_settings' => [
                'step' => '1',
                'min' => '0',
                'max' => '360',
            ],
            'show_if' => array(
                'layer_3_enable' => 'on',
            ),
        ];
        return $fields;
    }

    public function get_advanced_fields_config()
    {
        $advanced_fields = [
            'text' => false,
            'text_shadow' => false,
            'fonts' => false,
        ];

        $advanced_fields['background'] = [
            'css' => [
                'main' => '%%order_class%% .fake-class',
            ],
            'hover' => false,
            'hover_enabled' => 'off',
            'background__hover_enabled' => 'off',
            'use_background_video' => false,
        ];

        return $advanced_fields;
    }

    public function render($attrs, $content, $render_slug)
    {
        if ($this->props["layer_1_enable"] === 'on' && $this->props["layer_1_background_type"] === 'Solid Color') {
            ET_Builder_Element::set_style($render_slug, [
                'selector' => '%%order_class%% .st1',
                'declaration' => "fill:" . $this->props["layer_1_background_color"],
            ]);
        }

        if ($this->props["layer_2_enable"] === 'on') {
            ET_Builder_Element::set_style($render_slug, [
                'selector' => '%%order_class%% .s02',
                'declaration' => "fill:" . $this->props["layer_2_background_color"],
            ]);
        }

        if ($this->props["layer_3_enable"] === 'on') {
            ET_Builder_Element::set_style($render_slug, [
                'selector' => '%%order_class%% .s03',
                'declaration' => "fill:" . $this->props["layer_3_background_color"],
            ]);
        }

        $layerZeroGradient = '';
        $layerOneGradient = '';

        $gradId2 = $this->getLayerId('GRAD_');

        if ($this->props["layer_1_enable"] === 'on' && $this->props["layer_1_background_type"] === 'Gradient') {
            $layerOneGradient = sprintf('
        <defs>
          <linearGradient id="%3$s" x1="0%%" y1="0%%" x2="100%%" y2="0%%">
            <stop offset="0%%" style="stop-color: %1$s;stop-opacity: 1" />
            <stop offset="100%%" style="stop-color: %2$s;stop-opacity: 1" />
          </linearGradient>
        </defs>',
                $this->props["layer_1_gradient_color_start"],
                $this->props["layer_1_gradient_color_end"],
                $gradId2
            );

        }

        $style = '';
        $deco_1 = '';
        $deco_2 = '';
        $bottom_layers = '';
        $top_layers = '';

        if ($this->props["layer_2_enable"] === 'on') {
            $deco_1 = $this->decorations->decoration($this->props["docration_element_1"], "s02", $this->props["layer_2_horz"], $this->props["layer_2_vert"], $this->props["layer_2_scale"], $this->props["layer_2_rotate"]);
        }

        if ($this->props["layer_3_enable"] === 'on') {
            $deco_2 = $this->decorations->decoration($this->props["docration_element_2"], "s03", $this->props["layer_3_horz"], $this->props["layer_3_vert"], $this->props["layer_3_scale"], $this->props["layer_3_rotate"]);
        }

        if ($this->props["layer_2_above_image"] === 'on') {
            $top_layers .= $deco_1;
        } else {
            $bottom_layers .= $deco_1;
        }

        if ($this->props["layer_3_above_image"] === 'on') {
            $top_layers .= $deco_2;
        } else {
            $bottom_layers .= $deco_2;
        }

        $main_layer = $this->shapes->shape(
            $this->props['shape'],
            [
                'image' => $this->props['image'],
                'image_width' => $this->props['image_width'],
                'image_horz' => $this->props['image_horz'],
                'image_vert' => $this->props['image_vert'],
                'shape_rotate' => $this->props['shape_rotate'],
                'shape_scale_x' => $this->props['shape_scale_x'],
                'shape_scale_y' => $this->props['shape_scale_y'],
                'shape_flip' => $this->props['shape_flip'],
                'use_custom_mask' => $this->props['use_custom_mask'],
                'custom_mask' => $this->props['custom_mask'],
            ],
            $this->props['layer_1_enable'],
            $gradId2
        );

        $title_id = 'alt-text-' . uniqid();
        $viewbox_width = $this->props['viewbox_width']? $this->props['viewbox_width'] : 1000;
        $viewbox_height = $this->props['viewbox_height']? $this->props['viewbox_height'] : 1000;
        $viewbox_x = $this->props['viewbox_x']? $this->props['viewbox_x'] : 0;
        $viewbox_y = $this->props['viewbox_y']? $this->props['viewbox_y'] : 0;
        $img_alt = $this->props['img_alt'];
        $img_alt = $img_alt ? $img_alt : $this->dipi_get_image_alt_by_url($this->props['image']);
        return sprintf(
            '<div class="dipi-image-mask--mask">
                <svg width="100%%" height="100%%"  style="overflow:visible" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="%8$s %9$s %10$s %11$s" aria-labelledby="%7$s" role="img">
                    <title id="%7$s">%6$s</title>
                    %1$s
                    <style>%2$s</style>
                    %3$s
                    %4$s
                    %5$s
                </svg>
            </div>',
            $layerOneGradient, // #1
            $style,
            $bottom_layers,
            $main_layer,
            $top_layers, // #5
            esc_attr($img_alt),
            $title_id,
            $viewbox_x,
            $viewbox_y,
            $viewbox_width,
            $viewbox_height

        );
    }

}
new DIPI_ImageMask;
