<?php
namespace Elementor;

class ThemeDraft_Image_Widget extends Widget_Base {

	public function get_name() {

		return 'themedraft_image';
	}

	public function get_title() {
		return esc_html__( 'Induxter Image', 'themedraft-core' );
	}

	public function get_icon() {

		return 'eicon-image';
	}

	public function get_categories() {
		return [ 'themedraft_elements' ];
	}


	protected function register_controls() {

		//Content tab start
		$this->start_controls_section(
			'image_settings',
			[
				'label' => esc_html__( 'Image', 'themedraft-core' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control(
			'selected_image',
			[
				'label'       => __( 'Image', 'themedraft-core' ),
				'type'        => Controls_Manager::MEDIA,
				'label_block' => true,
				'default'     => [
					'url' => Utils::get_placeholder_image_src(),
				],
			]
		);

		$this->add_control(
			'entrance_animation',
			[
				'label' => __( 'Entrance Animation', 'themedraft-core' ),
				'type' => Controls_Manager::ANIMATION,
				'prefix_class' => 'animated ',
			]
		);

		$this->add_control(
			'image_animation_duration',
			[
				'label'     => __( 'Animation Duration', 'themedraft-core' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'data-wow-duration="1.25s"',
				'options'   => [
					'data-wow-duration="2s"'    => __( 'Slow', 'themedraft-core' ),
					'data-wow-duration="1.25s"' => __( 'Normal', 'themedraft-core' ),
					'data-wow-duration=".75s"'  => __( 'Fast', 'themedraft-core' ),
				],
				'condition' => [
					'entrance_animation!' => '',
				]
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'image_style_option',
			[
				'label' => esc_html__( 'Image Style Option', 'themedraft-core' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_responsive_control(
			'image_wrapper_width',
			[
				'label' => __( 'Wrapper Width ( % )', 'themedraft-core' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['%'],
				'range' => [
					'%' => [
						'min' => 0,
						'max' => 200,
					],
				],
				'devices' => [ 'desktop', 'tablet', 'mobile' ],
				'desktop_default' => [
					'size' => 100,
					'unit' => '%',
				],
				'tablet_default' => [
					'size' => 100,
					'unit' => '%',
				],
				'mobile_default' => [
					'size' => 100,
					'unit' => '%',
				],
				'selectors' => [
					'{{WRAPPER}} .td-image-container' => 'width: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'wrapper_margin',
			[
				'label'      => esc_html__( 'Wrapper Margin', 'themedraft-core' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em' ],
				'selectors'  => [
					'{{WRAPPER}} .td-image-container' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'image_align',
			[
				'label'       => esc_html__('Image Align', 'themedraft-core'),
				'type'        => Controls_Manager::CHOOSE,
				'label_block' => false,

				'options' => [
					'left' => [
						'title' => __('Left', 'themedraft-core'),
						'icon'  => 'eicon-h-align-left',
					],

					'center' => [
						'title' => __('Center', 'themedraft-core'),
						'icon'  => 'eicon-h-align-center',
					],

					'right' => [
						'title' => __('Right', 'themedraft-core'),
						'icon'  => 'eicon-h-align-right',
					],
				],

				'default' => 'left',
				'devices' => ['desktop', 'tablet', 'mobile'],

				'selectors' => [
					'{{WRAPPER}} .td-image-container' => 'text-align: {{VALUE}};',
				],

			]
		);

		$this->end_controls_section();


	}

	//Render
	protected function render() {
		$settings = $this->get_settings_for_display();

		if($settings['entrance_animation']){
			$td_animation = 'wow'.' ' . $settings['entrance_animation'];
			$td_animation_duration = $settings['image_animation_duration'];
		}else{
			$td_animation ='';
			$td_animation_duration ='';
		}
		?>

		<div class="td-image-widget-wrapper <?php echo $td_animation;?>" <?php echo $td_animation_duration;?>>
			<div class="td-image-container">
				<img src="<?php echo esc_url( $settings['selected_image']['url'] ); ?>" alt="<?php echo get_post_meta( $settings['selected_image']['id'], '_wp_attachment_image_alt', true ); ?>">
			</div>
		</div>

		<?php

	}
}

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