<?php
namespace CSSIgniter\Ignition\Elementor\Widget;

class Hotspots extends \Elementor\Widget_Base {
	public function get_style_depends() {

		wp_register_style( 'tipso', plugin_dir_url( __DIR__ ) . 'assets/vendor/tipso/tipso.min.css', array(), '1.0.8' );

		wp_register_style( 'ignition-elementor-hotspots', plugin_dir_url( __DIR__ ) . 'assets/css/hotspots.min.css', array( 'tipso' ), IGNITION_ELEMENTOR_WIDGETS_VERSION );

		return [
			'ignition-elementor-hotspots',
		];

	}

	public function get_script_depends() {

		wp_register_script( 'tipso', plugin_dir_url( __DIR__ ) . 'assets/vendor/tipso/tipso.min.js', array( 'jquery' ), '1.0.8', true );

		wp_register_script( 'ignition-elementor-hotspots', plugin_dir_url( __DIR__ ) . 'assets/js/hotspots.min.js', array( 'tipso' ), IGNITION_ELEMENTOR_WIDGETS_VERSION, true );

		return [
			'ignition-elementor-hotspots',
		];

	}

	public function get_name() {
		return 'ignition-hotspots';
	}

	public function get_title() {
		return __( 'Hotspots', 'ignition-elementor-widgets' );
	}

	public function get_icon() {
		return 'eicon-hotspot';
	}

	public function get_categories() {
		return [ 'ignition-elementor-widgets' ];
	}

	protected function register_controls() {
		$this->start_controls_section(
			'section_title',
			[
				'label' => __( 'Hotspots', 'ignition-elementor-widgets' ),
			]
		);

		$this->add_control(
			'image',
			[
				'label'   => __( 'Choose Image', 'ignition-elementor-widgets' ),
				'type'    => \Elementor\Controls_Manager::MEDIA,
				'default' => [
					'url' => \Elementor\Utils::get_placeholder_image_src(),
				],
			]
		);

		$this->add_group_control(
			\Elementor\Group_Control_Image_Size::get_type(),
			[
				'name'    => 'thumb',
				'label'   => __( 'Image Size', 'ignition-elementor-widgets' ),
				'default' => 'full',
				'exclude' => [ 'custom' ],
			]
		);

		$repeater = new \Elementor\Repeater();

		$repeater->add_control(
			'marker_type', [
				'label'   => __( 'Type', 'ignition-elementor-widgets' ),
				'type'    => \Elementor\Controls_Manager::SELECT,
				'default' => 'label',
				'options' => [
					'label' => __( 'Label', 'ignition-elementor-widgets' ),
					'icon'  => __( 'Icon', 'ignition-elementor-widgets' ),
					'empty' => __( 'Empty', 'ignition-elementor-widgets' ),
				],
			]
		);

		$repeater->add_control(
			'marker_label', [
				'label'       => __( 'Label', 'ignition-elementor-widgets' ),
				'type'        => \Elementor\Controls_Manager::TEXT,
				'label_block' => true,
				'placeholder' => __( 'Hotspot Label', 'ignition-elementor-widgets' ),
				'default'     => __( '+', 'ignition-elementor-widgets' ),
				'condition'   => [
					'marker_type' => 'label',
				],
			]
		);

		$repeater->add_control(
			'marker_icon', [
				'label'     => __( 'Icon', 'ignition-elementor-widgets' ),
				'type'      => \Elementor\Controls_Manager::ICONS,
				'default'   => [
					'value'   => 'fas fa-plus',
					'library' => 'solid',
				],
				'condition' => [
					'marker_type' => 'icon',
				],
			]
		);

		$repeater->add_control(
			'marker_position_x', [
				'label'      => __( 'Hotspot position on the X axis', 'ignition-elementor-widgets' ),
				'type'       => \Elementor\Controls_Manager::SLIDER,
				'size_units' => [ '%' ],
				'range'      => [
					'%' => [
						'min'  => 0,
						'max'  => 100,
						'step' => 0.1,
					],
				],
				'default'    => [
					'unit' => '%',
					'size' => 0,
				],
			]
		);

		$repeater->add_control(
			'marker_position_y', [
				'label'      => __( 'Hotspot position on the Y axis', 'ignition-elementor-widgets' ),
				'type'       => \Elementor\Controls_Manager::SLIDER,
				'size_units' => [ '%' ],
				'range'      => [
					'%' => [
						'min'  => 0,
						'max'  => 100,
						'step' => 0.1,
					],
				],
				'default'    => [
					'unit' => '%',
					'size' => 0,
				],
			]
		);

		$repeater->add_control(
			'show_tooltip', [
				'label'        => __( 'Show tooltip', 'ignition-elementor-widgets' ),
				'type'         => \Elementor\Controls_Manager::SWITCHER,
				'label_on'     => __( 'Show', 'ignition-elementor-widgets' ),
				'label_off'    => __( 'Hide', 'ignition-elementor-widgets' ),
				'return_value' => 'yes',
				'default'      => 'no',
			]
		);

		$repeater->add_control(
			'tooltip_title', [
				'label'       => __( 'Tooltip title', 'ignition-elementor-widgets' ),
				'type'        => \Elementor\Controls_Manager::TEXT,
				'label_block' => true,
				'placeholder' => __( 'Tooltip title', 'ignition-elementor-widgets' ),
				'default'     => '',
				'condition'   => [
					'show_tooltip' => 'yes',
				],
			]
		);

		$repeater->add_control(
			'tooltip_text', [
				'label'       => __( 'Tooltip text', 'ignition-elementor-widgets' ),
				'type'        => \Elementor\Controls_Manager::WYSIWYG,
				'default'     => __( 'This is a nice tooltip!', 'ignition-elementor-widgets' ),
				'placeholder' => __( 'Type your tooltip text', 'ignition-elementor-widgets' ),
				'condition'   => [
					'show_tooltip' => 'yes',
				],
			]
		);

		$repeater->add_control(
			'tooltip_position', [
				'label'     => __( 'Tooltip Position', 'ignition-elementor-widgets' ),
				'type'      => \Elementor\Controls_Manager::SELECT,
				'options'   => [
					'top'    => __( 'Top', 'ignition-elementor-widgets' ),
					'bottom' => __( 'Bottom', 'ignition-elementor-widgets' ),
					'left'   => __( 'Left', 'ignition-elementor-widgets' ),
					'right'  => __( 'Right', 'ignition-elementor-widgets' ),
				],
				'default'   => 'top',
				'condition' => [
					'show_tooltip' => 'yes',
				],
			]
		);

		$this->add_control(
			'markers',
			[
				'label'  => __( 'Hotspot', 'ignition-elementor-widgets' ),
				'type'   => \Elementor\Controls_Manager::REPEATER,
				'fields' => $repeater->get_controls(),
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'marker_styles',
			[
				'label' => __( 'Hotspot Styles', 'ignition-elementor-widgets' ),
				'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control(
			'marker_color',
			[
				'label'     => __( 'Color', 'ignition-elementor-widgets' ),
				'type'      => \Elementor\Controls_Manager::COLOR,
				'default'   => '#FFF',
				'selectors' => [
					'{{WRAPPER}} .ignition-hotspot-marker' => 'color: {{VALUE}};',
				],
				'scheme'    => [
					'type'  => \Elementor\Core\Schemes\Color::get_type(),
					'value' => \Elementor\Core\Schemes\Color::COLOR_3,
				],
			]
		);

		$this->add_group_control(
			\Elementor\Group_Control_Typography::get_type(),
			[
				'name'     => 'marker_typography',
				'scheme'   => \Elementor\Core\Schemes\Typography::TYPOGRAPHY_3,
				'selector' => '{{WRAPPER}} .ignition-hotspot-marker',
			]
		);

		$this->add_control(
			'marker_bg_color',
			[
				'label'     => __( 'Background color', 'ignition-elementor-widgets' ),
				'type'      => \Elementor\Controls_Manager::COLOR,
				'default'   => '#000',
				'selectors' => [
					'{{WRAPPER}} .ignition-hotspot-marker' => 'background-color: {{VALUE}};',
				],
				'scheme'    => [
					'type'  => \Elementor\Core\Schemes\Color::get_type(),
					'value' => \Elementor\Core\Schemes\Color::COLOR_3,
				],
			]
		);

		$this->add_control(
			'marker_size',
			[
				'label'      => __( 'Hotspot size', 'ignition-elementor-widgets' ),
				'type'       => \Elementor\Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range'      => [
					'px' => [
						'min' => 10,
						'max' => 250,
					],
				],
				'default'    => [
					'unit' => 'px',
					'size' => 20,
				],
				'selectors'  => [
					'{{WRAPPER}} .ignition-hotspot' => 'height: {{SIZE}}{{UNIT}};width: {{SIZE}}{{UNIT}};font-size: {{SIZE}}{{UNIT}};padding: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'popup_styles',
			[
				'label' => __( 'Tooltip Styles', 'ignition-elementor-widgets' ),
				'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control(
			'popup_width',
			[
				'label'      => __( 'Width', 'ignition-elementor-widgets' ),
				'type'       => \Elementor\Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range'      => [
					'px' => [
						'min' => 30,
						'max' => 720,
					],
				],
				'default'    => [
					'unit' => 'px',
					'size' => 200,
				],
			]
		);

		$this->add_control(
			'popup_bg_color',
			[
				'label'   => __( 'Background color', 'ignition-elementor-widgets' ),
				'type'    => \Elementor\Controls_Manager::COLOR,
				'default' => '#FFF',
				'scheme'  => [
					'type'  => \Elementor\Core\Schemes\Color::get_type(),
					'value' => \Elementor\Core\Schemes\Color::COLOR_3,
				],
			]
		);

		$this->add_control(
			'popup_text_color',
			[
				'label'   => __( 'Text color', 'ignition-elementor-widgets' ),
				'type'    => \Elementor\Controls_Manager::COLOR,
				'default' => '#000',
				'scheme'  => [
					'type'  => \Elementor\Core\Schemes\Color::get_type(),
					'value' => \Elementor\Core\Schemes\Color::COLOR_3,
				],
			]
		);

		$this->end_controls_section();

	}

	protected function render() {
		$settings  = $this->get_settings();
		$image_url = wp_get_attachment_image_src( $settings['image']['id'], $settings['thumb_size'] )[0];
		$markers   = $settings['markers'];

		?>
		<div class="ignition-hotspot-wrap">

		<?php
		foreach ( $markers as $marker ) {
			?>
				<div class="ignition-hotspot ignition-hotspot-<?php echo esc_attr( $marker['_id'] ); ?>"
				style="left:<?php echo intval( $marker['marker_position_x']['size'] ); ?>%;top:<?php echo intval( $marker['marker_position_y']['size'] ); ?>%;"
				data-show-tooltip = "<?php echo esc_attr( $marker['show_tooltip'] ); ?>"
				data-tipso-content='<div class="ignition-tipso-content"><?php echo esc_attr( wp_kses_post( $marker['tooltip_text'] ) ); ?></div>'
				data-tipso-background="<?php echo esc_attr( $settings['popup_bg_color'] ); ?>"
				data-tipso-color="<?php echo esc_attr( $settings['popup_text_color'] ); ?>"
				data-tipso-titleColor="<?php echo esc_attr( $settings['popup_text_color'] ); ?>"
				data-tipso-titleBackground="<?php echo esc_attr( $settings['popup_bg_color'] ); ?>"
				data-tipso-titleContent='<h3 class="ignition-tipso-title"><?php echo esc_html( $marker['tooltip_title'] ); ?></h3>'
				data-tipso-width="<?php echo esc_attr( $settings['popup_width']['size'] ); ?>"
				data-tipso-position="<?php echo wp_kses_post( $marker['tooltip_position'] ); ?>">

					<span
					class="ignition-hotspot-marker ignition-hotspot-marker-<?php echo esc_attr( $marker['_id'] ); ?>"
					>
						<span class="ignition-hotspot-marker-inner">
							<?php
							if ( 'label' === $marker['marker_type'] ) {
								echo esc_html( $marker['marker_label'] );
							} elseif ( 'icon' === $marker['marker_type'] ) {
								\Elementor\Icons_Manager::render_icon( $marker['marker_icon'], [ 'aria-hidden' => 'true' ] );
							}
							?>
						</span>
					</span>
				</div>
			<?php
		}
		?>
			<img src="<?php echo esc_url_raw( $image_url ); ?>" />
		</div>
		<?php
	}

	protected function content_template() {}
}
