<?php
/**
 * Module: Hero
 *
 * @global $page_meta
 * @global $module_class
 * @global $front_page
 *
 * @package Reach
 */

use Reach\App\Fields\Groups\FieldGroupHero;
use Reach\App\Fields\FieldParser;
use Reach\App\Modules\Modules;
use Reach\App\Modules\Animations;
use Reach\App\Attachments\Media;
use Reach\App\Modules\Styles;

// get module fields and data object values
$fields    = ( new FieldGroupHero( $group_key ) )->getFields();
$data      = ( new FieldParser() )->processFieldData( $fields, $page_meta, $group_key );
$admin_css = ( new FieldParser() )->prefixCssClasses( "rl", esc_attr( $data->hero_css_classes ) );

// check that we have an image set
if ( ! $data->hero_panel ) {
    return false;
}

/**
 * Animation Variables
 *
 * -- Directions for Implementation --
 *
 * 1) Add use Reach\App\Modules\Animations;
 *
 * 2) Change prefix and $defaults to match the module's field prefix and class
 *
 * 3) Add do_action( 'reach/modules/animation/data', $animations, $defaults );
 * to the container element to output animation data attributes and
 * set the scene
 *
 * 4) Add $tweenClasses to the classes of the child content elements
 * you want to animate
 *
 */
$animations   = ( new Animations() )->getAnimationOptions( $group_key . '_hero' );
$defaults     = FieldGroupHero::animationDefaults();
$tweenClasses = Animations::getTweenClasses($animations, $defaults);

if($animations['offset'] > 0) {
    $animations['offset'] = 0;
}

?>

<div id="<?php echo 'module_' . $index; ?>" class="module module--hero <?php echo $module_class . ' ' . $admin_css; ?>">
  <div class="hero__container"
       data-autoplay="<?php echo $data->hero_autoplay; ?>"
      <?php do_action( 'reach/modules/animation/data', $animations, $defaults ); ?>>
      <?php
      $panel_index = 0;
      // loop through the rows of data
      while ( have_rows( $group_key . '_hero_panel', get_the_ID() ) ) : the_row();
          // get sub field values
          $content        = get_sub_field( 'content' );
          $button         = get_sub_field( 'button' );
          $align          = get_sub_field( 'align' );
          $background     = get_sub_field( 'background' );
          $mobile_attrs   = '';
          $background_alt = '';

          // check for mobile background image
          if ( ! empty( $background['image'] ) ) {
              // get background image URL
              $desktop_image = Media::getAttachmentByID( $background['image'] );
              $desktop_size  = ! empty( $desktop_image->sizes['featured-large'] ) ? $desktop_image->sizes['featured-large'] : $desktop_image->url;
              $background_alt = isset($desktop_image->alt) && $desktop_image ? '<span role="img" aria-label="' . $desktop_image->alt . '"></span>' : '';

              if ( ! empty( $background['mobile_image'] ) ) {
                  // get mobile background image URL
                  $mobile_image = Media::getAttachmentByID($background['mobile_image']);
                  $mobile_size = !empty($mobile_image->sizes['featured-tablet']) ? $mobile_image->sizes['featured-tablet'] : $mobile_image->url;
                  $mobile_attrs = 'data-mobile="' . esc_url($mobile_size) . '"';
                  $mobile_attrs .= 'data-desktop="' . esc_url($desktop_size) . '"';
              }
          }

          // get the inline styles for this module
          $styles = sprintf( 'style="%s"', Styles::getInlineBackgroundStyles( $background ) );

          $class_list = 'hero__panel';
          $class_list .= ' hero__panel--' . $align;
          $class_list .= ' hero__panel--' . $background['size'];
          $class_list .= isset( $data->hero_height ) && $data->hero_height ? ' hero--full' : '';
          $class_list .= ' hero-panel-' . $panel_index;
          ?>

        <div class="hero__panel-wrapper">
            <div class="<?php echo $class_list; ?>
            <?php echo apply_filters( 'reach/modules/classes/text', ' text--dark', $background['text_color'] ); ?>"
            <?php echo $styles . ' ' . $mobile_attrs; ?>>
                <?php if ( ! empty( $background['background_color'] ) ) : ?>
                <style type="text/css">
                    <?php echo '.hero-panel-'. $panel_index; ?>:after {
                    opacity: 0.50;
                    background: <?php echo $background['background_color']; ?>
                    }
                </style>
                <?php echo $background_alt ?>
                <?php endif; ?>

                <?php
                do_action( 'reach/modules/video', $background ); // output video element
                do_action( 'reach/modules/parallax', $background ); // output parallax element
                do_action( 'reach/before_module_content' );
                ?>

            <div
                class="col-sm-12 hero__content entry__content <?php echo $tweenClasses ?>">
                <?php
                echo apply_filters( 'the_content', $content );
                echo Modules::outputButtonMarkup( $button, 'hero', $background );
                if(!$content){ echo "<p>&nbsp;</p>"; }
                ?>
            </div>

                <?php do_action( 'reach/after_module_content' ); ?>
            </div>
        </div>
          <?php $panel_index ++; ?>
      <?php endwhile; ?>
  </div>

  <?php do_action( 'reach/theme/layout/header/below' ); ?>

</div>
