<?php
/*
Element: Instagram Shop
*/
use Elementor\Repeater;
use Elementor\Utils;
use Elementor\Controls_Manager;
class PLS_Elementor_InstagramShop extends PLS_Elementor_Widget_Base {
	
	/**
	 * Retrieve the widget name.
	 *
	 * @return string Widget name.
	 */
	public function get_name() {
        return 'pls-instagram-shop';
    }

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

    /**
     * Get widget icon.
     *
     * Retrieve tabs widget icon.
     *
     * @since 1.0.0
     * @access public
     *
     * @return string Widget icon.
     */
    public function get_icon() {
        return 'pls-icon eicon-instagram-gallery';
    }
	
	/**
     * Register tabs widget controls.
     *
     * Adds different input fields to allow the user to change and customize the widget settings.
     *
     * @since 1.0.0
     * @access protected
     */
    protected function register_controls() {
		
		$this->start_controls_section(
            'section_content_general',
            [
                'label' => esc_html__( 'General', 'modave-core' ),
            ]
        );
		$this->add_control(
            'layout',
            [
                'label' 	=> esc_html__( 'Layout', 'modave-core' ),
                'type' 		=> Controls_Manager::SELECT,
                'options' 	=> [
					'slider'	=> esc_html__( 'Slider', 'modave-core' ),
					'grid'		=> esc_html__( 'Grid', 'modave-core' ),
				],
                'default' 	=> 'slider',
            ]
        );
		$this->add_control(
            'column_gap',
            [
                'label' 	=> esc_html__( 'Columns Gap', 'modave-core' ),
                'type' 		=> Controls_Manager::SELECT,
                'options' 	=> [
					'0'		=> esc_html__( 'None', 'modave-core' ),
					'5'		=> esc_html__( '5', 'modave-core' ),
					'10'	=> esc_html__( '10', 'modave-core' ),
					'15'	=> esc_html__( '15', 'modave-core' ),
					'20'	=> esc_html__( '20', 'modave-core' ),
					'30'	=> esc_html__( '30', 'modave-core' ),
				],
				'default' 	=> '0',
				'selectors' => [
					'{{WRAPPER}} .section-content.row, {{WRAPPER}} .pls-instagram-wrap.row' => 'margin-left: -{{VALUE}}px; margin-right: -{{VALUE}}px; row-gap: calc({{VALUE}}px * 2);',
					'{{WRAPPER}} .pls-instagram-image' => 'padding-left: {{VALUE}}px; padding-right: {{VALUE}}px',
				],
            ]
        );
		$this->add_responsive_control(
			'border_radius',
			[
				'label'       => esc_html__( 'Border Radius', 'modave-core' ),
				'type'        => Controls_Manager::SLIDER,
				'size_units'  => [ 'px', 'rem', '%' ],
				'range'       => [
					'px' => [
						'step' => 1,
						'min'  => 0,
						'max'  => 500,
					],
				],
				'selectors'		=> [
					'{{WRAPPER}} .pls-insta-image-wrap' => 'border-radius: {{SIZE}}{{UNIT}};',
				]
			]
		);
		$this->end_controls_section();
		
		$repeater = new Repeater();
		
		$repeater->add_control(
			'image',
			[
				'label'     => esc_html__( 'Image', 'modave-core' ),
				'type'      => Controls_Manager::MEDIA,
				'description'	=> esc_html__( 'Upload  image.', 'modave-core' ),
				'default' => [
					'url' => Utils::get_placeholder_image_src(),
				],
			]
		);	
		$repeater->add_control(
            'product_id',
            [
                'label'			=> esc_html__('Select Product Id', 'modave-core'),
                'type'			=> 'pls_autocomplete',
				'search'		=> 'pls_core_elementor_search_post',
				'render'		=> 'pls_core_elementor_render_post',
				'post_type'		=> 'product',
				'label_block'	=> true,
				'description' 	=> esc_html__( 'Select specific product.', 'modave-core' ),
            ]
        );
		
		$this->start_controls_section(
			'section_content_image',
			array(
				'label'     => esc_html__( 'Images', 'modave-core' ),
				'tab'       => Controls_Manager::TAB_CONTENT,
			)
		);
		$this->add_control(
            'gallery_images',
            [
                'label' 	=> esc_html__( 'Images', 'modave-core' ),
                'type' 		=> Controls_Manager::REPEATER,
				'fields' 	=> $repeater->get_controls(),
            ]
        );
		$this->end_controls_section();
		
		$this->start_controls_section(
			'section_content_grid',
			array(
				'label'     => esc_html__( 'Grid Settings', 'modave-core' ),
				'tab'       => Controls_Manager::TAB_CONTENT,
				'condition' => array(
					'layout' => 'grid',
				),
			)
		);
		$this->add_responsive_control(
			'grid_columns',
			[
				'label'		=> esc_html__( 'Columns', 'modave-core' ),
				'type' 		=> Controls_Manager::SELECT,
                'options' 	=> [
					'1'		=> esc_html__( '1', 'modave-core' ),
					'2'		=> esc_html__( '2', 'modave-core' ),
					'3'		=> esc_html__( '3', 'modave-core' ),
					'4'		=> esc_html__( '4', 'modave-core' ),
					'5'		=> esc_html__( '5', 'modave-core' ),
					'6'		=> esc_html__( '6', 'modave-core' ),
					'7'		=> esc_html__( '7', 'modave-core' ),
					'8'		=> esc_html__( '8', 'modave-core' ),
				],
				'default' 			=> '5',
				'tablet_default' 	=> '3',
				'mobile_default' 	=> '2',
				'condition' => [
					'layout'	=> 'grid'
				],
			]
		);
		$this->end_controls_section();
		
		$this->start_controls_section(
			'section_content_slider',
			array(
				'label'     => esc_html__( 'Slider Settings', 'modave-core' ),
				'tab'       => Controls_Manager::TAB_CONTENT,
				'condition' => array(
					'layout'	=> 'slider',
				),
			)
		);
		$this->add_responsive_control(
			'slides_to_show',
			[
				'label'			=> esc_html__( 'Slides to Show', 'modave-core' ),
				'type' 		=> Controls_Manager::SELECT,
                'options' 	=> [
					'1'		=> esc_html__( '1', 'modave-core' ),
					'2'		=> esc_html__( '2', 'modave-core' ),
					'3'		=> esc_html__( '3', 'modave-core' ),
					'4'		=> esc_html__( '4', 'modave-core' ),
					'5'		=> esc_html__( '5', 'modave-core' ),
					'6'		=> esc_html__( '6', 'modave-core' ),
					'7'		=> esc_html__( '7', 'modave-core' ),
					'8'		=> esc_html__( '8', 'modave-core' ),
				],
				'default' 			=> '5',
				'tablet_default' 	=> '3',
				'mobile_default' 	=> '2',
			]
		);
		$this->add_control(
			'slider_autoplay',
			[
				'label'     => esc_html__( 'Autoplay', 'modave-core' ),
				'type'      => Controls_Manager::SWITCHER,
				'default'   => 0,
			]
		);
		$this->add_control(
			'slider_pause_on_hover',
			[
				'label'     => esc_html__( 'Pause On Hover', 'modave-core' ),
				'type'      => Controls_Manager::SWITCHER,
				'default'   => 0,
				'condition' => [
					'slider_autoplay' => [ 'yes' ],
				],
			]
		);
		$this->add_control(
			'slider_loop',
			[
				'label'     => esc_html__( 'Loop', 'modave-core' ),
				'type'      => Controls_Manager::SWITCHER,
				'default'   => 0,
			]
		);
		$this->add_control(
			'slider_navigation',
			[
				'label'     => esc_html__( 'Nav', 'modave-core' ),
				'type'      => Controls_Manager::SWITCHER,
				'default'   => 'yes',
			]
		);
		$this->add_control(
			'slider_dots',
			[
				'label'     => esc_html__( 'Dots', 'modave-core' ),
				'type'      => Controls_Manager::SWITCHER,
				'default'   => 0,
			]
		);
		$this->end_controls_section();		
		
	}
	
	protected function render() {
		
		$settings = $this->get_settings();
		$settings = wp_parse_args( $settings, [ 
			'slides_to_show_tablet' => 3,
			'slides_to_show_mobile' => 2,
			'grid_columns_tablet'	=> 3,
			'grid_columns_mobile'	=> 2
		]);
		extract( $settings );
		
		$class					= array( 'pls-element', 'pls-instagram','pls-instagram-shop' );
		$settings['class']		= implode( ' ', $class );
		$settings['id']			= pls_uniqid( 'pls-instagram-shop-' );
		$settings['section_class'] 	= '';
		$column_class				= array();
		$grid_class					= array();
		$settings['rows'] = 1;
				
		if( 'grid' == $layout ){
			$grid_class[] 		= 'row';
			$grid_class[] 		= 'grid-col-lg-'. $grid_columns;
			$grid_class[] 		= 'grid-col-md-'. $grid_columns_tablet;
			$grid_class[] 		= 'grid-col-'. $grid_columns_mobile;
			$settings['rows']	= 1;
		}else{			
			$settings['section_class'] 	= ' pls-slider swiper row';
			$settings['slider_options'] = pls_slider_attributes( $settings);
			$grid_class[] = 'swiper-wrapper';
			$grid_class[] = 'slider-col-lg-'.$slides_to_show;
			$grid_class[] = 'slider-col-md-'.$slides_to_show_tablet;
			$grid_class[] = 'slider-col-'.$slides_to_show_mobile;
			if( $settings['rows'] <= 1 ){
				$column_class[] = ' swiper-slide';
			}						
		}
		
		$settings['column_class']	= implode( ' ', array_filter( $column_class ) );
		$settings['grid_class']	= implode( ' ', array_filter( $grid_class ) );
		
		pls_core_get_templates( 'elements-widgets/instagram/shop', $settings );	
	}	
}

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