<?php
  $b = "flex-block"; // To be used inside HTML

  // Start: Class name automation
    $block_id = mt_rand(1, 999);
    $b__for_css = ".".$b; // To be used inside CSS
    $b__uniq = $b."--".$block_id; // To be used inside HTML
    $b__uniq_for_css = ".".$b__uniq; // To be used inside CSS
  // End: Class name automation

  if(isset($data)) {
    // data for regular themes
    $encoded_data = flo_data($data, "flo_flex_builder_obj");
    $margins = flo_data($data, "flex_margins");
    $hide_on_desktop = flo_data($data, "flex__hide-desktop");
    $hide_on_mobile = flo_data($data, "flex__hide-mobile");
    $custom_block_id = flo_data($data, "flex__block-custom-id");
    $custom_block_class = flo_data($data, "flex__block-custom-class");
  } else {
    // data for flothemes.com theme
    if (get_sub_field("flo_flex_builder_obj")) {
      $encoded_data = get_sub_field("flo_flex_builder_obj");
      $margins = get_sub_field("flex_margins");
      $hide_on_desktop = get_sub_field("flex__hide-desktop");
      $hide_on_mobile = get_sub_field("flex__hide-mobile");
      $custom_block_id = get_sub_field("flex__block-custom-id");
      $custom_block_class = get_sub_field("flex__block-custom-class");
    }
  }

  if(!function_exists('flex_em_calc')) {
    function flex_em_calc($val, $font_size, $viewport) {
      $numVal = floatval($val);
      $viewportScale = $viewport === 'desktop' ? 12.8 : 3.75;
      $emVal = $numVal / ($viewportScale * $font_size);
      return $emVal;
    }
  }

  $isFlothemes = Flo_Flex_Builder::isFlothemes();
  if(!$isFlothemes) {
    $styleBladeView = 'core.style';
    $blockBladeView = 'layout.block';
  } else {
    $styleBladeView = 'flex.style';
    $blockBladeView = 'flex.block';
  }

  $decoded_data = json_decode($encoded_data, true);
  $custom_id = $custom_block_id ? 'id="'.$custom_block_id.'"' : "";
?>

@extends($blockBladeView, [
  "block_classes" => "flo-block--remove-padding flo-block--index-zero"
])

@section('block_content')
  <div {{$custom_id}} class="{{$b}} {{$b__uniq}} {{$custom_block_class}}">
    <?php

      // get color names and send to renderer
      $colors = null;
      if(
        isset($decoded_data['globalOptions']['themeColors']) &&
        sizeof($decoded_data['globalOptions']['themeColors'])
      ) {
        $colors = $decoded_data['globalOptions']['themeColors'];
      }

      $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(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;
        }
        $mob_height_em = $decoded_data['globalOptions']['globalMobileBlockHeight'] / $desktopFontSizePx;
      }

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

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

      $desktop_styles = "
        --html-font-size: ".$desktop_font_size."vw;
        --height:". $blockHeightVal .";
        --bg-color: ".$desktopBg.";
        --margin-top: ".flex_em_calc($margins['flex_top_margin_desktop'], $desktop_font_size, "desktop")."em;
        --margin-bottom: ".flex_em_calc($margins['flex_bottom_margin_desktop'], $desktop_font_size, "desktop")."em;
      ";
      $desktop_styles = preg_replace('/\s/', '', $desktop_styles);

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

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

      $mobile_styles = "
        --mob-height: ". $mob_height_em ."em;
        --mob-bg-color: ". $mobBg .";
        --margin-top: ".flex_em_calc($margins['flex_top_margin_mobile'], $mobile_font_size, "mobile")."em;
        --margin-bottom: ".flex_em_calc($margins['flex_bottom_margin_mobile'], $mobile_font_size, "mobile")."em;
      ";
      $mobile_styles = preg_replace('/\s/', '', $mobile_styles);

      if(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");

    ?>
    <noscript class="flex-desktop-wrap">
      @if ($hide_on_desktop !== true)
        <div class="{{$b}}__main-container" style="{{$desktop_styles}}">{{$desktopElements}}</div>
      @endif
    </noscript>
    <noscript class="flex-mobile-wrap">
      @if ($hide_on_mobile !== true)
        <div class="{{$b}}__mobile-container" style="{{$mobile_styles}}">{{$mobileElements}}</div>
      @endif
    </noscript>
  </div>
@overwrite
