<?php

namespace OXI_IMAGE_HOVER_PLUGINS\Modules\Square\Admin;

if (!defined('ABSPATH')) {
    exit;
}

/**
 * Description of Effects21
 *
 * @author biplo
 */
use OXI_IMAGE_HOVER_PLUGINS\Modules\Square\Modules as Modules;
use OXI_IMAGE_HOVER_PLUGINS\Classes\Controls as Controls;

class Effects22 extends Modules {

    public function register_effects() {
        return $this->add_control(
                        'image_hover_effects',
                        $this->style,
                        [
                            'label' => esc_html__('Effects Direction', 'image-hover-effects-ultimate'),
                            'type' => Controls::SELECT,
                            'default' => 'bottom_to_left',
                            'options' => [
                                'position_to_top_left' => esc_html__('Top Left', 'image-hover-effects-ultimate'),
                                'position_to_top_right' => esc_html__('Top Right', 'image-hover-effects-ultimate'),
                                'position_to_bottom_left' => esc_html__('Bottom Left', 'image-hover-effects-ultimate'),
                                'position_to_bottom_right' => esc_html__('Bottom Right', 'image-hover-effects-ultimate'),
                            ],
                            'selector' => [
                                '{{WRAPPER}} .oxi-image-hover-figure' => '',
                            ],
                            'simpledescription' => 'Allows you to Set Effects Direction.',
                            'description' => 'Allows you to Set Effects Direction.',
                        ]
        );
    }

    public function register_general_style() {
        $this->start_controls_section(
                'oxi-image-hover',
                [
                    'label' => esc_html__('Width & Height', 'image-hover-effects-ultimate'),
                    'showing' => true,
                ]
        );
        $this->add_responsive_control(
                'oxi-image-hover-width',
                $this->style,
                [
                    'label' => esc_html__('Width', 'image-hover-effects-ultimate'),
                    'type' => Controls::SLIDER,
                    'default' => [
                        'unit' => 'px',
                        'size' => '',
                    ],
                    'range' => [
                        'px' => [
                            'min' => 0,
                            'max' => 1900,
                            'step' => 1,
                        ],
                        '%' => [
                            'min' => 1,
                            'max' => 100,
                            'step' => 1,
                        ],
                        'em' => [
                            'min' => 1,
                            'max' => 200,
                            'step' => 0.1,
                        ],
                    ],
                    'selector' => [
                        '{{WRAPPER}} .oxi-image-hover-style-square' => 'max-width:{{SIZE}}{{UNIT}};',
                    ],
                    'simpledescription' => 'Customize Image Width as like as you want, will be pixel Value.',
                    'description' => 'Customize Image Width with several options as Pixel, Percent or EM.',
                ]
        );
        $this->add_responsive_control(
                'oxi-image-hover-height',
                $this->style,
                [
                    'label' => esc_html__('Height', 'image-hover-effects-ultimate'),
                    'type' => Controls::SLIDER,
                    'default' => [
                        'unit' => 'px',
                        'size' => '',
                    ],
                    'range' => [
                        'px' => [
                            'min' => 0,
                            'max' => 1000,
                            'step' => 1,
                        ],
                        '%' => [
                            'min' => 1,
                            'max' => 200,
                            'step' => 1,
                        ],
                    ],
                    'selector' => [
                        '{{WRAPPER}} .oxi-image-hover-style-square:after ' => 'padding-bottom:{{SIZE}}{{UNIT}};',
                    ],
                    'simpledescription' => 'Customize Image Height as like as you want, will be Percent Value.',
                    'description' => 'Customize Image Height with several options as Pixel, Percent or EM.',
                ]
        );
        $this->add_responsive_control(
                'oxi-image-hover-margin',
                $this->style,
                [
                    'label' => esc_html__('Margin', 'image-hover-effects-ultimate'),
                    'type' => Controls::DIMENSIONS,
                    'simpledimensions' => 'double',
                    'default' => [
                        'unit' => 'px',
                        'size' => '',
                    ],
                    'range' => [
                        'px' => [
                            'min' => 0,
                            'max' => 500,
                            'step' => 1,
                        ],
                        '%' => [
                            'min' => 0,
                            'max' => 100,
                            'step' => 1,
                        ],
                        'em' => [
                            'min' => 0,
                            'max' => 200,
                            'step' => .1,
                        ],
                    ],
                    'selector' => [
                        '{{WRAPPER}} .oxi-image-hover-style' => 'padding:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    ],
                    'simpledescription' => 'Margin properties are used to create space around Image.',
                    'description' => 'Margin properties are used to create space around Image with several options as Pixel, or Percent or EM.',
                ]
        );
        $this->end_controls_section();
    }

    public function register_content_settings() {
        $this->start_controls_section(
                'oxi-image-hover',
                [
                    'label' => esc_html__('Content Settings', 'image-hover-effects-ultimate'),
                    'showing' => TRUE,
                ]
        );
        $this->add_responsive_control(
                'oxi-image-hover-content-width',
                $this->style,
                [
                    'label' => esc_html__('Width', 'image-hover-effects-ultimate'),
                    'type' => Controls::SLIDER,
                    'default' => [
                        'unit' => 'px',
                        'size' => '',
                    ],
                    'range' => [
                        'px' => [
                            'min' => 0,
                            'max' => 1900,
                            'step' => 1,
                        ],
                        '%' => [
                            'min' => 1,
                            'max' => 100,
                            'step' => 1,
                        ],
                        'em' => [
                            'min' => 1,
                            'max' => 200,
                            'step' => 0.1,
                        ],
                    ],
                    'selector' => [
                        '{{WRAPPER}} .oxi-image-hover-figure-caption' => 'width:{{SIZE}}{{UNIT}};',
                    ],
                    'simpledescription' => 'Customize Image Width as like as you want, will be pixel Value.',
                    'description' => 'Customize Image Width with several options as Pixel, Percent or EM.',
                ]
        );

        $this->add_control(
                'oxi-image-hover-background-color', $this->style, [
            'label' => esc_html__('Background', 'image-hover-effects-ultimate'),
            'type' => Controls::GRADIENT,
            'default' => 'rgba(255, 116, 3, 1)',
            'selector' => [
                '{{WRAPPER}} .oxi-image-hover-caption-tab' => 'background:{{VALUE}};',
            ],
            'simpledescription' => 'Customize Hover Background with transparent options.',
            'description' => 'Customize Hover Background with Color or Gradient or Image properties.',
                ]
        );
        $this->add_responsive_control(
                'oxi-image-hover-border-radius',
                $this->style,
                [
                    'label' => esc_html__('Border Radius', 'image-hover-effects-ultimate'),
                    'type' => Controls::DIMENSIONS,
                    'default' => [
                        'unit' => 'px',
                        'size' => '',
                    ],
                    'range' => [
                        'px' => [
                            'min' => 0,
                            'max' => 500,
                            'step' => 1,
                        ],
                        '%' => [
                            'min' => 0,
                            'max' => 50,
                            'step' => 1,
                        ],
                        'em' => [
                            'min' => 0,
                            'max' => 100,
                            'step' => .1,
                        ],
                    ],
                    'selector' => [
                        '{{WRAPPER}} .oxi-image-hover .oxi-image-hover-caption-tab, {{WRAPPER}} .oxi-image-hover:hover .oxi-image-hover-caption-tab, {{WRAPPER}} .oxi-image-hover.oxi-touch .oxi-image-hover-caption-tab' => 'border-radius:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    ],
                    'simpledescription' => 'Allows you to add rounded corners at Hover to Image with options.',
                    'description' => 'Allows you to add rounded corners at Hover to Image with options.',
                ]
        );

        $this->add_responsive_control(
                'oxi-image-hover-content-margin',
                $this->style,
                [
                    'label' => esc_html__('Margin', 'image-hover-effects-ultimate'),
                    'type' => Controls::DIMENSIONS,
                    'simpledimensions' => 'Double',
                    'default' => [
                        'unit' => 'px',
                        'size' => -10,
                    ],
                    'range' => [
                        'px' => [
                            'min' => -100,
                            'max' => 500,
                            'step' => 1,
                        ],
                        '%' => [
                            'min' => -100,
                            'max' => 100,
                            'step' => 1,
                        ],
                        'em' => [
                            'min' => -100,
                            'max' => 100,
                            'step' => .1,
                        ],
                    ],
                    'selector' => [
                        '{{WRAPPER}} .oxi-image-hover-figure .oxi-image-hover-figure-caption' => 'margin:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    ],
                    'simpledescription' => 'Margin properties are used to create space around Body.',
                    'description' => 'Margin properties are used to create space around Content Body. Negetive Value will replace extra place',
                ]
        );
        $this->end_controls_section();
    }

    public function register_heading_settings() {
        $this->start_controls_section(
                'oxi-image-hover',
                [
                    'label' => esc_html__('Heading Settings', 'image-hover-effects-ultimate'),
                    'showing' => TRUE,
                ]
        );

        $this->add_group_control(
                'oxi-image-hover-heading-typho',
                $this->style,
                [
                    'type' => Controls::TYPOGRAPHY,
                    'include' => Controls::ALIGNNORMAL,
                    'selector' => [
                        '{{WRAPPER}} .oxi-image-hover-figure-caption .oxi-image-hover-heading' => '',
                    ]
                ]
        );
        $this->add_control(
                'oxi-image-hover-heading-color',
                $this->style,
                [
                    'label' => esc_html__('Color', 'image-hover-effects-ultimate'),
                    'type' => Controls::COLOR,
                    'default' => '#ffffff',
                    'selector' => [
                        '{{WRAPPER}} .oxi-image-hover-figure-caption .oxi-image-hover-heading' => 'color: {{VALUE}};',
                    ],
                    'simpledescription' => 'Color property is used to set the color of the Heading.',
                    'description' => 'Color property is used to set the color of the Heading.',
                ]
        );
        $this->add_group_control(
                'oxi-image-hover-heading-tx-shadow',
                $this->style,
                [
                    'type' => Controls::TEXTSHADOW,
                    'selector' => [
                        '{{WRAPPER}} .oxi-image-hover-figure-caption .oxi-image-hover-heading' => '',
                    ],
                    'simpledescription' => 'Text Shadow property adds shadow to Heading.',
                    'description' => 'Text Shadow property adds shadow to Heading.',
                ]
        );
        $this->add_responsive_control(
                'oxi-image-hover-heading-margin',
                $this->style,
                [
                    'label' => esc_html__('Margin', 'image-hover-effects-ultimate'),
                    'type' => Controls::DIMENSIONS,
                    'simpledimensions' => 'heading',
                    'default' => [
                        'unit' => 'px',
                        'size' => '',
                    ],
                    'range' => [
                        'px' => [
                            'min' => 0,
                            'max' => 500,
                            'step' => 1,
                        ],
                        '%' => [
                            'min' => 0,
                            'max' => 100,
                            'step' => 1,
                        ],
                        'em' => [
                            'min' => 0,
                            'max' => 100,
                            'step' => .1,
                        ],
                    ],
                    'selector' => [
                        '{{WRAPPER}} .oxi-image-hover-figure-caption .oxi-image-hover-figure-heading' => 'padding:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    ],
                    'simpledescription' => 'Margin properties are used to create space around Heading.',
                    'description' => 'Margin properties are used to create space around Heading.',
                ]
        );
        $this->add_control(
                'oxi-image-hover-heading-animation',
                $this->style,
                [
                    'label' => esc_html__('Animation', 'image-hover-effects-ultimate'),
                    'type' => Controls::SELECT,
                    'default' => '',
                    'options' => [
                        '' => esc_html__('None', 'image-hover-effects-ultimate'),
                        'iheu-fade-up' => esc_html__('Fade Up', 'image-hover-effects-ultimate'),
                        'iheu-fade-down' => esc_html__('Fade Down', 'image-hover-effects-ultimate'),
                        'iheu-fade-left' => esc_html__('Fade Left', 'image-hover-effects-ultimate'),
                        'iheu-fade-right' => esc_html__('Fade Right', 'image-hover-effects-ultimate'),
                        'iheu-fade-up-big' => esc_html__('Fade up Big', 'image-hover-effects-ultimate'),
                        'iheu-fade-down-big' => esc_html__('Fade down Big', 'image-hover-effects-ultimate'),
                        'iheu-fade-left-big' => esc_html__('Fade left Big', 'image-hover-effects-ultimate'),
                        'iheu-fade-right-big' => esc_html__('Fade Right Big', 'image-hover-effects-ultimate'),
                        'iheu-zoom-in' => esc_html__('Zoom In', 'image-hover-effects-ultimate'),
                        'iheu-zoom-out' => esc_html__('Zoom Out', 'image-hover-effects-ultimate'),
                        'iheu-flip-x' => esc_html__('Flip X', 'image-hover-effects-ultimate'),
                        'iheu-flip-y' => esc_html__('Flip Y', 'image-hover-effects-ultimate'),
                    ],
                    'selector' => [
                        '{{WRAPPER}} .oxi-image-hover-figure-caption .oxi-image-hover-figure-heading' => '',
                    ],
                    'simpledescription' => 'Allows you to animated Heading while viewing.',
                    'description' => 'Allows you to animated Heading while viewing.',
                ]
        );
        $this->add_control(
                'oxi-image-hover-heading-animation-delay',
                $this->style,
                [
                    'label' => esc_html__('Animation Delay', 'image-hover-effects-ultimate'),
                    'type' => Controls::SELECT,
                    'default' => '',
                    'options' => [
                        '' => esc_html__('None', 'image-hover-effects-ultimate'),
                        'oxi-image-hover-delay-xs' => esc_html__('Delay XS', 'image-hover-effects-ultimate'),
                        'oxi-image-hover-delay-sm' => esc_html__('Delay SM', 'image-hover-effects-ultimate'),
                        'oxi-image-hover-delay-md' => esc_html__('Delay MD', 'image-hover-effects-ultimate'),
                        'oxi-image-hover-delay-lg' => esc_html__('Delay LG', 'image-hover-effects-ultimate'),
                        'oxi-image-hover-delay-xl' => esc_html__('Delay XL', 'image-hover-effects-ultimate'),
                        'oxi-image-hover-delay-xxl' => esc_html__('Delay XXL', 'image-hover-effects-ultimate'),
                    ],
                    'selector' => [
                        '{{WRAPPER}} .oxi-image-hover-figure-caption .oxi-image-hover-figure-heading' => '',
                    ],
                    'simpledescription' => 'Allows you to animation delay at Heading while viewing.',
                    'description' => 'Allows you to animation delay at Heading while viewing.',
                ]
        );

        $this->end_controls_section();
    }

    public function register_heading_underline() {
        
    }

    public function register_description_settings() {
        
    }

    public function register_button_settings() {
        
    }

    public function modal_form_data() {
        ?>
        <div class="modal-header">
            <h4 class="modal-title">Image Hover Form</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
            <?php
            $this->add_control(
                    'image_hover_heading',
                    $this->style,
                    [
                        'label' => esc_html__('Title', 'image-hover-effects-ultimate'),
                        'type' => Controls::TEXT,
                        'default' => '',
                        'placeholder' => 'Heading',
                        'description' => 'Add Your Image Hover Title.'
                    ]
            );

            $this->add_group_control(
                    'image_hover_image',
                    $this->style,
                    [
                        'label' => esc_html__('Image', 'image-hover-effects-ultimate'),
                        'type' => Controls::MEDIA,
                        'description' => 'Add or Modify Your Image. You can use Media Library or Custom URL'
                    ]
            );
            $this->add_group_control(
                    'image_hover_button_link',
                    $this->style,
                    [
                        'label' => esc_html__('URL', 'image-hover-effects-ultimate'),
                        'type' => Controls::URL,
                        'separator' => TRUE,
                        'default' => '',
                        'placeholder' => 'https://www.yoururl.com',
                        'description' => 'Add Your Desire Link or Url Unless make it blank'
                    ]
            );
            ?>
        </div>
        <?php
    }

}
