<?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_Gutenberg {

    /**
	 * 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_gutenberg_actions();
    }
    
    public function flex_gutenberg_actions() {
        add_action( 'init', array($this, 'register_gutenberg_block') );
        add_action( 'enqueue_block_editor_assets', array($this, 'enqueue_gutenberg_scripts') );
    }

    public function register_gutenberg_block() {      
        register_block_type( 'flo/flo-flex-builder', array(
                'render_callback' => array($this, 'flo_render_flex_block'),
            ) 
        );
    }

    public function flo_render_flex_block($attributes) { 
      $b = 'flex-block';
      $decoded_data = isset($attributes['data']) ? json_decode($attributes['data'], true) : false;

      if ( $decoded_data ) {
        $colors = null;
        if(
          isset($decoded_data['globalOptions']['themeColors']) &&
          sizeof($decoded_data['globalOptions']['themeColors'])
        ) {
          $colors = $decoded_data['globalOptions']['themeColors'];
        }

        // get color names and send to renderer
        $desktop_font_size = 1.25;
        if(isset($decoded_data['globalOptions']['htmlFontSize'])) {
          $desktop_font_size = $decoded_data['globalOptions']['htmlFontSize'];
        }

        $mob_height_em = 0;
        $mobile_font_size = 4.26;
        if(isset($decoded_data['mobile_elements']) && is_array($decoded_data['mobile_elements']) && sizeof($decoded_data['mobile_elements'])) {
          if(isset($desktop_font_size) && strlen($desktop_font_size)) {
            $desktopFontSizePx = $desktop_font_size * (1280 / 100);
            $mobile_font_size = $desktopFontSizePx / (375 / 100);
          } else {
            $desktopFontSizePx = 16;
            $mobile_font_size = 4.26;
          }
    
          // MOBILE HEIGHT
          $wasChangedAfterUpdate = isset($decoded_data['globalOptions']['heightFixFlag']) && isset($decoded_data['globalOptions']['heightFixFlag']) === true;
          if($wasChangedAfterUpdate) {
            $mob_height_em = str_replace('rem', 'em', $decoded_data['globalOptions']['globalMobileBlockHeightRem']);
          } else {
            $mob_height_em = $decoded_data['globalOptions']['globalMobileBlockHeight'] / $desktopFontSizePx . "em";
          }
        }

          // DESKTOP HEIGHT
        if(isset($decoded_data['globalOptions']['globalBlockHeightRem']) && strlen($decoded_data['globalOptions']['globalBlockHeightRem'])) {
          $blockHeightVal = str_replace('rem', 'em', $decoded_data['globalOptions']['globalBlockHeightRem']);
        } else {
          $blockHeightVal = '46.875em';
        }

        $globalBlockBgColor = isset($decoded_data['globalOptions']['globalBlockBgColor']) ? $decoded_data['globalOptions']['globalBlockBgColor'] : ''; 
        $desktopBg = parseColor($globalBlockBgColor, $colors);

        $desktop_styles = "
          --html-font-size: ".$desktop_font_size."vw;
          --height:". $blockHeightVal .";
          --bg-color: ".$desktopBg.";
        ";
        $desktop_styles = preg_replace('/\s/', '', $desktop_styles);

        $globalMobileBlockHeight = isset($decoded_data['globalOptions']['globalMobileBlockHeight']) ? $decoded_data['globalOptions']['globalMobileBlockHeight'] : '';
        $mob_height =
            $globalMobileBlockHeight !== false && strlen($globalMobileBlockHeight)
            ? $globalMobileBlockHeight
            : 0;

        $globalMobileBlockBgColor = isset($decoded_data['globalOptions']['globalMobileBlockBgColor']) ? $decoded_data['globalOptions']['globalMobileBlockBgColor'] : '';
        $mobBg = parseColor($globalMobileBlockBgColor, $colors);

        $mobile_styles = "
          --mob-height: ". $mob_height_em .";
          --mob-bg-color: ". $mobBg .";
        ";
        $mobile_styles = preg_replace('/\s/', '', $mobile_styles);

        if(isset($decoded_data['mobile_elements']) && is_array($decoded_data['mobile_elements']) && sizeof($decoded_data['mobile_elements'])) {
          $mobile_styles .= "--html-font-size: ".$mobile_font_size."vw;";
        }

        $desktopElements = renderElements($decoded_data, $viewport = "desktop");
        $mobileElements = renderElements($decoded_data, $viewport = "mobile");

        // var_dump($desktopElements);
        return '<div
          class="' . $b . '"
            data-flex-desktop="' . htmlentities('<div class="'.$b.'__main-container" style="'.$desktop_styles.'">'.$desktopElements.'</div>', ENT_QUOTES, 'UTF-8') . '"
            data-flex-mobile="' . htmlentities('<div class="'.$b.'__mobile-container" style="'.$mobile_styles.'">'.$mobileElements.'</div>', ENT_QUOTES, 'UTF-8') . '"
          ></div>';
        }
    }  

    public function enqueue_gutenberg_scripts() {
        
		wp_enqueue_script(
	        $this->plugin_name . '_gutenberg',
	        plugins_url( 'dist/gutenberg.min.js', dirname(__FILE__) ),
	        [ 'wp-blocks', 'wp-components', 'wp-editor', $this->plugin_name ],
	        filemtime( plugin_dir_path( dirname(__FILE__) ) . 'dist/gutenberg.min.js' )
        );
	}
}
