<?php

defined("ABSPATH") || exit();

/**
 * @var WC_Product $product
 */
global $product;

$post_thumbnail_id = $product->get_image_id();
$attachment_ids = $product->get_gallery_image_ids();

if ($post_thumbnail_id) {
  $master_img_html = Inoby_Product::get_gallery_image_html(
    $post_thumbnail_id,
    "full",
    [
      "data-gallery-index" => 0,
    ],
    true
  );
} else {
  $master_img_html = '<div class="woocommerce-product-gallery__image--placeholder">';
  $master_img_html .= sprintf('<img src="%s" alt="%s" class="wp-post-image" />', esc_url(wc_placeholder_img_src("woocommerce_single")), esc_html__("Awaiting product image", "woocommerce"));
  $master_img_html .= "</div>";
}
?>
<div class="woocommerce-product-gallery images">
  
  <div class="master-image" style="display: none;">
    <?= $master_img_html ?>
  </div>

  <div class="slider keen-slider">
    <?php
    echo $master_img_html;

    if ($post_thumbnail_id && $attachment_ids) {
      foreach ($attachment_ids as $i => $attachment_id) {
        echo Inoby_Product::get_gallery_image_html($attachment_id, "full", [
          "data-gallery-index" => $i + 1,
        ]);
      }
    }
    ?>
  </div>

  <div class="gallery">
    <?= $master_img_html ?>
    <div class="thumbs">
      <?php
      $thumbs_to_show = 4;
      $remaining = count($attachment_ids) - $thumbs_to_show;
      if ($post_thumbnail_id && $attachment_ids) {
        foreach ($attachment_ids as $i => $attachment_id) {
          if ($i == $thumbs_to_show && $remaining > 1) {
            echo Inoby_Product::get_gallery_image_html($attachment_id, "thumbnail", [
              "class" => "woocommerce-product-gallery__image more",
              "data-more-text" => "+ $remaining",
              "data-gallery-index" => $i + 1, // +1 because there is no master image in thumbs
            ]);
            break;
          }
          echo Inoby_Product::get_gallery_image_html($attachment_id, "thumbnail", [
            "data-gallery-index" => $i + 1, // +1 because there is no master image in thumbs
          ]);
        }
      }
      ?>
    </div>
  </div>

</div>
