<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit; }
use Sifency\Classes\Sifency_Addons_Widget_Base;
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Repeater;
use Elementor\Group_Control_Image_Size;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Utils;
use Sifency\Traits\Sifency_Addons_Animation_Controls;
use Sifency\Traits\Sifency_Addons_Slider_Controls;
use Sifency\Traits\Sifency_Addons_Animation_Manager;
use Sifency\Traits\Sifency_Addons_Image_Style_Controls;
use Sifency\Traits\Sifency_Addons_Section_Header;
use Sifency\Traits\Sifency_Addons_Help_Controls;

class Sifency_Addons_Widget_Device_Carousel extends Sifency_Addons_Widget_Base {

	use Sifency_Addons_Animation_Controls;
	use Sifency_Addons_Slider_Controls;
	use Sifency_Addons_Image_Style_Controls;
	use Sifency_Addons_Section_Header;
	use Sifency_Addons_Help_Controls;

	public function __construct( $data = array(), $args = null ) {
		parent::__construct( $data, $args );
		$this->wg_config = array(
			'name'           => 'sifency-device-carousel',
			'title'          => 'Sifency Device Carousel',
			'icon'           => 'eicon-device-desktop',
			'category'       => array( 'sifency-creative-widgets' ),
			'script_depends' => array( 'sifency-device-frame-carousel-script', 'swiper' ),
			'style_depends'  => array( 'sifency-device-frame-style' ),
		);}

	protected function register_controls() {
		$this->add_sifency_addons_section_header_controls();
		$this->start_controls_section(
			'section_slides',
			array( 'label' => esc_html__( 'Device Slides', 'sifency-addons' ) )
		);
		$repeater = new Repeater();
		$repeater->add_control(
			'item_heading_content',
			array(
				'label' => esc_html__( 'Content Settings', 'sifency-addons' ),
				'type'  => Controls_Manager::HEADING,
			)
		);

		$repeater->add_control(
			'device_type',
			array(
				'label'   => esc_html__( 'Device Type', 'sifency-addons' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'laptop',
				'options' => array(
					'laptop' => esc_html__( 'Laptop', 'sifency-addons' ),
					'mobile' => esc_html__( 'Mobile', 'sifency-addons' ),
					'tablet' => esc_html__( 'Tablet', 'sifency-addons' ),
				),
			)
		);
		$repeater->add_control(
			'content_source',
			array(
				'label'   => esc_html__( 'Content Source', 'sifency-addons' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'gallery',
				'options' => array(
					'gallery'  => esc_html__( 'Gallery (Slider)', 'sifency-addons' ),
					'template' => esc_html__( 'Elementor Template', 'sifency-addons' ),
				),
			)
		);
		$repeater->add_control(
			'screen_gallery',
			array(
				'label'     => esc_html__( 'Screen Images', 'sifency-addons' ),
				'type'      => Controls_Manager::GALLERY,
				'condition' => array( 'content_source' => 'gallery' ),
			)
		);
		$repeater->add_control(
			'template_id',
			array(
				'label'     => esc_html__( 'Select Template', 'sifency-addons' ),
				'type'      => Controls_Manager::SELECT,
				'options'   => function_exists( 'sifency_addons_get_elementor_templates' ) ? sifency_addons_get_elementor_templates() : array(),
				'condition' => array( 'content_source' => 'template' ),
			)
		);
		$repeater->add_control(
			'orientation',
			array(
				'label'     => esc_html__( 'Orientation', 'sifency-addons' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'portrait',
				'options'   => array(
					'portrait'  => esc_html__( 'Portrait', 'sifency-addons' ),
					'landscape' => esc_html__( 'Landscape', 'sifency-addons' ),
				),
				'condition' => array( 'device_type' => array( 'mobile', 'tablet' ) ),
			)
		);
		$repeater->add_control(
			'item_heading_style',
			array(
				'label'     => esc_html__( 'Item Styling', 'sifency-addons' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
			)
		);

		$repeater->add_responsive_control(
			'item_width',
			array(
				'label'      => esc_html__( 'Device Width', 'sifency-addons' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', '%', 'vw' ),
				'range'      => array(
					'px' => array(
						'min' => 100,
						'max' => 1200,
					),
				),
				'selectors'  => array( '{{WRAPPER}} {{CURRENT_ITEM}} .sifency-device-frame' => 'max-width: {{SIZE}}{{UNIT}};' ),
			)
		);
		$repeater->add_control(
			'item_body_color',
			array(
				'label'     => esc_html__( 'Body Color', 'sifency-addons' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( '{{WRAPPER}} {{CURRENT_ITEM}}' => '--sf-device-body-color: {{VALUE}};' ),
			)
		);

		$repeater->add_responsive_control(
			'item_bezel_size',
			array(
				'label'     => esc_html__( 'Bezel Size', 'sifency-addons' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min' => 0,
						'max' => 50,
					),
				),
				'selectors' => array( '{{WRAPPER}} {{CURRENT_ITEM}}' => '--sf-bezel-size: {{SIZE}}px;' ),
			)
		);

		$repeater->add_responsive_control(
			'item_frame_radius',
			array(
				'label'      => esc_html__( 'Frame Radius', 'sifency-addons' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} {{CURRENT_ITEM}} .sifency-macbook-top, {{WRAPPER}} {{CURRENT_ITEM}} .sifency-mobile-body' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					'{{WRAPPER}} {{CURRENT_ITEM}} .sifency-macbook-bottom' => 'border-bottom-left-radius: {{BOTTOM}}{{UNIT}}; border-bottom-right-radius: {{BOTTOM}}{{UNIT}};',
				),
			)
		);
		$repeater->add_control(
			'item_screen_radius',
			array(
				'label'     => esc_html__( 'Screen Corner Radius', 'sifency-addons' ),
				'type'      => Controls_Manager::SLIDER,
				'selectors' => array( '{{WRAPPER}} {{CURRENT_ITEM}} .sifency-device-screen' => 'border-radius: {{SIZE}}px;' ),
			)
		);
		$repeater->add_control(
			'item_bottom_color',
			array(
				'label'     => esc_html__( 'MacBook Bottom Color', 'sifency-addons' ),
				'type'      => Controls_Manager::COLOR,
				'condition' => array( 'device_type' => 'laptop' ),
				'selectors' => array( '{{WRAPPER}} {{CURRENT_ITEM}} .sifency-macbook-bottom' => 'background: {{VALUE}};' ),
			)
		);
		$repeater->add_responsive_control(
			'item_device_height',
			array(
				'label'      => esc_html__( 'Device Frame Height', 'sifency-addons' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', 'vh', 'em' ),
				'range'      => array(
					'px' => array(
						'min' => 100,
						'max' => 1000,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} {{CURRENT_ITEM}} .sifency-macbook-top' => 'height: {{SIZE}}{{UNIT}}; aspect-ratio: auto;',
					'{{WRAPPER}} {{CURRENT_ITEM}} .sifency-mobile-body' => 'height: {{SIZE}}{{UNIT}}; aspect-ratio: auto;',
				),
			)
		);

		$repeater->add_responsive_control(
			'item_image_height',
			array(
				'label'      => esc_html__( 'Inner Image Height', 'sifency-addons' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', '%', 'vh' ),
				'range'      => array(
					'px' => array(
						'min' => 50,
						'max' => 1000,
					),
					'%'  => array(
						'min' => 10,
						'max' => 100,
					),
				),
				'condition'  => array( 'content_source' => 'gallery' ),
				'selectors'  => array(
					'{{WRAPPER}} {{CURRENT_ITEM}} .sifency-device-screen .sifency-nested-slide img' => 'height: {{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_control(
			'slides',
			array(
				'label'       => esc_html__( 'Slides', 'sifency-addons' ),
				'type'        => Controls_Manager::REPEATER,
				'fields'      => $repeater->get_controls(),
				'default'     => array( array( 'device_type' => 'laptop' ) ),
				'title_field' => '{{{ device_type }}} - {{{ content_source }}}',
			)
		);

		$this->add_group_control(
			Group_Control_Image_Size::get_type(),
			array(
				'name'    => 'screen_image',
				'default' => 'large',
			)
		);

		$this->end_controls_section();

		$this->add_sifency_addons_slider_controls(
			array(
				'label'           => esc_html__( 'Main Carousel Settings', 'sifency-addons' ),
				'slides_per_view' => array( 'default' => 1 ),
			)
		);
		$this->start_controls_section( 'section_nested_slider', array( 'label' => 'Inner Slider Settings' ) );
		$this->add_control(
			'screen_autoplay',
			array(
				'label'   => 'Autoplay',
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'yes',
			)
		);
		$this->add_control(
			'screen_speed',
			array(
				'label'   => 'Transition Speed (ms)',
				'type'    => Controls_Manager::NUMBER,
				'default' => 800,
			)
		);
		$this->add_control(
			'screen_effect',
			array(
				'label'   => 'Effect',
				'type'    => Controls_Manager::SELECT,
				'default' => 'fade',
				'options' => array(
					'slide' => 'Slide',
					'fade'  => 'Fade',
				),
			)
		);
		$this->end_controls_section();
		$this->add_sifency_addons_help_controls();
		$this->add_sifency_addons_image_style_controls(
			array(
				'prefix'       => 'image_',
				'label'        => esc_html__( 'Inner Image Style', 'sifency-addons' ),
				'selector'     => '.sifency-nested-slide img',
				'show_overlay' => false,
			)
		);
		$this->add_Sifency_Addons_Animation_Controls();
	}

	protected function render_dom( array $context ) {
		$wrapper_id = esc_attr( $context['dom_id'] );
		$settings   = $this->get_settings_for_display();

		$main_options                             = $this->get_sifency_swiper_options( $settings, count( $settings['slides'] ) );
		$main_options['touchStartPreventDefault'] = false;

		$nested_options = array(
			'loop'           => true,
			'effect'         => $settings['screen_effect'],
			'speed'          => (int) $settings['screen_speed'],
			'autoplay'       => ( 'yes' === $settings['screen_autoplay'] ) ? array(
				'delay'                => 3000,
				'disableOnInteraction' => false,
			) : false,
			'allowTouchMove' => false,
			'observer'       => true,
			'observeParents' => true,
		);

		$nested_json = wp_json_encode( $nested_options );
		$main_json   = wp_json_encode( $main_options );

		$this->add_render_attribute( 'wrapper', 'class', 'sifency-device-carousel-wrapper' );
		?>
		<?php $this->render_sifency_section_header_elements( $settings ); ?>
		<div id="<?php echo esc_attr( $wrapper_id ); ?>" <?php echo wp_kses_post( $this->get_render_attribute_string( 'wrapper' ) ); ?>>
			
			<div class="swiper-container sifency-main-carousel" data-swiper-options='<?php echo esc_attr( $main_json ); ?>'>
				<div class="swiper-wrapper sifency-frame-carousel-wrapper">
					<?php
					foreach ( $settings['slides'] as $index => $slide ) :
						$key         = 'slide_' . $index;
						$repeater_id = 'elementor-repeater-item-' . $slide['_id'];
						$orient      = isset( $slide['orientation'] ) ? $slide['orientation'] : 'portrait';
						$device_type = $slide['device_type'];

						$this->add_render_attribute( $key, 'class', array( 'swiper-slide', 'sifency-dc-slide', $repeater_id ) );
						$this->add_render_attribute( $key, 'class', 'sifency-device-type-' . $device_type );
						$this->add_render_attribute( $key, 'class', 'sifency-device-orient-' . $orient );
						?>
						<div <?php echo wp_kses_post( $this->get_render_attribute_string( $key ) ); ?>>
							<div class="sifency-device-frame">
								<?php if ( 'laptop' === $device_type ) : ?>
									<div class="sifency-macbook-top">
										<div class="sifency-macbook-camera"></div>
										<div class="sifency-device-screen">
											<?php $this->render_nested_content( $slide, $settings, $nested_json ); ?>
										</div>
									</div>
									<div class="sifency-macbook-bottom"><div class="sifency-macbook-trackpad"></div></div>

								<?php elseif ( 'mobile' === $device_type || 'tablet' === $device_type ) : ?>
									<div class="sifency-mobile-body">
										<div class="sifency-mobile-notch"></div>
										<div class="sifency-device-screen">
											<?php $this->render_nested_content( $slide, $settings, $nested_json ); ?>
										</div>
										<div class="sifency-mobile-button"></div>
									</div>
								<?php endif; ?>
							</div>
						</div>
					<?php endforeach; ?>
				</div>

				<?php $this->render_sifency_addons_slider_nav( $settings ); ?>
				<?php $this->render_sifency_addons_slider_pagination( $settings ); ?>
			</div>
		</div>
		<?php
	}

	protected function render_nested_content( $slide, $settings, $nested_json ) {
		if ( 'template' === $slide['content_source'] ) {
			if ( ! empty( $slide['template_id'] ) ) {
				echo '<div class="sifency-template-screen-content">';
                 // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Elementor already escapes content internally.
				echo \Elementor\Plugin::$instance->frontend->get_builder_content_for_display( $slide['template_id'] );
				echo '</div>';
			}
		} else {
			$this->render_nested_slider( $slide['screen_gallery'], $settings, $nested_json );
		}
	}

	protected function render_nested_slider( $gallery, $settings, $options_json ) {
		if ( empty( $gallery ) ) {
			return;
		}
		?>
		<div class="swiper-container sifency-nested-carousel" data-swiper-options='<?php echo esc_attr( $options_json ); ?>'>
			<div class="swiper-wrapper">
				<?php
				foreach ( $gallery as $image ) :
					$img_src = Group_Control_Image_Size::get_attachment_image_src( $image['id'], 'screen_image', $settings );
					if ( ! $img_src ) {
						$img_src = $image['url'];
					}
					?>
					<div class="swiper-slide sifency-nested-slide">
						<img src="<?php echo esc_url( $img_src ); ?>" alt="Screen">
					</div>
				<?php endforeach; ?>
			</div>
		</div>
		<?php
	}
}
