<?php

/**
 * Fired during plugin activation
 *
 * @link       https://flothemes.com/
 * @since      1.0.0
 *
 * @package    Flo_Flex_Builder
 * @subpackage Flo_Flex_Builder/includes
 */

/**
 * Fired during plugin activation.
 *
 * This class defines all code necessary to run during the plugin's activation.
 *
 * @since      1.0.0
 * @package    Flo_Flex_Builder
 * @subpackage Flo_Flex_Builder/includes
 * @author     Flothemes <alexb@flothemes.com>
 */
class Flo_Flex_Builder_Slideshow {

	/**
	 * The unique identifier of this plugin.
	 *
	 * @since    1.0.0
	 * @access   protected
	 * @var      string    $plugin_name    The string used to uniquely identify this plugin.
	 */
	protected $plugin_name;


	public function __construct() {
		$this->plugin_name = 'flo-flex-builder';

		$this->flex_slideshow_actions();
	}

	public function flex_slideshow_actions() {
		add_action('init', array($this, 'register_slideshow_block'));
		add_action('enqueue_block_editor_assets', array($this, 'enqueue_slideshow_scripts'));
	}

	public function register_slideshow_block() {
		register_block_type(
			'flo/flo-flex-builder-slideshow',
			array(
				'render_callback' => array($this, 'flo_render_flex_block'),
				'attributes' => array(
					"controllsEditMode" => array(
						"type" => "boolean",
						"default" => false,
					),
					"animationEffect" => array(
						"type" => 'string',
						"default" => "fade", // "slide"
					),
					"showArrows" => array(
						"type" => "boolean",
						"default" => true,
					),
					"showDots" => array(
						"type" => "boolean",
						"default" => true,
					),
					"infinite" => array(
						"type" => "boolean",
						"default" => false,
					),
					"leftArrowPosition" => array(
						"type" => "object",
						"default" => array(
							"x" => "4.77%",
							"y" => "44.16%",
						),
					),
					"rightArrowPosition" => array(
						"type" => "object",
						"default" => array(
							"x" => "90.77%",
							"y" => "44.16%",
						),
					),
					"dotsPosition" => array(
						"type" => "object",
						"default" => array(
							"x" => "47.11%",
							"y" => "87.95%",
						),
					),
					"mobile_leftArrowPosition" => array(
						"type" => "object",
						"default" => array(
							"x" => "2.28%",
							"y" => "46%",
						),
					),
					"mobile_rightArrowPosition" => array(
						"type" => "object",
						"default" => array(
							"x" => "86.28%",
							"y" => "46%",
						),
					),
					"mobile_dotsPosition" => array(
						"type" => "object",
						"default" => array(
							"x" => "42.57%",
							"y" => "88.6%",
						),
					),
					"autoplay" => array(
						"type" => "boolean",
						"default" => false,
					),
					"slideChangeDuration" => array(
						"type" => "number",
						"default" => 600,
					),
					"autoplayDelay" => array(
						"type" => "number",
						"default" => 2000,
					),
					"arrowsSize" => array(
						"type" => "number",
						"default" => 25,
					),
					"dotsSize" => array(
						"type" => "number",
						"default" => 9,
					),
					"elementsColor" => array(
						"type" => 'string',
						"default" => "#000000",
					),
					"slideElementsColor" => array(
						"type" => "object",
						"default" => array('key' => 'value'),
					),
					"slidesMeta" => array(
						"type" => "object",
						"default" => array('key' => 'value'),
					),
				)
			)
		);
	}

	public function flo_render_flex_block($attributes, $content) {
		extract($attributes);

		$slider_data = array(
			"fade" => $animationEffect === 'fade',
			"arrows" => $showArrows,
			"dots" => $showDots,
			"infinite" => $infinite,
			"autoplay" => $autoplay,
			"autoplaySpeed" => $autoplayDelay,
			"speed" => $slideChangeDuration
		);

		$colors_data = array(
			"elementsColor" => $elementsColor,
			"slideElementsColor" => $slidesMeta
		);

		return '
				<div
					class="flex-slideshow alignfull"
					data-flex-chunk="element-slideshow"
					style="
						--arrowsSize: ' . $arrowsSize / 16  . 'rem;

						--prevArrowLeft: ' . $leftArrowPosition['x'] . ';
						--prevArrowTop: ' . $leftArrowPosition['y'] . ';
            --prevArrowMobileLeft: ' . $mobile_leftArrowPosition['x'] . ';
            --prevArrowMobileTop: ' . $mobile_leftArrowPosition['y'] . ';

						--nextArrowLeft: ' . $rightArrowPosition['x'] . ';
						--nextArrowTop: ' . $rightArrowPosition['y'] . ';
            --nextArrowMobileLeft: ' . $mobile_rightArrowPosition['x'] . ';
            --nextArrowMobileTop: ' . $mobile_rightArrowPosition['y'] . ';

						--dotsLeft: ' . $dotsPosition['x'] . ';
						--dotsTop: ' . $dotsPosition['y'] . ';
            --dotsMobileLeft: ' . $mobile_dotsPosition['x'] . ';
            --dotsMobileTop: ' . $mobile_dotsPosition['y'] . ';
            --dotsSize: ' . $dotsSize . 'px;
					"
				>
          <div
						class="flex-slideshow__slick"
						data-options=\' ' . json_encode($slider_data) . '\'
						data-colors=\' ' . json_encode($colors_data) . '\'
					>
            ' . $content . '
          </div>
          <div class="flex-slideshow__arrow flex-slideshow__arrow--prev"><i class="flo-flex-icon-arrow-left"></i></div>
          <div class="flex-slideshow__arrow flex-slideshow__arrow--next"><i class="flo-flex-icon-arrow-right"></i></div>
        </div>
			';
	}

	public function enqueue_slideshow_scripts() {

		wp_enqueue_script(
			$this->plugin_name . '_slideshow',
			plugins_url('dist/flex-slideshow.min.js', dirname(__FILE__)),
			['wp-blocks', 'wp-components', 'wp-editor', 'jquery-ui-draggable', $this->plugin_name],
			filemtime(plugin_dir_path(dirname(__FILE__)) . 'dist/flex-slideshow.min.js')
		);
	}
}
