<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

use \Elementor\Controls_Manager;
use \Elementor\Group_Control_Border;
use \Elementor\Group_Control_Box_Shadow;
use \Elementor\Group_Control_Typography;
use \Elementor\Group_Control_Background;
use Elementor\Group_Control_Css_Filter;
use Elementor\Group_Control_Image_Size;
use Elementor\Utils;

class TFImageBox_Widget extends \Elementor\Widget_Base {
	public function get_name() {
		return 'tf-image-box';
	}

	public function get_title() {
		return esc_html__( 'TF Image Box', 'themesflat-elementor' );
	}

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

	public function get_style_depends()
	{
		return ['tf-image-box'];
	}


	protected function register_controls() {
		$this->register_content_section_controls();
		$this->register_style_section_controls();
	}

	protected function register_content_section_controls() {
		$this->start_controls_section(
			'section_content',
			[
				'label' => esc_html__( 'Image Box', 'themesflat-elementor' )
			]
		);

		$this->add_control(
			'image',
			[
				'label'   => esc_html__( 'Choose Image', 'themesflat-elementor' ),
				'type'    => Controls_Manager::MEDIA,
				'dynamic' => [
					'active' => true,
				],
				'default' => [
					'url' => \Elementor\Utils::get_placeholder_image_src(),
				],
			]
		);

		$this->add_control(
			'image_switcher',
			[
				'label'        => esc_html__( 'Use Hover Image', 'themesflat-elementor' ),
				'type'         => Controls_Manager::SWITCHER,
				'label_on'     => esc_html__( 'Show', 'themesflat-elementor' ),
				'label_off'    => esc_html__( 'Hide', 'themesflat-elementor' ),
				'return_value' => 'yes',
				'default'      => '',
			]
		);

		$this->add_control(
			'image_hover',
			[
				'label'     => esc_html__( 'Choose Image', 'themesflat-elementor' ),
				'type'      => Controls_Manager::MEDIA,
				'dynamic'   => [
					'active' => true,
				],
				'default'   => [
					'url' => \Elementor\Utils::get_placeholder_image_src(),
				],
				'condition' => [
					'image_switcher' => 'yes',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Image_Size::get_type(),
			[
				'name'      => 'thumbnail',
				// Usage: `{name}_size` and `{name}_custom_dimension`, in this case `thumbnail_size` and `thumbnail_custom_dimension`.
				'default'   => 'full',
				'separator' => 'none',
			]
		);


		$this->add_control(
			'image_box_title',
			[
				'label'       => esc_html__( 'Title & Description', 'themesflat-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'dynamic'     => [
					'active' => true,
				],
				'default'     => esc_html__( 'This is the heading', 'themesflat-elementor' ),
				'placeholder' => esc_html__( 'Enter your title', 'themesflat-elementor' ),
				'label_block' => true,
			]
		);


		$this->add_control(
			'image_box_description',
			[
				'label'       => '',
				'type'        => Controls_Manager::TEXTAREA,
				'dynamic'     => [
					'active' => true,
				],
				'default'     => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'themesflat-elementor' ),
				'placeholder' => esc_html__( 'Enter your description', 'themesflat-elementor' ),
				'rows'        => 10,
				'separator'   => 'none',
				'show_label'  => false,
			]
		);


		$this->add_control(
			'image_box_link',
			[
				'label'       => esc_html__( 'Link', 'themesflat-elementor' ),
				'type'        => Controls_Manager::URL,
				'dynamic'     => [
					'active' => true,
				],
				'placeholder' => esc_html__( 'https://your-link.com', 'themesflat-elementor' ),
				'separator'   => 'before',
			]
		);

		$this->add_responsive_control(
			'position',
			[
				'label'        => esc_html__( 'Image Position', 'themesflat-elementor' ),
				'type'         => Controls_Manager::CHOOSE,
				'default'      => 'top',
				'options'      => [
					'left'  => [
						'title' => esc_html__( 'Left', 'themesflat-elementor' ),
						'icon'  => 'eicon-h-align-left',
					],
					'top'   => [
						'title' => esc_html__( 'Top', 'themesflat-elementor' ),
						'icon'  => 'eicon-v-align-top',
					],
					'right' => [
						'title' => esc_html__( 'Right', 'themesflat-elementor' ),
						'icon'  => 'eicon-h-align-right',
					],
				],
				'prefix_class' => 'tf%s-position-',
				'toggle'       => false,
			]
		);

		$this->add_control(
			'description_position',
			[
				'label'   => esc_html__( 'Description Position', 'themesflat-elementor' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'inset',
				'options' => [
					'outset' => esc_html__( 'Outset', 'themesflat-elementor' ),
					'inset'  => esc_html__( 'Inset', 'themesflat-elementor' ),

				],
			]
		);

		$this->add_control(
			'image_box_title_tag',
			[
				'label'   => esc_html__( 'Title HTML Tag', 'themesflat-elementor' ),
				'type'    => Controls_Manager::SELECT,
				'options' => [
					'h1'   => 'H1',
					'h2'   => 'H2',
					'h3'   => 'H3',
					'h4'   => 'H4',
					'h5'   => 'H5',
					'h6'   => 'H6',
					'div'  => 'div',
					'span' => 'span',
					'p'    => 'p',
				],
				'default' => 'h3',
			]
		);


		$this->end_controls_section();
	}

	protected function register_style_section_controls() {
		$this->register_image_style_section_controls();
		$this->register_content_style_section_controls();
	}

	protected function register_image_style_section_controls() {
		$this->start_controls_section( 'section_style_image', [
			'label' => esc_html__( 'Image', 'themesflat-elementor' ),
			'tab'   => Controls_Manager::TAB_STYLE,
		] );

		$this->add_responsive_control(
			'image_space',
			[
				'label'     => esc_html__( 'Spacing', 'themesflat-elementor' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [
					'px' => [
						'min' => 0,
						'max' => 100,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .tf-image-box-wrapper' => '--tf-image-box-spacing: {{SIZE}}{{UNIT}};'
				],
				//'separator'        => 'before',
			]
		);

		$this->add_responsive_control(
			'image_width',
			[
				'label'      => esc_html__( 'Width', 'themesflat-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', '%' ],
				'range'      => [
					'px' => [
						'min'  => 0,
						'max'  => 1000,
						'step' => 1,
					],
					'%'  => [
						'min' => 0,
						'max' => 100,
					],
				],
				'selectors'  => [
					'{{WRAPPER}} .tf-image' => 'width: {{SIZE}}{{UNIT}};',
				],
			]
		);


		$this->add_responsive_control(
			'image_border_radius',
			[
				'label'      => esc_html__( 'Border Radius', 'themesflat-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .card-img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);


		$this->start_controls_tabs( 'image_effects' );

		$this->start_controls_tab( 'normal',
			[
				'label' => esc_html__( 'Normal', 'themesflat-elementor' ),
			]
		);

		$this->add_group_control(
			Group_Control_Css_Filter::get_type(),
			[
				'name'     => 'css_filters',
				'selector' => '{{WRAPPER}} .tf-image img',
			]
		);

		$this->add_control(
			'image_opacity',
			[
				'label'     => esc_html__( 'Opacity', 'themesflat-elementor' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [
					'px' => [
						'max'  => 1,
						'min'  => 0.10,
						'step' => 0.01,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .tf-image img' => 'opacity: {{SIZE}};',
				],
			]
		);

		$this->add_control(
			'background_hover_transition_opacity',
			[
				'label'     => esc_html__( 'Transition Duration', 'themesflat-elementor' ),
				'type'      => Controls_Manager::SLIDER,
				'default'   => [
					'size' => 0.3,
				],
				'range'     => [
					'px' => [
						'max'  => 3,
						'step' => 0.1,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .tf-image img' => 'transition-duration: {{SIZE}}s',
				],
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab( 'hover',
			[
				'label' => esc_html__( 'Hover', 'themesflat-elementor' ),
			]
		);

		$this->add_group_control(
			Group_Control_Css_Filter::get_type(),
			[
				'name'     => 'css_filters_hover',
				'selector' => '{{WRAPPER}}:hover .tf-image img',
			]
		);

		$this->add_control(
			'image_opacity_hover',
			[
				'label'     => esc_html__( 'Opacity', 'themesflat-elementor' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [
					'px' => [
						'max'  => 1,
						'min'  => 0.10,
						'step' => 0.01,
					],
				],
				'selectors' => [
					'{{WRAPPER}}:hover .tf-image img' => 'opacity: {{SIZE}};',
				],
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->end_controls_section();
	}

	protected function register_content_style_section_controls() {
		$this->start_controls_section( 'content_style_section', [
			'label' => esc_html__( 'Content', 'themesflat-elementor' ),
			'tab'   => Controls_Manager::TAB_STYLE
		] );

		$this->add_responsive_control(
			'text_align',
			[
				'label'     => __( 'Alignment', 'themesflat-elementor' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => [
					'left'    => [
						'title' => esc_html__( 'Left', 'themesflat-elementor' ),
						'icon'  => 'eicon-text-align-left',
					],
					'center'  => [
						'title' => esc_html__( 'Center', 'themesflat-elementor' ),
						'icon'  => 'eicon-text-align-center',
					],
					'right'   => [
						'title' => esc_html__( 'Right', 'themesflat-elementor' ),
						'icon'  => 'eicon-text-align-right',
					],
					'justify' => [
						'title' => esc_html__( 'Justified', 'themesflat-elementor' ),
						'icon'  => 'eicon-text-align-justify',
					],
				],
				'selectors' => [
					'{{WRAPPER}} .tf-image-box-wrapper' => 'text-align: {{VALUE}};',
				],
			]
		);

		$this->add_responsive_control(
			'content_vertical_alignment',
			[
				'label'                => esc_html__( 'Vertical Alignment', 'themesflat-elementor' ),
				'type'                 => Controls_Manager::SELECT,
				'options'              => [
					'top'    => esc_html__( 'Top', 'themesflat-elementor' ),
					'middle' => esc_html__( 'Middle', 'themesflat-elementor' ),
					'bottom' => esc_html__( 'Bottom', 'themesflat-elementor' ),
				],
				'default'              => 'top',
				'selectors_dictionary' => [
					'top'    => 'flex-start',
					'middle' => 'center',
					'bottom' => 'flex-end',
				],
				'selectors'            => [
					'{{WRAPPER}} .tf-image-box' => 'align-items: {{VALUE}};',
				],
			]
		);
		$this->add_responsive_control(
			'content_padding',
			[
				'label'      => esc_html__( 'Padding', 'themesflat-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .tf-image-box .tf-image-box-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_control(
			'heading_title',
			[
				'label'     => esc_html__( 'Title', 'themesflat-elementor' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
			]
		);


		$this->add_control(
			'title_color',
			[
				'label'     => esc_html__( 'Color', 'themesflat-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .tf-image-box-title' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'title_color_hover',
			[
				'label'     => esc_html__( 'Color Hover', 'themesflat-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .tf-image-box-title:hover' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'title_typography',
				'selector' => '{{WRAPPER}} .tf-image-box-title',
			]
		);

		$this->add_control( 'title_class', [
			'label'   => esc_html__( 'Custom Class', 'themesflat-elementor' ),
			'type'    => Controls_Manager::TEXT,
			'default' => ''
		] );

		$this->add_control(
			'heading_description',
			[
				'label'     => esc_html__( 'Description', 'themesflat-elementor' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
			]
		);

		$this->add_responsive_control(
			'description_space',
			[
				'label'     => esc_html__( 'Spacing', 'themesflat-elementor' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [
					'px' => [
						'min' => 0,
						'max' => 100,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .tf-image-box-desc' => 'margin-top: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_control(
			'description_color',
			[
				'label'     => esc_html__( 'Color', 'themesflat-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .tf-image-box-desc' => 'color: {{VALUE}};',
				],
			]
		);


		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'description_typography',
				'selector' => '{{WRAPPER}} .tf-image-box-desc',
			]
		);

		$this->add_control( 'description_class', [
			'label'   => esc_html__( 'Custom Class', 'themesflat-elementor' ),
			'type'    => Controls_Manager::TEXT,
			'default' => ''
		] );

		$this->end_controls_section();
	}

	public function render() {
		$settings          = $this->get_settings_for_display();
		$image_box_link    = isset( $settings['image_box_link'] ) ? $settings['image_box_link'] : array();
		$image_switcher    = isset( $settings['image_switcher'] ) ? $settings['image_switcher'] : '';
		$title             = isset( $settings['image_box_title'] ) ? $settings['image_box_title'] : '';
		$title_tag         = isset( $settings['image_box_title_tag'] ) ? $settings['image_box_title_tag'] : 'h3';
		$title_class       = isset( $settings['title_class'] ) ? $settings['title_class'] : '';
		$description       = isset( $settings['image_box_description'] ) ? $settings['image_box_description'] : '';
		$description_class = isset( $settings['description_class'] ) ? $settings['description_class'] : '';
		$description_pos   = isset( $settings['description_position'] ) ? $settings['description_position'] : 'inset';
		$image_html        = '';
		if ( isset( $settings['image'] ) ) {
			$image_html = Group_Control_Image_Size::get_attachment_image_html( $settings, 'thumbnail', 'image' );
		}
		$image_hover = '';
		if ( isset( $settings['image_hover'] ) ) {
			$image_hover = Group_Control_Image_Size::get_attachment_image_html( $settings, 'thumbnail', 'image_hover' );
		}
		$hover_animation       = isset( $settings['hover_animation'] ) ? $settings['hover_animation'] : '';
		$hover_image_animation = isset( $settings['hover_image_animation'] ) ? $settings['hover_image_animation'] : '';

        if (!isset($item_key)) {
        $item_key = '';
        }

        $wrapper_classes = array(
        'tf-image-box',
        );

        if ( ! empty( $hover_animation) ) {
        $wrapper_classes[] = 'tf-image-hover-' . $hover_animation;
        }
        if ( ! empty( $hover_image_animation ) ) {
        $wrapper_classes[] = 'tf-image-hover-' . $hover_image_animation;
        }
        if ( ! empty( $image_switcher ) ) {
        $wrapper_classes[] = 'tf-hover-image';
        }

        $image_tag       = 'span';

		$this->add_render_attribute("wrapper{$item_key}",'class', $wrapper_classes);

        if ( ! empty( $image_box_link['url'] ) ) {
	        $this->add_link_attributes( "image_link{$item_key}", $image_box_link);
	        $this->add_link_attributes( "title{$item_key}", $image_box_link);
        $image_tag = 'a';
        }

        $title_classes = array('tf-image-box-title', 'mb-0');
        if (isset($title_class)) {
        $title_classes[] = $title_class;
        }

        $description_classes = array('tf-image-box-desc', 'mb-0');
        if (isset($description_class)) {
        $description_classes[] = $description_class;
        }

		$this->add_render_attribute( "image_link{$item_key}", 'class', 'card-img' );
        ?>
        <div class="tf-image-box-wrapper">
            <div <?php $this->print_render_attribute_string( "wrapper{$item_key}" ) ?>>
				<?php if ( ! empty( $image_html ) ): ?>
                    <div class="tf-image tf-image">
						<?php printf( '<%1$s %2$s>%3$s %4$s</%1$s>', $image_tag, $this->get_render_attribute_string( "image_link{$item_key}" ), $image_html, $image_hover ); ?>
                    </div>
				<?php endif; ?>
				<?php if ( ! empty( $title ) || ! empty( $description ) ): ?>
                    <div class="tf-image-box-content">
						<?php if ( ! empty( $title ) ) {
							printf( '<%1$s class="%5$s"><%2$s %3$s>%4$s</%2$s></%1$s>', $title_tag, $image_tag, $this->get_render_attribute_string( "title{$item_key}" ), $title, join( ' ', $title_classes ) );
						} ?>
						<?php if ( ! empty( $description ) && ( $description_pos === 'inset' ) ): ?>
                            <div class="<?php echo esc_attr( join( ' ', $description_classes ) ) ?>"><?php echo wp_kses_post( $description ) ?></div>
						<?php endif; ?>
                    </div>
				<?php endif; ?>
            </div>
			<?php if ( ! empty( $description ) && ( $description_pos === 'outset' ) ): ?>
                <div class="<?php echo esc_attr( join( ' ', $description_classes ) ) ?>"><?php echo wp_kses_post( $description ) ?></div>
			<?php endif; ?>
        </div>


		<?php
	}

}