<?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\Group_Control_Border;
use Elementor\Utils;
use Sifency\Traits\Sifency_Addons_Animation_Controls;
use Sifency\Traits\Sifency_Addons_Animation_Manager;
use Sifency\Traits\Sifency_Addons_Image_Style_Controls;
use Sifency\Traits\Sifency_Addons_Slider_Controls;
use Sifency\Traits\Sifency_Addons_Section_Header;
use Sifency\Traits\Sifency_Addons_Help_Controls;
class Sifency_Addons_Widget_Device_Slider 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-slider',
			'title'          => 'Sifency Device Slider',
			'icon'           => 'eicon-device-desktop',
			'category'       => array( 'sifency-creative-widgets' ),
			'style_depends'  => array( 'sifency-device-frame-style' ),
			'script_depends' => array( 'swiper', 'sifency-frontend-script', 'sifency-carousel-handler' ),
		);}
	protected function register_controls() {
		$this->add_sifency_addons_section_header_controls();
		$this->start_controls_section(
			'section_content',
			array(
				'label' => esc_html__( 'Device & Slides', 'sifency-addons' ),
			)
		);
		$this->add_control(
			'device_type',
			array(
				'label'   => esc_html__( 'Device Frame', 'sifency-addons' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'laptop',
				'options' => array(
					'laptop' => esc_html__( 'Laptop (MacBook)', 'sifency-addons' ),
					'tablet' => esc_html__( 'Tablet (iPad)', 'sifency-addons' ),
					'mobile' => esc_html__( 'Mobile (iPhone)', 'sifency-addons' ),
					'custom' => esc_html__( 'Custom Image Frame', 'sifency-addons' ),
				),
			)
		);
		$this->add_control(
			'custom_frame_image',
			array(
				'label'     => esc_html__( 'Upload Frame Image', 'sifency-addons' ),
				'type'      => Controls_Manager::MEDIA,
				'condition' => array( 'device_type' => 'custom' ),
			)
		);
		$this->add_control(
			'orientation',
			array(
				'label'     => esc_html__( 'Orientation', 'sifency-addons' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'landscape',
				'options'   => array(
					'landscape' => esc_html__( 'Landscape', 'sifency-addons' ),
					'portrait'  => esc_html__( 'Portrait', 'sifency-addons' ),
				),
				'condition' => array( 'device_type' => array( 'tablet', 'mobile' ) ),
			)
		);
		$repeater = new Repeater();
		$repeater->add_control(
			'item_source',
			array(
				'label'   => esc_html__( 'Content Source', 'sifency-addons' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'image',
				'options' => array(
					'image'    => esc_html__( 'Image', 'sifency-addons' ),
					'template' => esc_html__( 'Elementor Template', 'sifency-addons' ),
				),
			)
		);
		$repeater->add_control(
			'image',
			array(
				'label'     => esc_html__( 'Screen Image', 'sifency-addons' ),
				'type'      => Controls_Manager::MEDIA,
				'condition' => array( 'item_source' => 'image' ),
			)
		);
		$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( 'item_source' => 'template' ),
			)
		);
		$repeater->add_control(
			'link',
			array(
				'label'     => 'Link',
				'type'      => Controls_Manager::URL,
				'condition' => array( 'item_source' => 'image' ),
			)
		);

		$this->add_control(
			'slides',
			array(
				'label'       => esc_html__( 'Screens', 'sifency-addons' ),
				'type'        => Controls_Manager::REPEATER,
				'fields'      => $repeater->get_controls(),
				'default'     => array(
					array(
						'item_source' => 'image',
						'image'       => array( 'url' => Utils::get_placeholder_image_src() ),
					),
				),
				'title_field' => '{{{ item_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(
				'slides_per_view'        => array( 'default' => 1 ),
				'slides_per_view_tablet' => array( 'default' => 1 ),
				'slides_per_view_mobile' => array( 'default' => 1 ),
			)
		);
		$this->add_sifency_addons_help_controls();

		$this->start_controls_section(
			'style_frame',
			array(
				'label' => 'Global Frame Style',
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'frame_width',
			array(
				'label'      => 'Frame Max Width',
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', '%' ),
				'range'      => array(
					'px' => array(
						'min' => 200,
						'max' => 1400,
					),
				),
				'default'    => array(
					'size' => 800,
					'unit' => 'px',
				),
				'selectors'  => array( '{{WRAPPER}} .sifency-device-frame' => 'max-width: {{SIZE}}{{UNIT}};' ),
			)
		);
		$this->add_responsive_control(
			'device_frame_height',
			array(
				'label'      => esc_html__( 'Frame Height', 'sifency-addons' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', 'vh' ),
				'range'      => array(
					'px' => array(
						'min' => 100,
						'max' => 1200,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .sifency-macbook-top'  => 'height: {{SIZE}}{{UNIT}}; aspect-ratio: auto;',
					'{{WRAPPER}} .sifency-mobile-body'  => 'height: {{SIZE}}{{UNIT}}; aspect-ratio: auto;',
					'{{WRAPPER}} .sifency-custom-frame' => 'height: {{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_control(
			'frame_bg_color',
			array(
				'label'     => 'Main Body Color',
				'type'      => Controls_Manager::COLOR,
				'default'   => '#333333',
				'selectors' => array( '{{WRAPPER}}' => '--sf-device-main-color: {{VALUE}};' ),
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'frame_border',
				'selector' => '{{WRAPPER}} .sifency-macbook-top, {{WRAPPER}} .sifency-mobile-body',
			)
		);
		$this->add_responsive_control(
			'bezel_thickness',
			array(
				'label'     => 'Bezel Size (Internal)',
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min' => 0,
						'max' => 60,
					),
				),
				'default'   => array( 'size' => 12 ),
				'selectors' => array( '{{WRAPPER}}' => '--sf-bezel-size: {{SIZE}}px;' ),
			)
		);
		$this->add_responsive_control(
			'device_border_radius',
			array(
				'label'      => esc_html__( 'Frame Border Radius', 'sifency-addons' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .sifency-macbook-top'    => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					'{{WRAPPER}} .sifency-mobile-body'    => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					'{{WRAPPER}} .sifency-macbook-bottom' => 'border-bottom-left-radius: {{BOTTOM}}{{UNIT}}; border-bottom-right-radius: {{BOTTOM}}{{UNIT}};',
					'{{WRAPPER}} .sifency-custom-frame-img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_control(
			'screen_radius',
			array(
				'label'     => 'Inner Screen Radius',
				'type'      => Controls_Manager::SLIDER,
				'selectors' => array( '{{WRAPPER}} .sifency-device-screen' => 'border-radius: {{SIZE}}px;' ),
			)
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'device_shadow',
				'selector' => '{{WRAPPER}} .sifency-device-frame',
			)
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'style_components',
			array(
				'label' => 'Components Style',
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_control(
			'mac_bottom_color',
			array(
				'label'     => 'MacBook Bottom Color',
				'type'      => Controls_Manager::COLOR,
				'default'   => '#a0a0a0',
				'selectors' => array( '{{WRAPPER}} .sifency-macbook-bottom' => 'background: {{VALUE}};' ),
				'condition' => array( 'device_type' => 'laptop' ),
			)
		);

		$this->add_control(
			'mob_notch_color',
			array(
				'label'     => 'Notch/Speaker Color',
				'type'      => Controls_Manager::COLOR,
				'default'   => '#000000',
				'selectors' => array( '{{WRAPPER}} .sifency-mobile-notch' => 'background: {{VALUE}};' ),
				'condition' => array( 'device_type' => array( 'mobile', 'tablet' ) ),
			)
		);
		$this->end_controls_section();

		$this->add_sifency_addons_image_style_controls(
			array(
				'prefix'       => 'image_',
				'label'        => esc_html__( 'Screen Image Style', 'sifency-addons' ),
				'selector'     => '.sifency-ds-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();

		$this->add_render_attribute( 'wrapper', 'class', 'sifency-device-slider-wrapper' );
		$this->add_render_attribute( 'wrapper', 'class', 'sifency-device-type-' . $settings['device_type'] );
		if ( isset( $settings['orientation'] ) ) {
			$this->add_render_attribute( 'wrapper', 'class', 'sifency-device-orient-' . $settings['orientation'] );
		}

		?>
		<?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="sifency-device-container">

				<div class="sifency-device-frame">
					
					<?php if ( 'laptop' === $settings['device_type'] ) : ?>
						<div class="sifency-macbook-top">
							<div class="sifency-macbook-camera"></div>
							<div class="sifency-device-screen">
								<?php $this->render_slider_engine( $settings ); ?>
							</div>
						</div>
						<div class="sifency-macbook-bottom">
							<div class="sifency-macbook-trackpad"></div>
						</div>

					<?php elseif ( 'mobile' === $settings['device_type'] || 'tablet' === $settings['device_type'] ) : ?>
						<div class="sifency-mobile-body">
							<div class="sifency-mobile-notch"></div>
							<div class="sifency-device-screen">
								<?php $this->render_slider_engine( $settings ); ?>
							</div>
							<div class="sifency-mobile-button"></div>
						</div>

					<?php elseif ( 'custom' === $settings['device_type'] ) : ?>
						<div class="sifency-custom-frame">
							<img src="<?php echo esc_url( $settings['custom_frame_image']['url'] ); ?>" class="sifency-custom-frame-img" alt="Frame">
							<div class="sifency-device-screen sifency-custom-screen">
								<?php $this->render_slider_engine( $settings ); ?>
							</div>
						</div>
					<?php endif; ?>

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

		</div>
		<?php
	}

	/**
	 * The Carousel Engine that handles both images and templates per slide
	 */
	protected function render_slider_engine( $settings ) {
		$slide_count    = count( $settings['slides'] );
		$slider_options = $this->get_sifency_swiper_options( $settings, $slide_count );

		// Force 1 slide per view inside the device screen
		$slider_options['slidesPerView'] = 1;
		$slider_options['breakpoints']   = array();

		$this->add_render_attribute(
			'slider_container',
			array(
				'class'               => array( 'swiper-container', 'sifency-carousel-wrapper' ),
				'data-swiper-options' => wp_json_encode( $slider_options ),
			)
		);

		?>
		<div <?php echo wp_kses_post( $this->get_render_attribute_string( 'slider_container' ) ); ?>>
			<div class="swiper-wrapper">
				<?php foreach ( $settings['slides'] as $index => $item ) : ?>
					<div class="swiper-slide sifency-ds-slide">
						<?php
						if ( 'template' === $item['item_source'] ) :
							if ( ! empty( $item['template_id'] ) ) :
								echo '<div class="sifency-template-inner">';
                                 // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Elementor already escapes content internally.
								echo \Elementor\Plugin::$instance->frontend->get_builder_content_for_display( $item['template_id'] );
								echo '</div>';
							else :
								echo '<div class="elementor-alert elementor-alert-warning">Select a template.</div>';
							endif;
						else :
							$image_html = Group_Control_Image_Size::get_attachment_image_html( $item, 'screen_image', 'image' );
							if ( ! empty( $item['link']['url'] ) ) :
								?>
								<a href="<?php echo esc_url( $item['link']['url'] ); ?>">
									<?php echo esc_html( $image_html ); ?>
								</a>
							<?php else : ?>
								<?php echo wp_kses_post( $image_html ); ?>
								<?php
							endif;
						endif;
						?>
					</div>
				<?php endforeach; ?>
			</div>
		</div>
		<?php
	}
}
