<?php

namespace ElementPack\Modules\PortfolioList\Widgets;

use Elementor\Controls_Manager;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Typography;
use ElementPack\Base\Module_Base;
use ElementPack\Includes\Controls\GroupQuery\Group_Control_Query;
use ElementPack\Traits\Global_Controls_Functions;

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

class Portfolio_List extends Module_Base {
	use Group_Control_Query;
	use Global_Controls_Functions;

	private $_query = null;
	private $widget_prefix = 'portfolio-list';

	public function get_name() {
		return 'bdt-portfolio-list';
	}

	public function get_title() {
		return BDTEP . esc_html__( 'Portfolio List', 'bdthemes-element-pack' );
	}

	public function get_icon() {
		return 'bdt-wi-portfolio-list';
	}

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

	public function get_keywords() {
		return [ 'portfolio', 'gallery', 'blog', 'recent', 'news', 'works', 'list' ];
	}

	public function get_style_depends() {
		return $this->ep_is_edit_mode() ? [ 'ep-styles' ] : [ 'ep-portfolio-list' ];
	}

	public function get_script_depends() {
		return $this->ep_is_edit_mode() ? [ 'imagesloaded', 'ep-scripts' ] : [ 'imagesloaded' ];
	}

	public function get_query() {
		return $this->_query;
	}

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

	public function register_controls() {
		$this->register_section_controls();
	}

	private function register_section_controls() {
		$this->start_controls_section(
			'section_content_layout',
			[
				'label' => esc_html__( 'Layout', 'bdthemes-element-pack' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control(
			'show_horizontal_layout',
			[
				'label' => esc_html__( 'Horizontal Layout', 'bdthemes-element-pack' ),
				'type'  => Controls_Manager::SWITCHER,
			]
		);

		$this->add_responsive_control(
			'columns',
			[
				'label'              => esc_html__( 'Columns', 'bdthemes-element-pack' ),
				'type'               => Controls_Manager::SELECT,
				'default'            => '2',
				'tablet_default'     => '2',
				'mobile_default'     => '1',
				'options'            => [
					'2' => 'Two',
					'3' => 'Three',
					'4' => 'Four',
				],
				'frontend_available' => true,
				'condition'          => [
					'show_horizontal_layout' => 'yes',
				],
			]
		);

		$this->add_control(
			'show_pagination',
			[
				'label' => esc_html__( 'Pagination', 'bdthemes-element-pack' ),
				'type'  => Controls_Manager::SWITCHER,
			]
		);

		$this->register_portfolio_thumbnail_size_control();
		$this->end_controls_section();

		$this->register_portfolio_query_section_controls( [ 'posts_per_page_default' => 8 ] );
		$this->register_portfolio_additional_options_controls( [
			'include_link_controls'    => false,
			'excerpt_limit_default'      => 15,
			'show_excerpt_default'       => 'yes',
		] );

		$this->register_portfolio_style_items_controls( $this->widget_prefix );
		$this->register_portfolio_style_thumbnail_controls();
		$this->register_portfolio_style_title_controls( $this->widget_prefix );
		$this->register_portfolio_style_excerpt_controls( $this->widget_prefix );
		$this->register_portfolio_style_category_controls( $this->widget_prefix );
		$this->register_portfolio_style_pagination_controls();
	}

	/**
	 * Register list-only thumbnail style controls.
	 */
	protected function register_portfolio_style_thumbnail_controls() {
		$wrapper = $this->get_portfolio_wrapper_class( $this->widget_prefix );

		$this->start_controls_section(
			'section_style_thumbnail',
			[
				'label' => esc_html__( 'Thumbnail', 'bdthemes-element-pack' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_responsive_control(
			'thumbnail_size',
			[
				'label'   => esc_html__( 'Image Size', 'bdthemes-element-pack' ),
				'type'    => Controls_Manager::SLIDER,
				'range'   => [
					'px' => [
						'min' => 100,
						'max' => 1000,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .' . $wrapper . ' .bdt-gallery-thumbnail img' => 'min-height: {{SIZE}}{{UNIT}}; min-width: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_control(
			'image_background_color',
			[
				'label'     => esc_html__( 'Background Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .' . $wrapper . ' .bdt-gallery-thumbnail img' => 'background: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'image_box_shadow',
				'selector' => '{{WRAPPER}} .' . $wrapper . ' .bdt-gallery-thumbnail img',
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'     => 'border',
				'label'    => esc_html__( 'Border', 'bdthemes-element-pack' ),
				'selector' => '{{WRAPPER}} .' . $wrapper . ' .bdt-gallery-thumbnail img',
			]
		);

		$this->add_control(
			'image_border_radius',
			[
				'label'      => esc_html__( 'Border Radius', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .' . $wrapper . ' .bdt-gallery-thumbnail img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'condition'  => [
					'border_radius_advanced_show!' => 'yes',
				],
			]
		);

		$this->add_control(
			'border_radius_advanced_show',
			[
				'label' => __( 'Advanced Radius', 'bdthemes-element-pack' ),
				'type'  => Controls_Manager::SWITCHER,
			]
		);

		$this->add_control(
			'border_radius_advanced',
			[
				'label'       => esc_html__( 'Radius', 'bdthemes-element-pack' ),
/* translators: 1: Example radius value, 2: URL to the fancy-border-radius tool */
				'description' => sprintf( __( 'For example: <b>%1$s</b> or Go <a href="%2$s" target="_blank">this link</a> and copy and paste the radius value.', 'bdthemes-element-pack' ), '30% 70% 82% 18% / 46% 62% 38% 54%', 'https://9elements.github.io/fancy-border-radius/' ),
				'type'        => Controls_Manager::TEXT,
				'dynamic'     => [ 'active' => true ],
				'size_units'  => [ 'px', '%' ],
				'separator'   => 'after',
				'default'     => '30% 70% 82% 18% / 46% 62% 38% 54%',
				'selectors'   => [
					'{{WRAPPER}} .' . $wrapper . ' .bdt-gallery-thumbnail img' => 'border-radius: {{VALUE}}; overflow: hidden;',
				],
				'condition'   => [
					'border_radius_advanced_show' => 'yes',
				],
			]
		);

		$this->add_control(
			'image_padding',
			[
				'label'      => esc_html__( 'Padding', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .' . $wrapper . ' .bdt-gallery-thumbnail img' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->end_controls_section();
	}

	/**
	 * Register list-only pagination style controls.
	 */
	protected function register_portfolio_style_pagination_controls() {
		$this->start_controls_section(
			'section_style_pagination',
			[
				'label'     => esc_html__( 'Pagination', 'bdthemes-element-pack' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [
					'show_pagination' => 'yes',
				],
			]
		);

		$this->start_controls_tabs( 'tabs_pagination_style' );

		$this->start_controls_tab(
			'tab_pagination_normal',
			[
				'label' => esc_html__( 'Normal', 'bdthemes-element-pack' ),
			]
		);

		$this->add_control(
			'pagination_color',
			[
				'label'     => esc_html__( 'Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} ul.bdt-pagination li a, {{WRAPPER}} ul.bdt-pagination li span' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name'      => 'pagination_background',
				'selector'  => '{{WRAPPER}} ul.bdt-pagination li a',
				'separator' => 'after',
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'     => 'pagination_border',
				'label'    => esc_html__( 'Border', 'bdthemes-element-pack' ),
				'selector' => '{{WRAPPER}} ul.bdt-pagination li a',
			]
		);

		$this->add_responsive_control(
			'pagination_offset',
			[
				'label'     => esc_html__( 'Offset', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SLIDER,
				'selectors' => [
					'{{WRAPPER}} .bdt-pagination' => 'margin-top: {{SIZE}}px;',
				],
			]
		);

		$this->add_responsive_control(
			'pagination_space',
			[
				'label'     => esc_html__( 'Spacing', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SLIDER,
				'selectors' => [
					'{{WRAPPER}} .bdt-pagination'     => 'margin-left: {{SIZE}}px;',
					'{{WRAPPER}} .bdt-pagination > *' => 'padding-left: {{SIZE}}px;',
				],
			]
		);

		$this->add_responsive_control(
			'pagination_padding',
			[
				'label'     => esc_html__( 'Padding', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::DIMENSIONS,
				'selectors' => [
					'{{WRAPPER}} ul.bdt-pagination li a' => 'padding: {{TOP}}px {{RIGHT}}px {{BOTTOM}}px {{LEFT}}px;',
				],
			]
		);

		$this->add_responsive_control(
			'pagination_radius',
			[
				'label'     => esc_html__( 'Radius', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::DIMENSIONS,
				'selectors' => [
					'{{WRAPPER}} ul.bdt-pagination li a' => 'border-radius: {{TOP}}px {{RIGHT}}px {{BOTTOM}}px {{LEFT}}px;',
				],
			]
		);

		$this->add_responsive_control(
			'pagination_arrow_size',
			[
				'label'     => esc_html__( 'Arrow Size', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SLIDER,
				'selectors' => [
					'{{WRAPPER}} ul.bdt-pagination li a svg' => 'height: {{SIZE}}px; width: auto;',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'pagination_typography',
				'label'    => esc_html__( 'Typography', 'bdthemes-element-pack' ),
				'selector' => '{{WRAPPER}} ul.bdt-pagination li a, {{WRAPPER}} ul.bdt-pagination li span',
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'tab_pagination_hover',
			[
				'label' => esc_html__( 'Hover', 'bdthemes-element-pack' ),
			]
		);

		$this->add_control(
			'pagination_hover_color',
			[
				'label'     => esc_html__( 'Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} ul.bdt-pagination li a:hover' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'pagination_hover_border_color',
			[
				'label'     => esc_html__( 'Border Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} ul.bdt-pagination li a:hover' => 'border-color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name'     => 'pagination_hover_background',
				'selector' => '{{WRAPPER}} ul.bdt-pagination li a:hover',
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'tab_pagination_active',
			[
				'label' => esc_html__( 'Active', 'bdthemes-element-pack' ),
			]
		);

		$this->add_control(
			'pagination_active_color',
			[
				'label'     => esc_html__( 'Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} ul.bdt-pagination li.bdt-active a' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'pagination_active_border_color',
			[
				'label'     => esc_html__( 'Border Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} ul.bdt-pagination li.bdt-active a' => 'border-color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name'     => 'pagination_active_background',
				'selector' => '{{WRAPPER}} ul.bdt-pagination li.bdt-active a',
			]
		);

		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();
	}

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

		$this->query_posts( $settings['posts_per_page'] );

		$wp_query = $this->get_query();

		if ( ! $wp_query->found_posts ) {
			return;
		}

		$this->render_header( 'default', $settings );

		while ( $wp_query->have_posts() ) {
			$wp_query->the_post();
			$this->render_post( $settings );
		}

		$this->render_footer();

		if ( $settings['show_pagination'] === 'yes' ) {
			?>
			<div class="ep-pagination">
				<?php element_pack_post_pagination( $wp_query ); ?>
			</div>
			<?php
		}

		wp_reset_postdata();
	}

	public function render_header( $skin, $settings ) {
		$id = 'bdt-portfolio-list-' . esc_attr( $this->get_id() );

		$this->add_render_attribute( 'portfolio-wrapper', 'class', 'bdt-portfolio-list-wrapper' );
		$this->add_render_attribute( 'portfolio', 'id', esc_attr( $id ) );
		$this->add_render_attribute( 'portfolio', 'class', [ 'bdt-portfolio-list', 'bdt-ep-grid-filter-container', 'bdt-portfolio-list-skin-' . $skin ] );
		$this->add_render_attribute( 'portfolio', 'data-bdt-grid', '' );
		$this->add_render_attribute( 'portfolio', 'class', [ 'bdt-grid', 'bdt-grid-medium' ] );

		if ( $settings['show_horizontal_layout'] === 'yes' ) {
			$columns_mobile = $settings['columns_mobile'];
			$columns_tablet = $settings['columns_tablet'];
			$columns        = $settings['columns'];
			$this->add_render_attribute( 'portfolio', 'class', 'bdt-child-width-1-' . $columns_mobile );
			$this->add_render_attribute( 'portfolio', 'class', 'bdt-child-width-1-' . $columns_tablet . '@s' );
			$this->add_render_attribute( 'portfolio', 'class', 'bdt-child-width-1-' . $columns . '@m' );
		} else {
			$this->add_render_attribute( 'portfolio', 'class', 'bdt-child-width-1-1' );
		}
		?>
		<div <?php $this->print_render_attribute_string( 'portfolio-wrapper' ); ?>>
			<div <?php $this->print_render_attribute_string( 'portfolio' ); ?>>
		<?php
	}

	public function render_footer() {
		$this->render_portfolio_footer( $this->widget_prefix );
	}

	public function render_post( $settings ) {
		global $post;

		$element_key = 'portfolio-item-' . $post->ID;

		$this->add_render_attribute( 'portfolio-item-inner', 'class', 'bdt-portfolio-inner', true );
		$this->add_render_attribute( 'portfolio-item', 'class', 'bdt-gallery-item bdt-transition-toggle', true );
		?>
		<div <?php $this->print_render_attribute_string( $element_key ); ?>>
			<div <?php $this->print_render_attribute_string( 'portfolio-item' ); ?>>
				<div <?php $this->print_render_attribute_string( 'portfolio-item-inner' ); ?>>
					<div class="bdt-grid">
						<div class="bdt-width-auto bdt-flex bdt-flex-middle">
							<?php $this->render_thumbnail( $settings ); ?>
						</div>
						<div class="bdt-width-expand bdt-flex bdt-flex-middle">
							<?php $this->render_desc( $settings ); ?>
						</div>
					</div>
				</div>
			</div>
		</div>
		<?php
	}
}
