<?php

function renderImageGridElement($b, $element, $customClasses, $elStyles, $colors, $viewport) {
  $id                   = $element["id"];
  $data                 = $element["data"];
  $userData             = $data["user_data"];

  $layout               = $userData["layout"];
  $images               = $userData["uploadedImages"];
  $imagesAmount         = $userData["imagesAmount"];
  $imagesGap            = $userData["imagesGap"];
  $imagesPerRow         = $userData["imagesPerRow"];
  $linkColor            = $userData["linkColor"];
  $linkBackgroundColor  = $userData["linkBgColor"];

  $source               = "custom";
  $elMarkup             = "";

  $elStyles .= '
    --img-amount:    ' . $imagesAmount / $imagesPerRow . ';
    --imagesPerRow:  ' . $imagesPerRow . ';
    --imagesGap:     ' . remCalc($imagesGap) . ';
    --link-color:    ' . getStyleKitColor($linkColor) . ';
    --link-bg-color: ' . getStyleKitColor($linkBackgroundColor) . ';
  ';

  $imagesMarkup = '';
  if (!isset($images) || count($images) === 0) 
    $imagesMarkup .= '<p class="flex-element-type-instagram__images-not-found">Images not found</p>';
  else 
    foreach ($images as $image) $imagesMarkup .= renderImage($image, $userData);
  

  $elMarkup .= '
    <style>
      .' . $b . '__element--' . $id . ' 
      .flex-element-type-instagram__custom-link {
        ' . fontMixin($userData, 'linkFont') . '
      }
    </style>
    <div
      class="
      ' . $b . '__element
      ' . $b . '__element--' . $id . '
      ' . $b . '__element--instagram
      ' . $customClasses . '
      "
      style="
      ' . $elStyles . '
      "
    >
      <div class="flex-element-type-instagram flex-element-type-instagram--layout-' . $layout . '">
        ' . renderLink($userData)  . '
        <div class="flex-element-type-instagram__images-wrap">
          ' . $imagesMarkup . '
        </div>
      </div>
    </div>
  ';

  return $elMarkup;
}

function renderLink($userData) {
  $useLink        = $userData["useLink"];
  $targetBlank    = $userData["targetBlank"];
  $linkText       = $userData["linkText"];
  $linkUrl        = $userData["linkUrl"];
  $linkPosition   = $userData["linkPosition"];
  $target         = $targetBlank ? "_blank" : "_self";
  
  if (!$useLink) return '';

  return '
    <a
      class="
        flex-element-type-instagram__custom-link
        flex-element-type-instagram__custom-link--' . $linkPosition . '
      "
      href="' . $linkUrl . '"
      target="' . $target . '"
    >' . $linkText . '</a>
  ';
};

function renderImage($imgData, $userData) {
  $alt              = $imgData["alt"];
  $fullSizeImageUrl = $imgData["sizes"]['full']['url'];
  $useFancybox      = $userData["useFancybox"];
  $size             = isset($userData["size"]) ? $userData["size"] : "medium";
  $imageUrl         = getImageUrlBySize($imgData, $size);

  if ($useFancybox) return '
    <a 
      href="' . $fullSizeImageUrl . '"
      data-fancybox="image-grid-gallery"
      data-flex-chunk="fancybox"
      class="
        flex-element-type-instagram__link
        flex-element-type-instagram__link--custom
      "
    >
      <img data-src="' . $imageUrl . '" alt="' . $alt . '" />
    </a>
  ';
  

  return '
    <div class="
      flex-element-type-instagram__link
      flex-element-type-instagram__link--custom
    ">
      <img data-src="' . $imageUrl . '" alt="' . $alt . '" />
    </div>
  ';
};

function getImageUrlBySize($imgData, $size) {
  $sizes = $imgData["sizes"];
  return $sizes[$size]["url"] 
          ?? $sizes["full"]["url"]
          ?? $sizes["thumbnail"]["url"];
}