<?php

/**
 * @see https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#render
 */

$background_type = $attributes['backgroundType'] ?? 'color';
$background_color = $attributes['backgroundColor'] ?? '#000000';
$image = $attributes['image'] ?? null;
$video = $attributes['video'] ?? null;
$video_url = $attributes['videoUrl'] ?? '';
$video_poster = $attributes['videoPoster'] ?? null;

$bg_style = '';
switch ($background_type) {
  case 'image':
    if (!empty($image['url'])) {
      $bg_style = sprintf('background-image: url(%s);', esc_url($image['url']));
    }
    break;
  case 'color':
    $bg_style = sprintf('background-color: %s;', esc_attr($background_color));
    break;
}

$wrapper_attributes = get_block_wrapper_attributes(['class' => 'parallax-section']);
?>
<section <?php echo $wrapper_attributes; ?>>
  <div class="bg" style="<?php echo esc_attr($bg_style); ?>">
    <?php if ($background_type === 'video'): ?>
      <?php $video_source = !empty($video['url']) ? $video['url'] : $video_url; ?>
      <?php if (!empty($video_source)): ?>
        <video autoplay muted loop playsinline <?php if (!empty($video_poster['url'])) {
                                                  echo 'poster="' . esc_url($video_poster['url']) . '"';
                                                } ?>>
          <source src="<?php echo esc_url($video_source); ?>" type="video/mp4">
        </video>
      <?php endif; ?>
    <?php endif; ?>
  </div>
  <div class="content">
    <?php echo $content; ?>
  </div>
</section>