<?php
/**
 * Image hotspot map.
 */

namespace XTS\Elementor;

use Elementor\Control_Media;
use Elementor\Group_Control_Image_Size;
use Elementor\Repeater;
use Elementor\Utils;
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Plugin;

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Direct access not allowed.
}

/**
 * Elementor widget that inserts an embeddable content into the page, from any given URL.
 *
 * @since 1.0.0
 */
class Image_Hotspot extends Widget_Base {
	/**
	 * Get widget name.
	 *
	 * @since 1.0.0
	 * @access public
	 *
	 * @return string Widget name.
	 */
	public function get_name() {
		return 'wd_image_hotspot';
	}

	/**
	 * Get widget title.
	 *
	 * @since 1.0.0
	 * @access public
	 *
	 * @return string Widget title.
	 */
	public function get_title() {
		return esc_html__( 'Image Hotspot', 'woodmart' );
	}

	/**
	 * Get widget icon.
	 *
	 * @since 1.0.0
	 * @access public
	 *
	 * @return string Widget icon.
	 */
	public function get_icon() {
		return 'wd-icon-hotspot';
	}

	/**
	 * Get widget categories.
	 *
	 * @since 1.0.0
	 * @access public
	 *
	 * @return array Widget categories.
	 */
	public function get_categories() {
		return array( 'wd-elements' );
	}

	/**
	 * Register the widget controls.
	 *
	 * @since 1.0.0
	 * @access protected
	 */
	protected function register_controls() {
		/**
		 * Content tab.
		 */

		/**
		 * General settings.
		 */
		$this->start_controls_section(
			'general_content_section',
			array(
				'label' => esc_html__( 'General', 'woodmart' ),
			)
		);

		$this->add_control(
			'source_type',
			array(
				'label'   => esc_html__( 'Source', 'woodmart' ),
				'type'    => Controls_Manager::SELECT,
				'options' => array(
					'image' => esc_html__( 'Image', 'woodmart' ),
					'video' => esc_html__( 'Video', 'woodmart' ),
				),
				'default' => 'image',
			)
		);

		$this->add_control(
			'video',
			array(
				'label'      => esc_html__( 'Choose video', 'woodmart' ),
				'type'       => Controls_Manager::MEDIA,
				'media_type' => 'video',
				'condition'  => array(
					'source_type' => 'video',
				),
			)
		);

		$this->add_control(
			'video_poster',
			array(
				'label'     => esc_html__( 'Fallback image', 'woodmart' ),
				'type'      => Controls_Manager::MEDIA,
				'condition' => array(
					'source_type' => 'video',
				),
			)
		);

		$this->add_group_control(
			Group_Control_Image_Size::get_type(),
			array(
				'name'           => 'video_poster',
				'fields_options' => array(
					'size' => array(
						'label' => esc_html__( 'Fallback image size', 'woodmart' ),
					),
				),
				'default'        => 'full',
				'separator'      => 'none',
				'condition'      => array(
					'source_type' => 'video',
				),
			)
		);

		$this->add_control(
			'image',
			array(
				'label'     => esc_html__( 'Choose image', 'woodmart' ),
				'type'      => Controls_Manager::MEDIA,
				'default'   => array(
					'url' => Utils::get_placeholder_image_src(),
				),
				'condition' => array(
					'source_type' => 'image',
				),
			)
		);

		$this->add_group_control(
			Group_Control_Image_Size::get_type(),
			array(
				'name'      => 'image',
				'default'   => 'large',
				'separator' => 'none',
				'condition' => array(
					'source_type' => 'image',
				),
			)
		);

		$this->end_controls_section();

		/**
		 * Items settings.
		 */
		$this->start_controls_section(
			'items_content_section',
			array(
				'label' => esc_html__( 'Items', 'woodmart' ),
			)
		);

		$repeater = new Repeater();

		$repeater->start_controls_tabs( 'hotspot_tabs' );

		$repeater->start_controls_tab(
			'content_tab',
			array(
				'label' => esc_html__( 'Content', 'woodmart' ),
			)
		);

		$repeater->add_control(
			'hotspot_type',
			array(
				'label'   => esc_html__( 'Type', 'woodmart' ),
				'type'    => Controls_Manager::SELECT,
				'options' => array(
					'text'    => esc_html__( 'Text', 'woodmart' ),
					'product' => esc_html__( 'Product', 'woodmart' ),
				),
				'default' => 'product',
			)
		);

		$repeater->add_control(
			'hotspot_dropdown_side',
			array(
				'label'       => esc_html__( 'Dropdown side', 'woodmart' ),
				'description' => esc_html__( 'Show the content on left or right side, top or bottom.', 'woodmart' ),
				'type'        => Controls_Manager::SELECT,
				'options'     => array(
					'left'   => esc_html__( 'Left', 'woodmart' ),
					'right'  => esc_html__( 'Right', 'woodmart' ),
					'top'    => esc_html__( 'Top', 'woodmart' ),
					'bottom' => esc_html__( 'Bottom', 'woodmart' ),
				),
				'default'     => 'left',
			)
		);

		/**
		 * Text settings
		 */
		$repeater->add_control(
			'title',
			array(
				'label'     => esc_html__( 'Title', 'woodmart' ),
				'type'      => Controls_Manager::TEXT,
				'default'   => 'Title, click to edit.',
				'condition' => array(
					'hotspot_type' => array( 'text' ),
				),
			)
		);

		$repeater->add_control(
			'image',
			array(
				'label'     => esc_html__( 'Choose image', 'woodmart' ),
				'type'      => Controls_Manager::MEDIA,
				'condition' => array(
					'hotspot_type' => array( 'text' ),
				),
			)
		);

		$repeater->add_group_control(
			Group_Control_Image_Size::get_type(),
			array(
				'name'      => 'image',
				'default'   => 'large',
				'separator' => 'none',
				'condition' => array(
					'hotspot_type' => array( 'text' ),
				),
			)
		);

		$repeater->add_control(
			'link_text',
			array(
				'label'     => esc_html__( 'Link text', 'woodmart' ),
				'type'      => Controls_Manager::TEXT,
				'default'   => 'Button',
				'condition' => array(
					'hotspot_type' => array( 'text' ),
				),
			)
		);

		$repeater->add_control(
			'link',
			array(
				'label'     => esc_html__( 'Link', 'woodmart' ),
				'type'      => Controls_Manager::URL,
				'default'   => array(
					'url'         => '#',
					'is_external' => false,
					'nofollow'    => false,
				),
				'condition' => array(
					'hotspot_type' => array( 'text' ),
				),
			)
		);

		$repeater->add_control(
			'content',
			array(
				'label'     => esc_html__( 'Content', 'woodmart' ),
				'type'      => Controls_Manager::TEXTAREA,
				'condition' => array(
					'hotspot_type' => array( 'text' ),
				),
			)
		);

		/**
		 * Product settings
		 */
		$repeater->add_control(
			'product_id',
			array(
				'label'       => esc_html__( 'Select product', 'woodmart' ),
				'type'        => 'wd_autocomplete',
				'search'      => 'woodmart_get_posts_by_query',
				'render'      => 'woodmart_get_posts_title_by_id',
				'post_type'   => 'product',
				'multiple'    => false,
				'label_block' => true,
				'condition'   => array(
					'hotspot_type' => array( 'product' ),
				),
			)
		);

		$repeater->end_controls_tab();

		$repeater->start_controls_tab(
			'position_tab',
			array(
				'label' => esc_html__( 'Position', 'woodmart' ),
			)
		);

		$repeater->add_responsive_control(
			'hotspot_position_horizontal',
			array(
				'label'     => esc_html__( 'Horizontal position (%)', 'woodmart' ),
				'type'      => Controls_Manager::SLIDER,
				'default'   => array(
					'size' => 50,
				),
				'range'     => array(
					'px' => array(
						'min'  => 0,
						'max'  => 100,
						'step' => 0.1,
					),
				),
				'selectors' => array(
					'{{WRAPPER}} {{CURRENT_ITEM}}.wd-image-hotspot' => 'left: {{SIZE}}%;',
				),
			)
		);

		$repeater->add_responsive_control(
			'hotspot_position_vertical',
			array(
				'label'     => esc_html__( 'Vertical position (%)', 'woodmart' ),
				'type'      => Controls_Manager::SLIDER,
				'default'   => array(
					'size' => 50,
				),
				'range'     => array(
					'px' => array(
						'min'  => 0,
						'max'  => 100,
						'step' => 0.1,
					),
				),
				'selectors' => array(
					'{{WRAPPER}} {{CURRENT_ITEM}}.wd-image-hotspot' => 'top: {{SIZE}}%;',
				),
			)
		);

		$repeater->end_controls_tab();

		$repeater->end_controls_tabs();

		/**
		 * Repeater settings
		 */
		$this->add_control(
			'items',
			array(
				'type'    => Controls_Manager::REPEATER,
				'fields'  => $repeater->get_controls(),
				'default' => array(
					array(
						'content' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
					),
				),
			)
		);

		$this->end_controls_section();

		/**
		 * Style tab.
		 */

		/**
		 * General settings.
		 */
		$this->start_controls_section(
			'icon_style_section',
			array(
				'label' => esc_html__( 'Icon', 'woodmart' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_control(
			'icon',
			array(
				'label'   => esc_html__( 'Icon style', 'woodmart' ),
				'type'    => Controls_Manager::SELECT,
				'options' => array(
					'default' => esc_html__( 'Default', 'woodmart' ),
					'alt'     => esc_html__( 'Alternative', 'woodmart' ),
				),
				'default' => 'default',
			)
		);

		$this->add_control(
			'icon_position',
			array(
				'label'   => esc_html__( 'Icon position', 'woodmart' ),
				'type'    => Controls_Manager::SELECT,
				'options' => array(
					'static' => esc_html__( 'Static', 'woodmart' ),
					'hover'  => esc_html__( 'On hover', 'woodmart' ),
				),
				'default' => 'static',
			)
		);

		$this->add_control(
			'action',
			array(
				'label'       => esc_html__( 'Hotspot action', 'woodmart' ),
				'description' => esc_html__( 'Open hotspot content on click or hover', 'woodmart' ),
				'type'        => Controls_Manager::SELECT,
				'options'     => array(
					'hover' => esc_html__( 'Hover', 'woodmart' ),
					'click' => esc_html__( 'Click', 'woodmart' ),
				),
				'default'     => 'hover',
			)
		);

		$this->add_control(
			'primary_color',
			array(
				'label'     => esc_html__( 'Primary color', 'woodmart' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .wd-image-hotspot' => '--hotspot-primary: {{VALUE}};',
				),
			)
		);

		$this->add_control(
			'secondary_color',
			array(
				'label'     => esc_html__( 'Secondary color', 'woodmart' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .wd-image-hotspot' => '--hotspot-secondary: {{VALUE}};',
				),
			)
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'content_style_section',
			array(
				'label' => esc_html__( 'Content', 'woodmart' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_control(
			'woodmart_color_scheme',
			array(
				'label'   => esc_html__( 'Color Scheme', 'woodmart' ),
				'type'    => Controls_Manager::SELECT,
				'options' => array(
					''      => esc_html__( 'Inherit', 'woodmart' ),
					'light' => esc_html__( 'Light', 'woodmart' ),
					'dark'  => esc_html__( 'Dark', 'woodmart' ),
				),
				'default' => '',
			)
		);

		$this->end_controls_section();
	}

	/**
	 * Render the widget output on the frontend.
	 *
	 * Written in PHP and used to generate the final HTML.
	 *
	 * @since 1.0.0
	 *
	 * @access protected
	 */
	protected function render() {
		$default_settings = array(
			'source_type'           => 'image',
			'video'                 => array( 'id' => '' ),
			'video_poster'          => array( 'id' => '' ),
			'image'                 => '',
			'action'                => 'hover',
			'icon'                  => 'default',
			'icon_position'         => 'static',
			'woodmart_color_scheme' => 'dark',
			'items'                 => array(),
		);

		$settings      = wp_parse_args( $this->get_settings_for_display(), $default_settings );
		$source_output = '';

		$this->add_render_attribute(
			array(
				'wrapper' => array(
					'class' => array(
						'wd-spots',
						'wd-event-' . $settings['action'],
						'hotspot-icon-' . $settings['icon'],
						'color-scheme-' . $settings['woodmart_color_scheme'],
						'wd-hotspot-' . $settings['icon_position'],
					),
				),
			)
		);

		if ( 'image' === $settings['source_type'] ) {
			$source_output = woodmart_otf_get_image_html( $settings['image']['id'], $settings['image_size'], $settings['image_custom_dimension'], array( 'class' => 'wd-image-hotspot-img' ) );
		} elseif ( 'video' === $settings['source_type'] ) {
			$video_attr = '';

			if ( ! empty( $settings['video_poster']['id'] ) ) {
				$video_attr .= ' poster="' . woodmart_otf_get_image_url( $settings['video_poster']['id'], $settings['video_poster_size'], $settings['video_poster_custom_dimension'] ) . '"';
			}

			$source_output = '<video src="' . wp_get_attachment_url( $settings['video']['id'] ) . '" class="wd-image-hotspot-img" autoplay muted loop playsinline' . $video_attr . '"></video>';
		}

		wp_enqueue_script( 'imagesloaded' );
		woodmart_enqueue_js_script( 'hotspot-element' );
		woodmart_enqueue_js_script( 'product-more-description' );
		woodmart_enqueue_inline_style( 'image-hotspot' );
		woodmart_enqueue_inline_style( 'mod-more-description' );

		?>
		<div <?php echo $this->get_render_attribute_string( 'wrapper' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
			<div class="wd-image-hotspot-hotspots">
				<?php if ( $source_output ) : ?>
					<?php echo $source_output; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
				<?php endif; ?>

				<?php foreach ( $settings['items'] as $index => $item ) : ?>
					<?php
					$default_settings = array(
						'hotspot'               => '',
						'hotspot_type'          => 'product',
						'hotspot_dropdown_side' => 'left',
						'product_id'            => '',
						'title'                 => '',
						'link_text'             => '',
						'link'                  => '',
						'image'                 => '',
					);

					$settings   = wp_parse_args( $item, $default_settings );
					$attributes = '';
					$args       = array();

					if ( 'product' === $settings['hotspot_type'] && $settings['product_id'] && woodmart_woocommerce_installed() ) {
						$product = wc_get_product( apply_filters( 'wpml_object_id', $settings['product_id'], 'product', true ) );

						if ( ! $product ) {
							continue;
						}

						$args = array(
							'class'      => implode(
								' ',
								array_filter(
									array(
										'btn',
										'button',
										'btn-accent',
										'product_type_' . $product->get_type(),
										$product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
										$product->supports( 'ajax_add_to_cart' ) ? 'ajax_add_to_cart' : '',
									)
								)
							),
							'attributes' => wc_implode_html_attributes(
								array(
									'data-product_id' => $product->get_id(),
									'rel'             => 'nofollow',
								)
							),
						);
					}

					if ( 'text' === $settings['hotspot_type'] && ( $settings['title'] || $settings['content'] || $settings['link_text'] || isset( $settings['image']['id'] ) ) ) {
						$attributes   = woodmart_get_link_attrs( $settings['link'] );
						$image_output = '';

						if ( isset( $settings['image']['id'] ) && $settings['image']['id'] ) {
							$image_output = woodmart_otf_get_image_html( $settings['image']['id'], $settings['image_size'], $settings['image_custom_dimension'] );
						}
					}

					?>
					<div class="wd-image-hotspot hotspot-type-<?php echo esc_attr( $settings['hotspot_type'] ); ?> elementor-repeater-item-<?php echo esc_attr( $item['_id'] ); ?>">
						<span class="hotspot-sonar"></span>
						<div class="hotspot-btn wd-role-btn wd-fill" tabindex="0"></div>

						<?php if ( 'product' === $settings['hotspot_type'] && isset( $product ) && $product ) : ?>
							<div class="hotspot-product hotspot-content wd-scroll hotspot-dropdown-<?php echo esc_attr( $settings['hotspot_dropdown_side'] ); ?>">
								<div class="hotspot-content-image">
									<a href="<?php echo esc_url( get_permalink( $product->get_ID() ) ); ?>">
										<?php echo $product->get_image(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
									</a>
								</div>
								
								<h4 class="wd-entities-title">
									<a href="<?php echo esc_url( get_permalink( $product->get_ID() ) ); ?>">
										<?php echo esc_html( $product->get_title() ); ?>
									</a>
								</h4>
								
								<?php if ( wc_review_ratings_enabled() ) : ?>
									<?php echo wc_get_rating_html( $product->get_average_rating(), $product->get_rating_count() ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
								<?php endif; ?>
								
								<div class="price">
									<?php echo $product->get_price_html(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
								</div>
								
								<div class="hotspot-content-text wd-more-desc reset-last-child">
									<div class="wd-more-desc-inner">
										<?php echo do_shortcode( $product->get_short_description() ); ?>
									</div>
									<a href="#" rel="nofollow" class="wd-more-desc-btn"  aria-label="<?php esc_attr_e( 'Read more description button', 'woodmart' ); ?>"></a>
								</div>
								
								<a href="<?php echo esc_url( $product->add_to_cart_url() ); ?>" class="<?php echo esc_attr( $args['class'] ); ?>" <?php echo $args['attributes']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
									<?php echo esc_html( $product->add_to_cart_text() ); ?>
								</a>
							</div>
						<?php else : ?>
							<div class="hotspot-text hotspot-content hotspot-dropdown-<?php echo esc_attr( $settings['hotspot_dropdown_side'] ); ?>">
								<div class="hotspot-content-image">
									<?php echo $image_output; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
								</div>
								
								<h4 class="wd-entities-title">
									<?php echo esc_html( $settings['title'] ); ?>
								</h4>
								
								<div class="hotspot-content-text reset-last-child">
									<?php echo esc_html( $settings['content'] ); ?>
								</div>

								<?php if ( $settings['link_text'] ) : ?>
									<a class="btn btn-accent" <?php echo $attributes; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
										<?php echo esc_html( $settings['link_text'] ); ?>
									</a>
								<?php endif; ?>
							</div>
						<?php endif; ?>
					</div>
				<?php endforeach; ?>
			</div>
		</div>
		<?php
	}
}

Plugin::instance()->widgets_manager->register( new Image_Hotspot() );
