<?php
/**
 * Elementor Text Scroll Widget
 *
 * @package Woostify Pro
 */

namespace Elementor;

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

/**
 * Class for woostify elementor text scroll widget.
 */
class Woostify_Elementor_Text_Scroll_Widget extends \Elementor\Widget_Base {
    /**
	 * Category
	 */
	public function get_categories() {
		return [ 'woostify-theme' ];
	}

    /**
	 * Name
	 */
	public function get_name() {
		return 'woostify-text-scroll';
	}

	/**
	 * Gets the title.
	 */
	public function get_title() {
		return __( 'Woostify - Text Scroll', 'woostify-pro' );
	}

    /**
	 * Gets the icon.
	 */
	public function get_icon() {
		return 'eicon-slider-push';
	}

	/**
	 * Gets the keywords.
	 */
	public function get_keywords() {
		return [ 'woostify', 'text', 'scroll', 'text scroll' ];
	}

    /**
	 * Add a style.
	 */
	public function get_style_depends() {
		return array(  );
	}

    /**
	 * Add a script.
	 */
	public function get_script_depends() {
		return array( 'woostify-text-scroll' );
	}

	public function get_skins() {
        return [
            'text_slider' => new Skin_Text_Slider( $this ),
        ];
    }


	/**
	 * Items
	 */
	protected function section_layout() {
		$this->start_controls_section(
			'layout_section',
			array(
				'label' => esc_html__( 'Layout', 'woostify-pro' ),
			)
		);

		// repeater.
		$repeater = new Repeater();

		$repeater->add_control(
			'text',
			array(
				'label'       => __( 'Text', 'woostify-pro' ),
				'type'        => Controls_Manager::TEXT,
				'default'			=> __( 'Sign up & enjoy 10% off 1', 'woostify-pro' ),
				'placeholder' => __( 'Sign up & enjoy 10% off 1', 'woostify-pro' ),
				'label_block' => true,
			)
		);

        // Items.
		$this->add_control(
			'items',
			array(
				'label'       => __( 'Items', 'woostify-pro' ),
				'type'        => Controls_Manager::REPEATER,
				'fields'      => $repeater->get_controls(),
				'default'     => array(
					array(
						'text' => __( 'Sign up & enjoy 10% off 1', 'woostify-pro' ),
					),
					array(
						'text' => __( 'FREE gift on all orders over $85 USD/ $100 CAD', 'woostify-pro' ),
					),
                    array(
						'text' => __( 'Sign up & enjoy 10% off 1', 'woostify-pro' ),
					),
					array(
						'text' => __( 'FREE gift on all orders over $85 USD/ $100 CAD', 'woostify-pro' ),
					),
				),
				'text_field' => '{{{ text }}}',
			)
		);

        $this->end_controls_section();

		$this->start_controls_section(
			'setting_section',
			array(
				'label' => esc_html__( 'Setting', 'woostify-pro' ),
			)
		);

		$this->add_responsive_control(
			'slide_perview',
			[
				'label' => __( 'Slide Preview', 'woostify-pro' ),
				'type' => Controls_Manager::SELECT,
				'default' => '1',
				'options' => [
					'1' => '1',
					'2' => '2',
					'3' => '3',
					'4' => '4',
					'5' => '5',
					'6' => '6',
				],
				'condition' => [
					'_skin!' => '',
				],

			]
		);

		$this->add_control(
			'prev_next_button',
			[
				'label' => __( 'Prev Next Button', 'woostify-pro' ),
				'type' => Controls_Manager::SWITCHER,
				'label_on' => __( 'Show', 'woostify-pro' ),
				'label_off' => __( 'Hide', 'woostify-pro' ),
				'default' => 'yes',
			]
		);

		$this->add_control(
			'auto_play',
			[
				'label' => __( 'AutoPlay', 'woostify-pro' ),
				'type' => Controls_Manager::SWITCHER,
				'label_on' => __( 'On', 'woostify-pro' ),
				'label_off' => __( 'Off', 'woostify-pro' ),
				'default' => 'yes',
			]
		);

		$this->add_control(
			'autoplay_timeout',
			[
				'label' => __( 'Autoplay Timeout (ms)', 'woostify-pro' ),
				'type' => Controls_Manager::NUMBER,
				'default' => 2000,
				'condition' => [
					'auto_play' => 'yes',
				],
			]
		);

		$this->end_controls_section();
    }

	protected function section_style_layout() {
		$this->start_controls_section(
			'style_layout_section',
			array(
				'label' => esc_html__( 'Style', 'woostify-pro' ),
				'tab' => Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_control(
			'text_style',
			[
				'label' => __( 'Text', 'woostify-pro' ),
				'type' => Controls_Manager::HEADING,
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'text_typography',
				'default' => '',
				'selector' => '{{WRAPPER}} .text-scroll',
			]
		);

		$this->add_control(
			'text_color',
			[
				'label' => __( 'Color', 'woostify-pro' ),
				'type' => Controls_Manager::COLOR,
				'default' => '',
				'selectors' => [
					'{{WRAPPER}} .text-scroll' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'button_style',
			[
				'label' => __( 'Button', 'woostify-pro' ),
				'type' => Controls_Manager::HEADING,
			]
		);

		$this->add_responsive_control(
			'button_size',
			[
				'label' => esc_html__( 'Size', 'woostify-pro' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px', 'em', 'rem', 'custom' ],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 100,
						'step' => 1,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 20,
				],
				'selectors' => [
					'{{WRAPPER}} button' => 'width: {{SIZE}}{{UNIT}};height: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'button_icon_size',
			[
				'label' => esc_html__( 'Icon Size', 'woostify-pro' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px', 'em', 'rem', 'custom' ],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 100,
						'step' => 1,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 20,
				],
				'selectors' => [
					'{{WRAPPER}} button' => 'font-size: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->start_controls_tabs(
			'button_tabs'
		);

		$this->start_controls_tab(
			'button_normal_tab',
			[
				'label' => esc_html__( 'Normal', 'woostify-pro' ),
			]
		);

		$this->add_control(
			'button_color',
			[
				'label' => __( 'Color', 'woostify-pro' ),
				'type' => Controls_Manager::COLOR,
				'default' => '',
				'selectors' => [
					'{{WRAPPER}} button svg path' => 'fill: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'button_bg_color',
			[
				'label' => __( 'Background Color', 'woostify-pro' ),
				'type' => Controls_Manager::COLOR,
				'default' => '',
				'selectors' => [
					'{{WRAPPER}} button' => 'background: {{VALUE}};',
				],
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'button_hover_tab',
			[
				'label' => esc_html__( 'Hover', 'woostify-pro' ),
			]
		);

		$this->add_control(
			'button_color_hover',
			[
				'label' => __( 'Color', 'woostify-pro' ),
				'type' => Controls_Manager::COLOR,
				'default' => '',
				'selectors' => [
					'{{WRAPPER}} button:hover svg path' => 'fill: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'button_bg_color_hover',
			[
				'label' => __( 'Background Color', 'woostify-pro' ),
				'type' => Controls_Manager::COLOR,
				'default' => '',
				'selectors' => [
					'{{WRAPPER}} button:hover' => 'background: {{VALUE}};',
				],
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->add_responsive_control(
			'button_border_radius',
			[
				'label' => __( 'Border Radius', 'woostify-pro' ),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
				'default' => [],
				'selectors' => [
					'{{WRAPPER}} button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->end_controls_section();
	}

    /**
	 * Controls
	 */
	protected function register_controls() { // phpcs:ignore
        $this->section_layout();
		$this->section_style_layout();
    }

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

		$blockID = uniqid();

		$prevNextButtons = ( $settings['prev_next_button'] == 'yes' )? true : false;
		$autoPlay = ( $settings['auto_play'] == 'yes' )? false : true;

        $data = array();

		if( $autoPlay ){
			$data['autoplay'] = 'false';
		}

		if( $prevNextButtons ){
			$data['navigation'] = array(
				'nextEl' => '.swiper-button-next-'.$blockID,
				'prevEl' => '.swiper-button-prev-'.$blockID,
			);
		}

        return json_encode($data);
    }

	/**
	 * Render
	 */
	public function render() {
		// Settings.
		$settings = $this->get_settings_for_display();

		$blockID = uniqid();

        $items = $settings['items'];
        if( !empty($items) ){
			$autoPlay = ( $settings['auto_play'] == 'yes' )? true : false;
			$prevNextButtons = ( $settings['prev_next_button'] == 'yes' )? true : false;

			$setting = array(
				'prevNextButtons' => $prevNextButtons,
			);

			if( $autoPlay ){
				$setting['autoPlay'] = false;
			}

            ?>
			<style>
			.text-scroll-widget .slider {
				opacity: 0;
			}
			</style>
			<div data-id="text-scroll-<?php echo esc_attr( $blockID  );?>" class="text-scroll-widget text-scroll-<?php echo esc_attr( $blockID  );?>">
				<div id="flickity-<?php echo esc_attr( $blockID  );?>"
					class="flickity-<?php echo esc_attr( $blockID  );?> text-scroll-wrapper flickity-carousel slider"
					data-speed="1"
					data-rtl="no"
					data-setting="<?php echo esc_attr(json_encode($setting)); ?>"
					data-autoplay="<?php echo esc_attr(json_encode($autoPlay)); ?>"
					>
					<?php
					foreach ($items as $index => $item) {
						$text = $item['text'];
					?>
						<div class="carousel-cell slider-item">
							<div class="text-scroll"><?php echo do_shortcode($text); ?></div>
						</div>
					<?php } ?>
				</div>
			</div>

            <?php
        }

    }


	protected function _content_template() {

	}


}

class Skin_Text_Slider extends \Elementor\Skin_Base {

	public function get_id() {
		return 'skin-text-slider';
	}

	public function get_title() {
		return __( 'Text Slider', 'woostify-pro' );
	}


	public function setting_data(){
		$settings = $this->parent->get_settings();

		$slidesToShow = ( $settings['slide_perview'] )? $settings['slide_perview'] : 1;
		$prevNextButtons = ( $settings['prev_next_button'] == 'yes' )? true : false;
		$autoPlay = ( $settings['auto_play'] == 'yes' )? true : false;

		$prev_button = '<button class="slick-prev slick-arrow"><svg class="flickity-button-icon" viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z" class="arrow"></path></svg></button>';
		$next_button = '<button class="slick-next slick-arrow"><svg class="flickity-button-icon" viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z" class="arrow" transform="translate(100, 100) rotate(180) "></path></svg></button>';

		$data = array(
			'slidesToShow' => $slidesToShow,
			'arrows' => $prevNextButtons,
			'prevArrow' => $prev_button,
			'nextArrow' => $next_button,
			'autoplay' => $autoPlay,
			'autoplaySpeed' => (int) $settings['autoplay_timeout'],
		);

        return json_encode($data);

	}

	public function swiper_data(){
		$settings = $this->parent->get_settings();

		$blockID = uniqid();

		$slidesToShow = ( $settings['slide_perview'] )? $settings['slide_perview'] : 1;
		$prevNextButtons = ( $settings['prev_next_button'] == 'yes' )? true : false;
		$autoPlay = ( $settings['auto_play'] == 'yes' )? false : true;

        $data = array(
			'slidesPerView' => $slidesToShow,
		);

		if( $autoPlay ){
			$data['autoplay'] = false;
		} else {
            $data['autoplay'] = array(
                'delay' => (int) $settings['autoplay_timeout'],
                'disableOnInteraction' => false,
            );
        }

		if( $prevNextButtons ){
			$data['navigation'] = array(
				'nextEl' => '.swiper-button-next-'.$blockID,
				'prevEl' => '.swiper-button-prev-'.$blockID,
			);
		}

        return json_encode($data);
    }

    public function render() {
		$settings = $this->parent->get_settings();
		$blockID = uniqid();

		$items = $this->parent->get_settings('items');
		if( !empty( $items ) ){

			$prevNextButtons = ( $settings['prev_next_button'] == 'yes' )? true : false;

			?>
			<style>
			.text-scroll-widget .swiper-container {
				opacity: 0;
			}
			</style>
			<div class="text-scroll-widget-<?php echo $blockID; ?> text-scroll-widget" data-type="text-slider">
				<div id="swiper-container-<?php echo $blockID; ?>" class="swiper-container-<?php echo $blockID; ?> swiper-container" data-swiper="<?php echo  esc_attr( $this->swiper_data() ); ?>">
					<div class="swiper-wrapper">
					<?php foreach ($items as $key => $item) {
							$text = !empty($item['text'])? $item['text'] : '';
                            if( !empty($text) ){
						    ?>
                            <div class="swiper-slide slider-item">
                                <div class="text-scroll"><?php echo do_shortcode($text); ?></div>
                            </div>
                            <?php }
                        } ?>
					</div>

					<?php if( $prevNextButtons ): ?>
					<button class="swiper-button swiper-button-prev swiper-button-prev-<?php echo $blockID; ?>">
						<svg viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z" class="arrow"></path></svg>
					</button>
					<button class="swiper-button swiper-button-next swiper-button-next-<?php echo $blockID; ?>">
						<svg viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z" class="arrow" transform="translate(100, 100) rotate(180) "></path></svg>
					</button>
					<?php endif; ?>
				</div>

            </div>
			<?php
		}
    }

    protected function _content_template() {

	}

}


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