<?php
/**
 * A reusable Elementor trait for adding a comprehensive and advanced set of IMAGE STYLE controls.
 * This trait applies styles to a predefined HTML structure with specific classes.
 *
 * @package Sifency\Traits
 */

namespace Sifency\Traits;

if ( ! defined('ABSPATH') ) {
    exit; // Exit if accessed directly.
}

use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Css_Filter;
use Elementor\Group_Control_Background;

/**
 * Trait Sifency_Image_Style_Controls
 */
trait Sifency_Image_Style_Controls {

	/**
	 * Adds the complete image styling control panel to the current widget instance.
	 *
	 * @param array $args { Optional. Arguments to customize the controls.
	 *     @type string $prefix A unique prefix for control names.
	 * }
	 */
	protected function add_sifency_image_style_controls( $args = [] ) {
		$args = wp_parse_args( $args, [ 'prefix' => 'image_' ] );
		$prefix = $args['prefix'];

		$selectors = [
			'container' => '{{WRAPPER}} .sifency-image-container',
			'image'     => '{{WRAPPER}} .sifency-image img',
			'overlay'   => '{{WRAPPER}} .sifency-image-overlay',
		];

		//============================================
		//==         STYLE SECTION: IMAGE         ==
		//============================================
		$this->start_controls_section( $prefix . 'style_section', [ 'label' => esc_html__( 'Image', 'sifency-addons' ), 'tab' => Controls_Manager::TAB_STYLE ] );
		$this->add_responsive_control( $prefix . 'width', [ 'label' => esc_html__( 'Width', 'sifency-addons' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', '%', 'vw' ], 'range' => [ '%' => [ 'min' => 1, 'max' => 100 ], 'px' => [ 'min' => 1, 'max' => 1200 ], 'vw' => [ 'min' => 1, 'max' => 100 ] ], 'selectors' => [ $selectors['container'] => 'width: {{SIZE}}{{UNIT}};' ] ] );
		$this->add_responsive_control( $prefix . 'height', [ 'label' => esc_html__( 'Height', 'sifency-addons' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', 'vh' ], 'range' => [ 'px' => [ 'min' => 1, 'max' => 1200 ], 'vh' => [ 'min' => 1, 'max' => 100 ] ], 'selectors' => [ $selectors['container'] => 'height: {{SIZE}}{{UNIT}};' ] ] );
		$this->add_control( $prefix . 'object_fit', [ 'label' => esc_html__( 'Object Fit', 'sifency-addons' ), 'type' => Controls_Manager::SELECT, 'options' => [ '' => 'Default', 'fill' => 'Fill', 'cover' => 'Cover', 'contain' => 'Contain' ], 'selectors' => [ $selectors['image'] => 'object-fit: {{VALUE}};' ], 'condition' => [ $prefix . 'height[size]!' => '' ] ] );
		$this->add_control( 'hr_effects_' . $prefix, [ 'type' => Controls_Manager::DIVIDER, 'style' => 'thick' ] );
		$this->start_controls_tabs( $prefix . 'style_tabs' );
		$this->start_controls_tab( $prefix . 'normal_tab', [ 'label' => esc_html__( 'Normal', 'sifency-addons' ) ] );
		
		$this->add_control( $prefix . 'opacity', [ 'label' => 'Opacity', 'type' => Controls_Manager::SLIDER, 'range' => [ 'min' => 0, 'max' => 1, 'step' => 0.01 ], 'selectors' => [ $selectors['container'] => 'opacity: {{SIZE}};' ] ] );
		
        $this->add_group_control( Group_Control_Css_Filter::get_type(), [ 'name' => $prefix . 'css_filters', 'selector' => $selectors['image'] ] );
		$this->add_group_control( Group_Control_Border::get_type(), [ 'name' => $prefix . 'border', 'selector' => $selectors['container'] ] );
		$this->add_responsive_control( $prefix . 'border_radius', [ 'label' => 'Border Radius', 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%' ], 'selectors' => [ $selectors['container'] . ', ' . $selectors['image'] => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ] ] );
		$this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => $prefix . 'box_shadow', 'selector' => $selectors['container'] ] );
		$this->end_controls_tab();
		$this->start_controls_tab( $prefix . 'hover_tab', [ 'label' => esc_html__( 'Hover', 'sifency-addons' ) ] );
		
		$this->add_control( $prefix . 'hover_opacity', [ 'label' => 'Opacity', 'type' => Controls_Manager::SLIDER, 'range' => [ 'min' => 0, 'max' => 1, 'step' => 0.01 ], 'selectors' => [ $selectors['container'] . ':hover ' . $selectors['image'] => 'opacity: {{SIZE}};' ] ] );
		
        $this->add_group_control( Group_Control_Css_Filter::get_type(), [ 'name' => $prefix . 'hover_css_filters', 'selector' => $selectors['container'] . ':hover ' . $selectors['image'] ] );
		$this->add_control( $prefix . 'hover_border_color', [ 'label' => 'Border Color', 'type' => Controls_Manager::COLOR, 'selectors' => [ $selectors['container'] . ':hover' => 'border-color: {{VALUE}};' ] ] );
		$this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => $prefix . 'hover_box_shadow', 'selector' => $selectors['container'] . ':hover' ] );
		$this->add_control( $prefix . 'hover_animation', [ 'label' => esc_html__( 'Hover Animation', 'sifency-addons' ), 'type' => Controls_Manager::HOVER_ANIMATION, ] );
		$this->end_controls_tab();
		$this->end_controls_tabs();

		$this->add_control(
            $prefix . 'transition_duration',
            [
                'label' => esc_html__( 'Transition Duration', 'sifency-addons' ),
                'type' => Controls_Manager::SLIDER,
                'size_units' => [ 's' ],
                'range' => [
                    's' => [
                        'min' => 0,
                        'max' => 5,
                        'step' => 0.1,
                    ],
                ],
                'default' => [
                    'unit' => 's',
                    'size' => 0.3,
                ],
                'separator' => 'before',
                'selectors' => [
                    $selectors['container'] . ', ' . $selectors['image'] . ', ' . $selectors['overlay'] => 'transition: all {{SIZE}}{{UNIT}} ease;',
                ],
            ]
        );
		$this->end_controls_section();

		$this->start_controls_section( $prefix . 'mask_style_section', [ 'label' => esc_html__( 'Image Mask', 'sifency-addons' ), 'tab' => Controls_Manager::TAB_STYLE ] );
		$this->add_control( $prefix . 'mask_switcher', [ 'label' => esc_html__('Enable Mask', 'sifency-addons'), 'type' => Controls_Manager::SWITCHER ] );
		$this->add_control( $prefix . 'mask_shape', [ 'label' => esc_html__('Mask Shape', 'sifency-addons'), 'type' => Controls_Manager::SELECT, 'options' => [ 'circle' => 'Circle', 'blob1' => 'Blob 1', 'hexagon' => 'Hexagon', 'sketch' => 'Sketch' ], 'default' => 'circle', 'selectors' => [ $selectors['container'] => '-webkit-mask-image: var(--sifency-mask-{{VALUE}}); mask-image: var(--sifency-mask-{{VALUE}});' ], 'condition' => [ $prefix . 'mask_switcher' => 'yes' ] ]);
		$this->end_controls_section();

		$this->start_controls_section( $prefix . 'overlay_style_section', [ 'label' => esc_html__( 'Overlay', 'sifency-addons' ), 'tab' => Controls_Manager::TAB_STYLE ] );
		$this->add_control( $prefix . 'overlay_visibility', [ 'label' => esc_html__('Visibility', 'sifency-addons'), 'type' => Controls_Manager::SELECT, 'options' => [ 'none' => 'None', 'always' => 'Always Visible', 'hover' => 'On Hover' ], 'default' => 'none', 'prefix_class' => 'sifency-image-overlay--', ] );
		$this->start_controls_tabs( $prefix . 'overlay_tabs', [ 'condition' => [ $prefix . 'overlay_visibility!' => 'none' ] ] );
		$this->start_controls_tab( $prefix . 'overlay_normal_tab', [ 'label' => 'Normal' ] );
		$this->add_group_control( Group_Control_Background::get_type(), [ 'name' => $prefix . 'overlay_background', 'selector' => $selectors['overlay'] ] );
		$this->end_controls_tab();
		$this->start_controls_tab( $prefix . 'overlay_hover_tab', [ 'label' => 'Hover' ] );
		$this->add_group_control( Group_Control_Background::get_type(), [ 'name' => $prefix . 'overlay_hover_background', 'selector' => $selectors['container'] . ':hover ' . $selectors['overlay'] ] );
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();
	}
}