<?php

  function flexRenderEl($element, $flatMap = null, $colors = null, $viewport = "desktop", $parentSizePos = null) {
    $b = "flex-block";
    $elMarkup = "";
    $data = $element['data'];
    $user_data = $data['user_data'];
    
    $custom_classes = isset($user_data['customClasses']) ? $user_data['customClasses'] : '';
    if(strlen($custom_classes)) {
      $custom_classes = str_replace(' ', '', $custom_classes);
      $custom_classes = str_replace(',', ' ', $custom_classes);
    }
    
    if($flatMap) {
      $elIndexFromMap = $flatMap[$element['id']];
    } else {
      $elIndexFromMap = null;
    }
    
    $elStyles = flex_get_element_styles($element, $elIndexFromMap, $colors, $viewport, $parentSizePos);
    
    /* START: Text Element */
      if ($data['type'] == "text") {
        $text_enc = urldecode($user_data['text']);
        $text_html = html_entity_decode($text_enc);
        $text = $text_html;
        
        $useFontStyle = $user_data['useFontStyle'];
        $dataFontStyle = "";
        if($useFontStyle) {
          $dataFontStyle = "data-font='".$user_data['fontStyle']."'";
        } else {
          if(isset($user_data['fontSize'])) {
            $elStyles .= "--font-size: ".$user_data['fontSize']."em;";
          }
          if(isset($user_data['lineHeight'])) {
            $elStyles .= "--line-height: ".$user_data['lineHeight']."em;";
          }
          if(isset($user_data['letterSpacing'])) {
            $elStyles .= "--letter-spacing: ".$user_data['letterSpacing']."em;";
          }
        }
        
        
        $old_editor_class = "";
        if (
          !isset($user_data['fontSize']) &&
          !isset($user_data['lineHeight']) &&
          !isset($user_data['letterSpacing'])
        ) {
          $old_editor_class = "old-editor-content";
        }
        
        $height_auto_class = "";
        if(isset($user_data['heightAuto']) && $user_data['heightAuto']) {
          $height_auto_class = "height-auto";
        }
        
        $elMarkup .= '
          <div class="'.$b.'__element '.$b.'__element--'.$element["id"].' '.$b.'__element--text '.$custom_classes.'" style="'.$elStyles.'">
            <div '.$dataFontStyle.' class="'.$b.'__text-content '.$old_editor_class.' '.$height_auto_class.'">
              '.$text.'
            </div>
          </div>
        ';
      }
    /* END: Text Element */

    /* START: Button Element */
      if ($data['type'] == "button") {
        $use_link = $user_data['isLinkable'];
        $button_link = 'javascript:void(0)';
        $button_target = 'target="_self"';
        
        if($use_link) {
          $button_link = $user_data['blockLink'];
          $button_target = $user_data['targetBlank'] ? 'target="_blank"' : 'target="_self"';

          if ($user_data['targetBlank']) {
            $button_target .= ' rel="noopener noreferrer"';
          }
        }

        $use_hover = $user_data['useHoverInvert'];
        $use_hover_class = $use_hover ? $b."__element--button-hoverable" : "";
        $text = urldecode($user_data['text']);
        
        $useFontStyle = $user_data['useFontStyle'];
        $dataFontStyle = "";
        if($useFontStyle) {
          $dataFontStyle = "data-font='".$user_data['fontStyle']."'";
        } else {
          if(isset($user_data['fontSize'])) {
            $elStyles .= "--font-size: ".$user_data['fontSize']."em;";
          }
          if(isset($user_data['lineHeight'])) {
            $elStyles .= "--line-height: ".$user_data['lineHeight']."em;";
          }
          if(isset($user_data['letterSpacing'])) {
            $elStyles .= "--letter-spacing: ".$user_data['letterSpacing']."em;";
          }
        }
        
        $old_editor_class = "";
        if(
          !isset($user_data['fontFamily']) &&
          !isset($user_data['fontSize']) &&
          !isset($user_data['lineHeight']) &&
          !isset($user_data['letterSpacing'])
        ) {
          $old_editor_class = "old-editor-content";
        }
        
        $elMarkup .= '
          <a
            href="'.$button_link.'"
            class="'.$b.'__element '.$b.'__element--'.$element["id"].' '.$b.'__element--button '.$use_hover_class.' '.$custom_classes.'"
            '.$button_target.'
            style="'.$elStyles.'"
          >
            <div '.$dataFontStyle.' class="'.$b.'__text-content '.$old_editor_class.'">
              '.$text.'
            </div>
          </a>
        ';
      }
    /* END: Button Element */

    /* START: Shape Element */
      if ($data['type'] == "shape") {
        $use_link = $user_data['isLinkable'];
        $gradientClass = isset($user_data['useGradient']) && $user_data['useGradient'] ? 'has-gradient' : '';
        $elMarkup .= '<div class="'.$b.'__element '.$b.'__element--'.$element["id"].' '.$b.'__element--shape '.$gradientClass.' '.$custom_classes.'" style="'.$elStyles.'">';
        $target = $user_data['targetBlank'] ? "_blank" : "_self";
        if ($use_link) {
          $elMarkup .= '
            <a 
              class="'.$b.'__element--image-link"
              href="'.$user_data['blockLink'].'"
              target="'.$target.'"
            ></a>
          ';
        }
        
        $elMarkup .= '</div>';
      }
    /* END: Shape Element */

    /* START: Image Element */
      if ($data['type'] == "image") {
        $img_alt = $user_data['alt'];
        $use_link = $user_data['isLinkable'];
        $parallax_class = false;
        $parallax_class = isset($user_data['enableParallax']) && $user_data['enableParallax'] ? $b . "__with-parallax" : "";
        $parallaxFactor = isset($user_data['parallaxFactor']) ? $user_data['parallaxFactor'] : 20;
        $image_src = $user_data['backgroundImage'];
        
        $overlay = "";
        if($user_data['useOverlay']) {
          $overlayColor = parseColor($user_data['overlayColor'], $colors);
          $hasBlur = $user_data['backgroundBlur'];
          if($hasBlur) {
            $blurClass = "has-blur";
          } else {
            $blurClass = "";
          }
          $overlay = '<div style="background-color: '.$overlayColor.'" class="'.$b.'__overlay '.$blurClass.'"></div>';
        }
        
        $elMarkup .= '
          <div
            class="'.$b.'__element '.$b.'__element--'.$element["id"].' '.$b.'__element--image '.$parallax_class.' '.$custom_classes.'"
            aria-label="'.$img_alt.'"
            style="'.$elStyles.'"
          >
          '.$overlay.'
        ';
          
        if(strlen($parallax_class)) {
          
          if(function_exists('flo_aq')) {
            $img_width = floatval($data['elementWidth']) * 32;
            $img_height = floatval($data['elementHeight']) * 32;
            
            $image_src = flo_aq($url = $image_src, $width = $img_width, $height = $img_height, $crop = true, $force_resize = true);	
          }
          
          $elMarkup .= '
            <div 
              class="'.$b.'__bg-image" 
              data-image-src="'.$image_src.'"
              data-speed="'. $parallaxFactor / 100 .'"
            >
            </div>
          ';  
        }
        
        if ($use_link) {
          $target = $user_data['targetBlank'] ? "_blank" : "_self";
          $elMarkup .= '
            <a class="'.$b.'__element--image-link"
              href="'.$user_data['blockLink'].'"
              target="'.$target.'"
            >
            </a>
          ';
        }
        
        $elMarkup .= '</div>';
      }
    /* END: Image Element */
    
    /* START: Video Element */
      if ($data['type'] == "video") {
        $iframe = false;
        $has_image_class = isset($user_data['backgroundImage']) && strlen($user_data['backgroundImage']) ? $b . "__video--has-image" : $b . "__video--no-image";
        if(isset($user_data['fullVideoResult']) && strlen($user_data['fullVideoResult'])) {
          $iframe = urldecode($user_data['fullVideoResult']);
        }
        
        if($user_data['videoSource'] !== 'self-hosted') {
          $videoNode = '
            <div class="'.$b.'__responsive-iframe-wrap">
              '.$iframe.'
            </div>
          ';
        } else {
          $videoNode = '
            <div class="'.$b.'__responsive-iframe-wrap self-hosted">
              '.$iframe.'
            </div>
          ';
        }
        
        $overlay = "";
        if($user_data['useOverlay']) {
          $overlayColor = parseColor($user_data['overlayColor'], $colors);
          $overlay = '<div style="background-color: '.$overlayColor.'" class="'.$b.'__overlay"></div>';
        }
        
        $elMarkup .= '
          <div 
            class="'
              .$b.'__element '
              .$b.'__element--'.$element["id"].' '
              .$has_image_class.' '
              .$b.'__element--video '
              .$custom_classes.'
            " 
            style="'.$elStyles.'"
          >
          '.$overlay.'
        ';
        
        if($user_data['backgroundImage']) {
          $elMarkup .= '
            <div class="'.$b.'__play-button">
              <i class="flex-front-video-play"></i>
            </div>
          ';
        }
        
        $elMarkup .= $videoNode;
        $elMarkup .= '</div>';
        
      }
    /* END: Video Element */

    /* START: Line Element */
      if ($data['type'] == 'line') {
        $elMarkup .= '<div class="'.$b.'__element '.$b.'__element--'.$element["id"].' '.$b.'__element--line '.$custom_classes.'" style="'.$elStyles.'"></div>';
      }
    /* END: Line Element */
    
    return $elMarkup;
  }

?>