<?php
function renderLottieElement($b, $element, $custom_classes, $elStyles, $colors, $viewport) {
  $data = $element['data'];
  $user_data = $data['user_data'];
  $elMarkup = "";

  if (!isset($user_data["lottieFileData"]['url'])) return '';

  $lottieFileData = $user_data["lottieFileData"];
  $autoplay = ($user_data['action'] === 'autoplay' ? 'autoplay' : '');
  $loop = ($user_data['loop'] ? 'loop' : '');

  $lottieFileData = array_merge([
    'url' => ''
  ], $lottieFileData);

  $scrollPlayer = '
    <lottie-player
      id="lottie"
      ' . $autoplay . '
      ' . $loop . '
      src=' . $lottieFileData['url'] . '
      style="width:100%; height: 100%;">
    </lottie-player>
  ';

  $elMarkup .= '
    <div
      class="
        ' . $b . '__element
        ' . $b . '__element--' . $element["id"] . '
        ' . $b . '__element--lottie ' . $custom_classes . '
      "
      style="' . $elStyles . '"
    >
      <div
        class="flex-element-type-lottie"
        style="width: 100%;height: 100%;"
        data-user-data=\'' . json_encode($user_data) . '\'
      >
        ' . $scrollPlayer . '
      </div>
    </div>';

  return $elMarkup;
}
