<?php

namespace ElementPack\Modules\ReviewCardGrid\Widgets;

use ElementPack\Base\Module_Base;
use Elementor\Controls_Manager;
use ElementPack\Traits\Global_Mask_Controls;
use ElementPack\Traits\Global_Widget_Controls;
use ElementPack\Traits\Global_Controls_Functions;

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

class Review_Card_Grid extends Module_Base {

	use Global_Mask_Controls;
	use Global_Widget_Controls;
	use Global_Controls_Functions;

	public function get_name() {
		return 'bdt-review-card-grid';
	}

	public function get_title() {
		return BDTEP . esc_html__( 'Review Card Grid', 'bdthemes-element-pack' );
	}

	public function get_icon() {
		return 'bdt-wi-review-card-grid';
	}

	public function get_categories() {
		return [ 'element-pack' ];
	}

	public function get_keywords() {
		return [ 'interactive', 'review', 'image', 'services', 'card', 'box', 'features', 'testimonial', 'client', 'grid' ];
	}

	public function get_style_depends() {
		return $this->ep_is_edit_mode() ? [ 'ep-styles' ] : [ 'ep-font', 'ep-review-card-grid' ];
	}

	public function get_script_depends() {
		return $this->ep_is_edit_mode() ? [ 'ep-scripts' ] : [ 'ep-text-read-more-toggle' ];
	}

	public function get_custom_help_url() {
		return 'https://youtu.be/hIKLXU9Rh-8';
	}

	public function has_widget_inner_wrapper(): bool {
        return ! \Elementor\Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
    }
	protected function is_dynamic_content(): bool {
		return false;
	}


	protected function register_controls() {
		$widget_prefix = 'review-card-grid';

		$this->register_review_card_repeater_content_controls();

		$this->start_controls_section(
			'section_review_additional_settings',
			[
				'label' => __( 'Additional Settings', 'bdthemes-element-pack' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_responsive_control(
			'columns',
			[
				'label'           => __( 'Columns', 'bdthemes-element-pack' ),
				'type'            => Controls_Manager::SELECT,
				'desktop_default' => 3,
				'tablet_default'  => 2,
				'mobile_default'  => 1,
				'options'         => [
					1 => '1',
					2 => '2',
					3 => '3',
					4 => '4',
					5 => '5',
					6 => '6',
				],
				'selectors'       => [
					'{{WRAPPER}} .bdt-review-card-grid' => 'grid-template-columns: repeat({{SIZE}}, 1fr);',
				],
			]
		);

		$this->add_responsive_control(
			'row_gap',
			[
				'label'     => esc_html__( 'Row Gap', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SLIDER,
				'selectors' => [
					'{{WRAPPER}} .bdt-review-card-grid' => 'grid-row-gap: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'column_gap',
			[
				'label'     => esc_html__( 'Column Gap', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SLIDER,
				'selectors' => [
					'{{WRAPPER}} .bdt-review-card-grid' => 'grid-column-gap: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->register_review_card_additional_settings_controls(
			$widget_prefix,
			[
				'is_single'             => false,
				'image_position_labels' => 'left_right',
				'section_wrapper'       => false,
			]
		);

		$this->end_controls_section();

		$this->register_review_card_style_item_controls( $widget_prefix );
		$this->register_review_card_style_image_controls(
			$widget_prefix,
			[ 'advanced_size_nc' => true ]
		);
		$this->register_review_card_style_name_controls( $widget_prefix );
		$this->register_review_card_style_job_title_controls( $widget_prefix );
		$this->register_review_card_style_text_controls( $widget_prefix );
		$this->register_review_card_style_rating_controls( $widget_prefix );
		$this->register_review_card_read_more_style_controls();
		$this->register_review_card_style_additional_controls( $widget_prefix );
	}

	protected function render() {
		$settings      = $this->get_settings_for_display();
		$widget_prefix = 'review-card-grid';

		if ( empty( $settings['review_items'] ) || ! is_array( $settings['review_items'] ) ) {
			return;
		}

		$this->add_render_attribute( 'review-card', 'class', 'bdt-review-card-grid' );
		?>
		<div <?php $this->print_render_attribute_string( 'review-card' ); ?>>
			<?php
			foreach ( $settings['review_items'] as $item ) {
				$this->render_review_card_item(
					is_array( $item ) ? $item : [],
					$settings,
					$widget_prefix,
					[
						'rating_min'         => 0,
						'flex_inline_rating' => true,
					]
				);
			}
			?>
		</div>
		<?php
	}

	protected function content_template() {
		?>
		<#
		var ratingType     = settings.rating_type || 'star';
		var ratingPosition = settings.rating_position || 'before';
		var imageInline    = settings.image_inline || '';
		var imagePosition  = settings.iamge_position || 'top';
		var imageInlineRowClass = ( imagePosition === 'right' ) ? 'bdt-ep-img-inline bdt-flex bdt-flex-row-reverse' : 'bdt-ep-img-inline bdt-flex';
		var imageMaskClass = ( settings.image_mask_popover === 'yes' ) ? ' bdt-image-mask' : '';
		var readMoreData = '';
		if ( settings.review_words_length ) {
			readMoreData = JSON.stringify( { words_length: settings.review_words_length } );
		}

		var renderItemRating = function( item ) {
			var ratingNumber = item.rating_number && item.rating_number.size !== undefined ? parseFloat( item.rating_number.size ) : 0;
			ratingNumber = Math.min( 5.0, Math.max( 0, ratingNumber ) );
			var firstVal  = Math.floor( ratingNumber );
			var secondVal = ( ratingNumber - firstVal ) >= 0.5 ? 5 : 0;
			var score     = firstVal + '-' + secondVal;
			var ratingDisplay = item.rating_number && item.rating_number.size !== undefined ? item.rating_number.size : '';
			var html = '<div class="bdt-ep-review-card-grid-rating bdt-flex-inline bdt-flex-middle bdt-' + ratingType + ' bdt-' + ratingPosition + '">';
			if ( ratingType === 'number' ) {
				html += '<span>' + ratingDisplay + '</span><i class="ep-icon-star-full" aria-hidden="true"></i>';
			} else {
				html += '<span class="epsc-rating epsc-rating-' + score + '">';
				for ( var s = 0; s < 5; s++ ) {
					html += '<span class="epsc-rating-item"><i class="ep-icon-star" aria-hidden="true"></i></span>';
				}
				html += '</span>';
			}
			html += '</div>';
			return html;
		};
		#>
		<div class="bdt-review-card-grid">
			<# _.each( settings.review_items || [], function( item ) { #>
			<div class="bdt-ep-review-card-grid-item">

				<# if ( imageInline !== 'yes' && settings.show_reviewer_image === 'yes' && item.image && item.image.url ) { #>
				<div class="bdt-ep-review-card-grid-image<# print( imageMaskClass ); #>">
					<img src="{{ item.image.url }}" alt="{{ item.reviewer_name }}">
				</div>
				<# } #>

				<div class="bdt-ep-review-card-grid-content">
					<# if ( imageInline === 'yes' && settings.show_reviewer_image === 'yes' ) { #>
					<div class="<# print( imageInlineRowClass ); #>">
						<# if ( item.image && item.image.url ) { #>
						<div class="bdt-ep-review-card-grid-image<# print( imageMaskClass ); #>">
							<img src="{{ item.image.url }}" alt="{{ item.reviewer_name }}">
						</div>
						<# } #>
						<div class="bdt-flex bdt-flex-column bdt-flex-center">
							<# if ( settings.show_reviewer_name === 'yes' && item.reviewer_name ) { #>
							<{{ settings.review_name_tag }} class="bdt-ep-review-card-grid-name">{{{ item.reviewer_name }}}</{{ settings.review_name_tag }}>
							<# } #>
							<# if ( settings.show_reviewer_job_title === 'yes' && item.reviewer_job_title ) { #>
							<div class="bdt-ep-review-card-grid-job-title">{{{ item.reviewer_job_title }}}</div>
							<# } #>
							<# if ( settings.show_rating === 'yes' && ratingPosition === 'before' ) { #>
							{{{ renderItemRating( item ) }}}
							<# } #>
						</div>
					</div>
					<# } #>

					<# if ( imageInline !== 'yes' ) { #>
					<# if ( settings.show_reviewer_name === 'yes' && item.reviewer_name ) { #>
					<{{ settings.review_name_tag }} class="bdt-ep-review-card-grid-name">{{{ item.reviewer_name }}}</{{ settings.review_name_tag }}>
					<# } #>
					<# if ( settings.show_reviewer_job_title === 'yes' && item.reviewer_job_title ) { #>
					<div class="bdt-ep-review-card-grid-job-title">{{{ item.reviewer_job_title }}}</div>
					<# } #>
					<# if ( settings.show_rating === 'yes' && ratingPosition === 'before' ) { #>
					{{{ renderItemRating( item ) }}}
					<# } #>
					<# } #>

					<# if ( settings.show_review_text === 'yes' && item.review_text ) { #>
					<div class="bdt-ep-review-card-grid-text<# if ( settings.review_words_length ) { #> bdt-ep-read-more-text<# } #>"<# if ( settings.review_words_length ) { #> data-read-more="<# print( _.escape( readMoreData ) ); #>"<# } #>>{{{ item.review_text }}}</div>
					<# } #>

					<# if ( settings.show_rating === 'yes' && ratingPosition === 'after' ) { #>
					{{{ renderItemRating( item ) }}}
					<# } #>
				</div>
			</div>
			<# } ); #>
		</div>
		<?php
	}
}
