<?php

use Elementor\Widget_Base;
use Elementor\Controls_Manager;

/**
 * Class Opalestate_Widget_Base
 */
abstract class Opalestate_Elementor_Widget_Base extends Widget_Base {

	/**
	 * Get widget categories.
	 *
	 * Retrieve the list of categories the widget belongs to.
	 *
	 * @access public
	 *
	 * @return array Widget categories.
	 */
	public function get_categories() {
		return [ 'opalestate-pro' ];
	}

	/**
	 * Render widget output on the frontend.
	 *
	 * Written in PHP and used to generate the final HTML.
	 *
	 * @access protected
	 */
	protected function render() {
		$settings = $this->get_settings_for_display();

		$located = $this->locate_template( $this->get_name() . '.php' );

		if ( ! file_exists( $located ) ) {
			return;
		}

		if ( ! empty( $located ) && file_exists( $located ) ) {
			@ include apply_filters( 'opalestate_elementor_render_widget_templates', $located, $settings, $this );
		}
	}

	/**
	 * Render widget output in the editor.
	 *
	 * Written as a Backbone JavaScript template and used to generate the live preview.
	 *
	 * @access protected
	 */
	protected function _content_template() {
		$located = $this->locate_template( $this->get_name() . '-preview.php' );

		if ( ! file_exists( $located ) ) {
			return;
		}

		if ( ! empty( $located ) && file_exists( $located ) ) {
			@ include apply_filters( 'opalestate_elementor_preview_widget_templates', $located, $this );
		}
	}

	/**
	 * Locate template.
	 *
	 * @param string $template_name Template name.
	 *
	 * @return string
	 */
	protected function locate_template( $template_name ) {
		// Locate in your {theme}/opalestate-elementor.
		$template = locate_template( [
			trailingslashit( 'opalestate/elementor-templates/' ) . $template_name,
		] );

		// Fallback to default template in the plugin.
		if ( ! $template ) {
			$template = OPALESTATE_PLUGIN_DIR . 'templates/elementor-templates/' . $template_name;
		}


		// Return what we found.
		return apply_filters( 'abrs_elementor_locate_template', $template, $template_name );
	}


	/**
	 * Register image carousel widget controls.
	 *
	 * Adds different input fields to allow the user to change and customize the widget settings.
	 *
	 * @since  1.0.0
	 * @access protected
	 */
	public function get_settings_json( $settings ) {

		$data = [
			"slides_to_show"   => $settings['slides_to_show'],
			"slides_to_scroll" => $settings['slides_to_scroll'],
			"navigation"       => $settings['navigation'],
			"pause_on_hover"   => $settings['pause_on_hover'],
			"autoplay"         => $settings['autoplay'],
			"autoplay_speed"   => $settings['autoplay_speed'],
			"infinite"         => $settings['infinite'],
			"speed"            => $settings['speed'],
			"direction"        => $settings['direction'],
		];

		return wp_json_encode( $data );
	}


	public function render_content() {
		$settings = $this->get_settings_for_display();

		if ( ! isset( $settings['enable_carousel'] ) ) {
			return parent::render_content();
		}

		if ( $settings['enable_carousel'] === 'yes' ) {
			$arrows_position_class = isset( $settings['arrows_position'] ) && $settings['arrows_position'] ? 'slick-arrows-' . $settings['arrows_position'] : '';
			$this->add_render_attribute( 'wrapper-style', 'class', 'elementor-slick-slider-row row-items ' . $arrows_position_class );

			$data = $this->get_settings_json( $settings );
			$this->add_render_attribute( 'wrapper', 'data-settings', $data );

			echo '<div class="elementor-opal-slick-slider elementor-slick-slider" ' . $this->get_render_attribute_string( 'wrapper' ) . '>';
		} else {
			$this->add_render_attribute( 'wrapper-style', 'class', 'elementor-grid row-items elementor-items-container' );
		}

		parent::render_content();

		if ( $settings['enable_carousel'] === 'yes' ) {
			echo '</div>';
		}
	}

	/**
	 * Register image carousel widget controls.
	 *
	 * Adds different input fields to allow the user to change and customize the widget settings.
	 *
	 * @since  1.0.0
	 * @access protected
	 */
	public function add_slick_controls( $condition, $slick_class ) {

		$slick_class = ' .elementor-opal-slick-slider ';

		$this->start_controls_section(
			'section_carousel_options',
			[
				'label'     => esc_html__( 'Carousel Options', 'opalestate-pro' ),
				'type'      => Controls_Manager::SECTION,
				'condition' => $condition,
			]
		);


		$slides_to_show = range( 1, 10 );
		$slides_to_show = array_combine( $slides_to_show, $slides_to_show );

		$this->add_responsive_control(
			'slides_to_show',
			[
				'label'              => esc_html__( 'Slides to Show', 'opalestate-pro' ),
				'type'               => Controls_Manager::SELECT,
				'options'            => [
					                        '' => esc_html__( 'Default', 'opalestate-pro' ),
				                        ] + $slides_to_show,
				'frontend_available' => true,
			]
		);

		$this->add_control(
			'slides_to_scroll',
			[
				'label'              => esc_html__( 'Slides to Scroll', 'opalestate-pro' ),
				'type'               => Controls_Manager::SELECT,
				'description'        => esc_html__( 'Set how many slides are scrolled per swipe.', 'opalestate-pro' ),
				'default'            => '2',
				'options'            => $slides_to_show,
				'condition'          => [
					'slides_to_show!' => '1',
				],
				'frontend_available' => true,
			]
		);


		$this->add_control(
			'navigation',
			[
				'label'              => esc_html__( 'Navigation', 'opalestate-pro' ),
				'type'               => Controls_Manager::SELECT,
				'default'            => 'both',
				'options'            => [
					'both'   => esc_html__( 'Arrows and Dots', 'opalestate-pro' ),
					'arrows' => esc_html__( 'Arrows', 'opalestate-pro' ),
					'dots'   => esc_html__( 'Dots', 'opalestate-pro' ),
					'none'   => esc_html__( 'None', 'opalestate-pro' ),
				],
				'frontend_available' => true,
			]
		);

		$this->add_control(
			'view',
			[
				'label'   => esc_html__( 'View', 'opalestate-pro' ),
				'type'    => Controls_Manager::HIDDEN,
				'default' => 'traditional',
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_additional_options',
			[
				'label'     => esc_html__( 'Carousel Additional Options', 'opalestate-pro' ),
				'condition' => $condition,
			]
		);

		$this->add_control(
			'pause_on_hover',
			[
				'label'              => esc_html__( 'Pause on Hover', 'opalestate-pro' ),
				'type'               => Controls_Manager::SELECT,
				'default'            => 'yes',
				'options'            => [
					'yes' => esc_html__( 'Yes', 'opalestate-pro' ),
					'no'  => esc_html__( 'No', 'opalestate-pro' ),
				],
				'frontend_available' => true,
			]
		);

		$this->add_control(
			'autoplay',
			[
				'label'              => esc_html__( 'Autoplay', 'opalestate-pro' ),
				'type'               => Controls_Manager::SELECT,
				'default'            => 'yes',
				'options'            => [
					'yes' => esc_html__( 'Yes', 'opalestate-pro' ),
					'no'  => esc_html__( 'No', 'opalestate-pro' ),
				],
				'frontend_available' => true,
			]
		);

		$this->add_control(
			'autoplay_speed',
			[
				'label'              => esc_html__( 'Autoplay Speed', 'opalestate-pro' ),
				'type'               => Controls_Manager::NUMBER,
				'default'            => 5000,
				'frontend_available' => true,
			]
		);

		$this->add_control(
			'infinite',
			[
				'label'              => esc_html__( 'Infinite Loop', 'opalestate-pro' ),
				'type'               => Controls_Manager::SELECT,
				'default'            => 'yes',
				'options'            => [
					'yes' => esc_html__( 'Yes', 'opalestate-pro' ),
					'no'  => esc_html__( 'No', 'opalestate-pro' ),
				],
				'frontend_available' => true,
			]
		);

		$this->add_control(
			'effect',
			[
				'label'              => esc_html__( 'Effect', 'opalestate-pro' ),
				'type'               => Controls_Manager::SELECT,
				'default'            => 'slide',
				'options'            => [
					'slide' => esc_html__( 'Slide', 'opalestate-pro' ),
					'fade'  => esc_html__( 'Fade', 'opalestate-pro' ),
				],
				'condition'          => [
					'slides_to_show' => '1',
				],
				'frontend_available' => true,
			]
		);

		$this->add_control(
			'speed',
			[
				'label'              => esc_html__( 'Animation Speed', 'opalestate-pro' ),
				'type'               => Controls_Manager::NUMBER,
				'default'            => 500,
				'frontend_available' => true,
			]
		);

		$this->add_control(
			'direction',
			[
				'label'              => esc_html__( 'Direction', 'opalestate-pro' ),
				'type'               => Controls_Manager::SELECT,
				'default'            => 'ltr',
				'options'            => [
					'ltr' => esc_html__( 'Left', 'opalestate-pro' ),
					'rtl' => esc_html__( 'Right', 'opalestate-pro' ),
				],
				'frontend_available' => true,
			]
		);

		$this->end_controls_section();

		$a = array_merge( $condition, [
			'navigation' => [
				'arrows',
				'dots',
				'both',

			],
		] );
		$this->start_controls_section(
			'section_style_navigation',
			[
				'label'     => esc_html__( 'Navigation', 'opalestate-pro' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => $a,
			]
		);

		$this->add_control(
			'heading_style_arrows',
			[
				'label'     => esc_html__( 'Arrows', 'opalestate-pro' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
				'condition' => [
					'navigation' => [ 'arrows', 'both' ],
				],
			]
		);

		$this->add_control(
			'arrows_position',
			[
				'label'     => esc_html__( 'Position', 'opalestate-pro' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'inside',
				'options'   => [
					'inside'  => esc_html__( 'Inside', 'opalestate-pro' ),
					'outside' => esc_html__( 'Outside', 'opalestate-pro' ),
				],
				'condition' => [
					'navigation' => [ 'arrows', 'both' ],
				],
			]
		);

		$this->add_control(
			'arrows_size',
			[
				'label'     => esc_html__( 'Size', 'opalestate-pro' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [
					'px' => [
						'min' => 20,
						'max' => 60,
					],
				],
				'selectors' => [
					'{{WRAPPER}} ' . $slick_class . '.slick-slider .slick-prev:before, {{WRAPPER}} ' . $slick_class . '.slick-slider .slick-next:before' => 'font-size: {{SIZE}}{{UNIT}};',
				],
				'condition' => [
					'navigation' => [ 'arrows', 'both' ],
				],
			]
		);

		$this->add_control(
			'arrows_color',
			[
				'label'     => esc_html__( 'Color', 'opalestate-pro' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} ' . $slick_class . '.slick-slider .slick-prev:before, {{WRAPPER}} ' . $slick_class . '.slick-slider .slick-next:before' => 'color: {{VALUE}};',
				],
				'condition' => [
					'navigation' => [ 'arrows', 'both' ],
				],
			]
		);

		$this->add_control(
			'heading_style_dots',
			[
				'label'     => esc_html__( 'Dots', 'opalestate-pro' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
				'condition' => [
					'navigation' => [ 'dots', 'both' ],
				],
			]
		);

		$this->add_control(
			'dots_position',
			[
				'label'     => esc_html__( 'Position', 'opalestate-pro' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'outside',
				'options'   => [
					'outside' => esc_html__( 'Outside', 'opalestate-pro' ),
					'inside'  => esc_html__( 'Inside', 'opalestate-pro' ),
				],
				'condition' => [
					'navigation' => [ 'dots', 'both' ],
				],
			]
		);

		$this->add_control(
			'dots_size',
			[
				'label'     => esc_html__( 'Size', 'opalestate-pro' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [
					'px' => [
						'min' => 5,
						'max' => 10,
					],
				],
				'selectors' => [
					'{{WRAPPER}} ' . $slick_class . ' .slick-dots li button:before' => 'font-size: {{SIZE}}{{UNIT}};',
				],
				'condition' => [
					'navigation' => [ 'dots', 'both' ],
				],
			]
		);

		$this->add_control(
			'dots_color',
			[
				'label'     => esc_html__( 'Color', 'opalestate-pro' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} ' . $slick_class . ' .slick-dots li button:before' => 'color: {{VALUE}};',
				],
				'condition' => [
					'navigation' => [ 'dots', 'both' ],
				],
			]
		);

		$this->end_controls_section();

		//   if( $this->image_control ){
		//   $this->add_image_control( $condition, $slick_class );
		//  }

	}
}