<?php
/*
Element: Marquee Block
*/
use Elementor\Controls_Manager;
use Elementor\Repeater;
use Elementor\Utils;
use Elementor\Group_Control_Typography;

class PLS_Elementor_Marquee extends PLS_Elementor_Widget_Base {
	/**
	 * Retrieve the widget name.
	 *
	 * @return string Widget name.
	 */
	public function get_name() {
        return 'pls-marquee';
    }

	/**
     * Get widget title.
     *
     * @since 1.0.0
     * @access public
     *
     * @return string Widget title.
     */
    public function get_title() {
        return esc_html__( 'Marquee', 'modave-core' );
    }

    /**
     * Get widget icon.
     * @return string Widget icon.
     */
    public function get_icon() {
        return 'pls-icon eicon-form-vertical';
    }
	
	/**
     * Register tabs widget controls.
     * @since 1.0.0
     * @access protected
     */
    protected function register_controls() {
		
		
		$this->start_controls_section(
            'general_section',
            [
                'label' => esc_html__( 'Marquee Items', 'modave-core' ),
            ]
        );
		$this->add_control(
			'pause_on_hover',
			[
				'label' 	=> esc_html__( 'Pause on hover', 'modave-core' ),
				'type' 		=> Controls_Manager::SWITCHER,
				'label_off' => esc_html__( 'Off', 'modave-core' ),
				'label_on' 	=> esc_html__( 'On', 'modave-core' ),
				'default'	=> 0,
			]
		);
		$this->add_control(
			'reverse_marquee',
			[
				'label' => esc_html__( 'Is Reverse?', 'modave-core' ),
				'type' => Controls_Manager::SWITCHER,
				'label_off' => esc_html__( 'Off', 'modave-core' ),
				'label_on' => esc_html__( 'On', 'modave-core' ),
				'default'	=> 0,
			]
		);
		
		$repeater = new Repeater();
		
		$repeater->add_control(
            'title',
            [
                'label' 	=> esc_html__('Title', 'modave-core'),
                'type' 		=> Controls_Manager::TEXT,
				'label_block' => true,
				'placeholder' => esc_html__( 'Marquee Item', 'modave-core' ),
				'default' => esc_html__( 'Marquee Item', 'modave-core' ),
            ]
        );
		$repeater->add_control(
			'stroke_text_color',
			[
				'label' => esc_html__( 'Stroke Text Color', 'modave-core' ),
				'type' => Controls_Manager::SWITCHER,
				'default'	=> 0,
			]
		);
		$repeater->add_control(
			'separator_icon',
			[
				'label' => esc_html__( 'Use Separator Icon', 'modave-core' ),
				'type' => Controls_Manager::SWITCHER,
				'default'	=> 'yes',
			]
		);		
		$repeater->add_control(
            'icon_type',
            [
                'label' 	=> esc_html__('Icon Type', 'modave-core'),
                'type' 		=> Controls_Manager::SELECT,
				'options' 	=> [
					'font'	=> esc_html__( 'Font Icon', 'modave-core' ),
					'image'	=> esc_html__( 'Custom Image Icon', 'modave-core' )
				],
				'default'	=> 'font',
				'condition' => [
					'separator_icon' => [ 'yes' ],
				],
            ]
		);
		$repeater->add_control(
			'selected_icon',
			[
				'label' => esc_html__( 'Icon', 'modave-core' ),
				'type' => Controls_Manager::ICONS,
				'default'   => [
					'value'   => 'picon-energy',
					'library' => 'presslayouts-font',
				],
				'condition' => [
					'separator_icon' => [ 'yes' ],
					'icon_type' => [ 'font' ],
				],
			]
		);
		$repeater->add_control(
			'icon_image',
			[
				'label'     => esc_html__( 'Choose image', 'modave-core' ),
				'type'      => Controls_Manager::MEDIA,
				'default' 	=> [
					'url'	=> Utils::get_placeholder_image_src(),
				],
				'condition' => [
					'separator_icon' => [ 'yes' ],
					'icon_type' => [ 'image' ],
				],
			]
		);
		$repeater->add_control(
			'link',
			[
				'label' 	=> esc_html__( 'Link', 'modave-core' ),
				'type' 		=> Controls_Manager::URL,
			]
		);
		$this->add_control(
            'marquee_items',
            [
                'label' 	=> esc_html__('Menu Item','modave-core'),
                'type' 		=> Controls_Manager::REPEATER,
                'fields' 	=> $repeater->get_controls(),
                'default'	=> [
					[
						'title'	=> 'Get 10% off on selected items',
					],
					[
						'title'	=> 'New customers save 10% with the code GET10',
					],
					[
						'title'	=> '10% off swim suits',
					],
					[
						'title'	=> 'Free shipping on all orders over $50',
					],
					[
						'title'	=> '10% off on all summer essentials!',
					],
				],
                'title_field' => '{{{ elementor.helpers.renderIcon( this, selected_icon, {}, "i", "panel" ) || \'<i class="{{ icon }}" aria-hidden="true"></i>\' }}} {{{ title }}}',
            ]
        );
		$this->end_controls_section();
		
		$this->start_controls_section( 
			'list_style_section', 
			[
				'label' => esc_html__( 'Items', 'modave-core' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			] 
		);
		$this->add_responsive_control(
			'space_between',
			[
				'label' 		=> esc_html__( 'Gap', 'modave-core' ),
				'type' 			=> Controls_Manager::SLIDER,
				'description' 	=> esc_html__( 'Space between item.', 'modave-core' ), 
				'size_units' 	=> [ 'px', 'rem', '%', 'em', 'custom' ],
				'range' 		=> [
					'px' => [
						'max' => 100,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .pls-marquee-items, {{WRAPPER}} .pls-marquee' => 'gap: {{SIZE}}{{UNIT}}',
				],
			]
		);		
		$this->end_controls_section();
		
		$this->start_controls_section( 
			'style_section', 
			[
				'label' => esc_html__( 'Text', 'modave-core' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			] 
		);		
		
		$this->start_controls_tabs( 'text_colors' );
		
		$this->start_controls_tab(
			'text_colors_normal',
			[
				'label' => esc_html__( 'Normal', 'modave-core' ),
			]
		);
		$this->add_control(
            'color',
            [
                'label'		=> esc_html__( 'Color', 'modave-core' ),
                'type'		=> Controls_Manager::COLOR,                
                'selectors'	=> [
                    '{{WRAPPER}} .pls-marquee-item, {{WRAPPER}} .pls-marquee-item > a, {{WRAPPER}} .pls-marquee-item-icon' => 'color: {{VALUE}};',
                    '{{WRAPPER}} .pls-marquee-stroke-color, {{WRAPPER}} .pls-marquee-stroke-color a' => '-webkit-text-stroke: 1px {{VALUE}};',
                ],
            ]
        );
		$this->end_controls_tab();
		
		$this->start_controls_tab(
			'text_colors_hover',
			[
				'label' => esc_html__( 'Hover', 'modave-core' ),
			]
		);
		$this->add_control(
            'color_hover',
            [
                'label'		=> esc_html__( 'Color', 'modave-core' ),
                'type'		=> Controls_Manager::COLOR,
				'description' => esc_html__( 'This color work on link hover.', 'modave-core' ),    
                'selectors'	=> [
                    '{{WRAPPER}} .pls-marquee-item:hover > a' => 'color: {{VALUE}};'
                ],
            ]
        );
		$this->end_controls_tab();
		
		$this->add_group_control(
			Group_Control_Typography::get_type(), 
			[
				'name'     => 'text_typography',
				'label'    => esc_html__( 'Typography', 'modave-core' ),
				'selector' => '{{WRAPPER}} .pls-marquee-item-text',
			] 
		);
		$this->end_controls_tabs();
		
		$this->add_control(
            'stroke_color',
            [
                'label'		=> esc_html__( 'Stroke Color', 'modave-core' ),
                'type'		=> Controls_Manager::COLOR,                
                'selectors'	=> [
                    '{{WRAPPER}} .pls-marquee-stroke-color, {{WRAPPER}} .pls-marquee-stroke-color a' => 'color: {{VALUE}};',
                ],
            ]
        );
		
		$this->end_controls_section();
		
		$this->start_controls_section(
			'section_icon_style',
			[
				'label' => esc_html__( 'Icon', 'modave-core' ),
				'tab' => Controls_Manager::TAB_STYLE,
			]
		);		
		$this->add_responsive_control(
			'icon_size',
			[
				'label' 		=> esc_html__( 'Size', 'modave-core' ),
				'type' 			=> Controls_Manager::SLIDER,
				'description' 	=> esc_html__( 'This option works when the separator icon is Yes.', 'modave-core' ), 
				'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
				'default' => [
					'size' => 14,
				],
				'range' => [
					'px' => [
						'min' => 6,
					],
					'%' => [
						'min' => 6,
					],
					'vw' => [
						'min' => 6,
					],
				],
				'separator' => 'before',
				'selectors' => [
					'{{WRAPPER}} .pls-marquee-item-icon i' => 'font-size: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .pls-marquee-item-icon svg' => 'width: {{SIZE}}{{UNIT}};',
				],
			]
		);
		$this->add_control(
            'icon_color',
            [
                'label'		=> esc_html__( 'Color', 'modave-core' ),
                'type'		=> Controls_Manager::COLOR,                
                'selectors'	=> [
					'{{WRAPPER}} .pls-marquee-item-icon' => 'fill: {{VALUE}};',
					'{{WRAPPER}} .pls-marquee-item-separator' => 'background-color: {{VALUE}};'
                ],
            ]
        );
		$this->end_controls_section();

	}
	
	protected function render() {
		
		$settings = $this->get_settings();
		extract( $settings );
		if ( empty( $settings['marquee_items'] ) ) {
			return;
		}
		$settings['id'] 	= pls_uniqid( 'pls-marquee-' );
		$settings['class'] 	 = $reverse_marquee === 'yes' ? ' pls-marquee-reverse' : '' ;
		$settings['class']   .= $pause_on_hover === 'yes' ? ' pls-marquee-hover-paused' : '' ;
		
		pls_core_get_templates( 'elements-widgets/marquee', $settings );
	}
}

$widgets_manager->register(new PLS_Elementor_Marquee());