<?php
namespace Sifency\Traits;
if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}
use \Elementor\Controls_Manager;
use \Elementor\Group_Control_Border;
use \Elementor\Group_Control_Box_Shadow;
use \Elementor\Group_Control_Css_Filter;
use \Elementor\Group_Control_Typography;
trait Sifency_Product_image_Controls {

	/**
	 * Add complete icon style controls (normal + hover) for any widget.
	 *
	 * @param array $args Optional customization.
	 */
	protected function add_sifency_product_image_controls( $args = [] ) {

		$this->start_controls_section(
			'section_style_image',
			[
				'label' => esc_html__( 'Main Image', 'sifency-addons' ),
				'tab' => Controls_Manager::TAB_STYLE,
			]
		);

        $this->add_responsive_control(
            'image_width',
            [
                'label' => esc_html__('Width', 'sifency-addons'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['%', 'px', 'vw'],
                'range' => [
                    '%' => ['min' => 20, 'max' => 100],
                    'px' => ['min' => 100, 'max' => 1000],
                    'vw' => ['min' => 20, 'max' => 100],
                ],
                'selectors' => [
                    '{{WRAPPER}} .woocommerce-product-gallery' => 'width: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        // Responsive Height Control
        $this->add_responsive_control(
            'image_height',
            [
                'label' => esc_html__('Height', 'sifency-addons'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'vh'],
                'range' => [
                    'px' => ['min' => 100, 'max' => 1000],
                    'vh' => ['min' => 20, 'max' => 100],
                ],
                'selectors' => [
                    '{{WRAPPER}} .woocommerce-product-gallery .flex-viewport' => 'height: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        // Object Fit Control
        $this->add_responsive_control(
            'image_object_fit',
            [
                'label' => esc_html__('Object Fit', 'sifency-addons'),
                'type' => Controls_Manager::SELECT,
                'options' => [
                    '' => esc_html__('Default', 'sifency-addons'),
                    'fill' => esc_html__('Fill', 'sifency-addons'),
                    'cover' => esc_html__('Cover', 'sifency-addons'),
                    'contain' => esc_html__('Contain', 'sifency-addons'),
                ],
                'selectors' => [
                    '{{WRAPPER}} .woocommerce-product-gallery__image img' => 'object-fit: {{VALUE}};',
                ],
                'condition' => [
                    'image_height[size]!' => '',
                ],
            ]
        );

        $this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name' => 'image_border',
				'selector' => '{{WRAPPER}} .woocommerce-product-gallery__wrapper, {{WRAPPER}} .woocommerce-product-gallery__image:first-child img',
			]
		);

        $this->add_responsive_control(
            'image_border_radius',
            [
                'label' => esc_html__('Border Radius', 'sifency-addons'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .woocommerce-product-gallery__wrapper' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;',
                    '{{WRAPPER}} .woocommerce-product-gallery__image img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->start_controls_tabs('image_effects_tabs');

        $this->start_controls_tab('image_normal_tab', ['label' => esc_html__('Normal', 'sifency-addons')]);

        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'image_box_shadow',
                'selector' => '{{WRAPPER}} .woocommerce-product-gallery__wrapper',
            ]
        );

        $this->add_group_control(
            Group_Control_Css_Filter::get_type(),
            [
                'name' => 'image_css_filters',
                'selector' => '{{WRAPPER}} .woocommerce-product-gallery__image img',
            ]
        );

        $this->end_controls_tab();

        $this->start_controls_tab('image_hover_tab', ['label' => esc_html__('Hover', 'sifency-addons')]);

        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'image_box_shadow_hover',
                'selector' => '{{WRAPPER}} .woocommerce-product-gallery__wrapper:hover',
            ]
        );

        $this->add_group_control(
            Group_Control_Css_Filter::get_type(),
            [
                'name' => 'image_css_filters_hover',
                'selector' => '{{WRAPPER}} .woocommerce-product-gallery__image:hover img',
            ]
        );

        $this->add_control(
            'image_scale_hover',
            [
                'label' => esc_html__('Scale', 'sifency-addons'),
                'type' => Controls_Manager::SLIDER,
                'range' => [
                    'px' => ['min' => 1, 'max' => 1.5, 'step' => 0.01],
                ],
                'default' => [
                    'size' => 1,
                ],
                'selectors' => [
                    '{{WRAPPER}} .woocommerce-product-gallery__image:hover img' => 'transform: scale({{SIZE}});',
                ],
            ]
        );

        $this->add_control(
            'hover_transition',
            [
                'label' => esc_html__('Transition Duration', 'sifency-addons'),
                'type' => Controls_Manager::SLIDER,
                'range' => [
                    'px' => ['max' => 3, 'step' => 0.1],
                ],
                'selectors' => [
                    '{{WRAPPER}} .woocommerce-product-gallery__image img' => 'transition: all {{SIZE}}s ease;',
                ],
            ]
        );

        $this->end_controls_tab();
        $this->end_controls_tabs();

		$this->end_controls_section();

        // Thumbnails Style Section
        $this->start_controls_section(
            'section_style_thumbnails',
            [
                'label' => esc_html__('Thumbnails', 'sifency-addons'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_responsive_control(
            'thumbnails_spacing',
            [
                'label' => esc_html__('Spacing Between', 'sifency-addons'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => ['min' => 0, 'max' => 50],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 10,
                ],
                'selectors' => [
                    '{{WRAPPER}} .flex-control-thumbs li' => 'padding: 0 {{SIZE}}{{UNIT}} {{SIZE}}{{UNIT}} 0;',
                    '{{WRAPPER}} .flex-control-thumbs' => 'margin-right: -{{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'thumbnails_border',
                'selector' => '{{WRAPPER}} .flex-control-thumbs img',
            ]
        );

        $this->add_responsive_control(
            'thumbnails_border_radius',
            [
                'label' => esc_html__('Border Radius', 'sifency-addons'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .flex-control-thumbs img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'active_thumbnail_border_color',
            [
                'label' => esc_html__('Active Border Color', 'sifency-addons'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .flex-control-thumbs img.flex-active, {{WRAPPER}} .flex-control-thumbs li:hover img' => 'border-color: {{VALUE}};',
                ],
                'separator' => 'before',
            ]
        );

        $this->end_controls_section();

        // Sale Flash Style Section
        $this->start_controls_section(
            'section_sale_flash_style',
            [
                'label' => esc_html__('Sale Flash', 'sifency-addons'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'show_sale_flash',
            [
                'label' => esc_html__('Show Sale Flash', 'sifency-addons'),
                'type' => Controls_Manager::SWITCHER,
                'label_on' => esc_html__('Show', 'sifency-addons'),
                'label_off' => esc_html__('Hide', 'sifency-addons'),
                'return_value' => 'yes',
                'default' => 'yes',
                'selectors' => [
                    '{{WRAPPER}} .woocommerce-product-gallery' => 'position: relative;',
                    '{{WRAPPER}} span.onsale' => 'display: block;',
                ],
            ]
        );
        
        $this->add_control(
			'sale_flash_text_color',
			[
				'label'     => esc_html__( 'Text Color', 'sifency-addons' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} span.onsale' => 'color: {{VALUE}};',
				],
                'condition' => [
                    'show_sale_flash' => 'yes',
                ],
			]
		);

		$this->add_control(
			'sale_flash_bg_color',
			[
				'label'     => esc_html__( 'Background Color', 'sifency-addons' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} span.onsale' => 'background-color: {{VALUE}};',
				],
                'condition' => [
                    'show_sale_flash' => 'yes',
                ],
			]
		);

        $this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'sale_flash_typography',
				'selector' => '{{WRAPPER}} span.onsale',
                'condition' => [
                    'show_sale_flash' => 'yes',
                ],
			]
		);

        $this->add_responsive_control(
            'sale_flash_border_radius',
            [
                'label' => esc_html__('Border Radius', 'sifency-addons'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} span.onsale' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
                'condition' => [
                    'show_sale_flash' => 'yes',
                ],
            ]
        );

        $this->add_responsive_control(
            'sale_flash_padding',
            [
                'label' => esc_html__('Padding', 'sifency-addons'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em'],
                'selectors' => [
                    '{{WRAPPER}} span.onsale' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
                'condition' => [
                    'show_sale_flash' => 'yes',
                ],
            ]
        );

        $this->add_responsive_control(
            'sale_flash_position_top',
            [
                'label' => esc_html__('Position Top', 'sifency-addons'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em', '%'],
                'range' => [
                    'px' => ['min' => 0, 'max' => 200],
                    'em' => ['min' => 0, 'max' => 20],
                    '%' => ['min' => 0, 'max' => 100],
                ],
                'selectors' => [
                    '{{WRAPPER}} span.onsale' => 'top: {{SIZE}}{{UNIT}}; right: auto; bottom: auto;',
                ],
                'condition' => [
                    'show_sale_flash' => 'yes',
                ],
            ]
        );

        $this->add_responsive_control(
            'sale_flash_position_left',
            [
                'label' => esc_html__('Position Left', 'sifency-addons'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em', '%'],
                'range' => [
                    'px' => ['min' => 0, 'max' => 200],
                    'em' => ['min' => 0, 'max' => 20],
                    '%' => ['min' => 0, 'max' => 100],
                ],
                'selectors' => [
                    '{{WRAPPER}} span.onsale' => 'left: {{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'show_sale_flash' => 'yes',
                ],
            ]
        );

		$this->end_controls_section();
	}
}