<?php
namespace Grav\Plugin\Shortcodes;

use Thunder\Shortcode\Shortcode\ShortcodeInterface;

class SnapGalleryShortcode extends Shortcode
{
    public function init(): void
    {
        $this->shortcode->getHandlers()->add('snap-gallery', function (ShortcodeInterface $sc) {
            $plugin   = $this->grav['plugins']->getPlugin('story-blocks');
            $page     = $plugin ? $plugin->getCurrentPage() : null;
            $baseUrl  = $page ? $page->url() . '/' : '';

            $images   = array_map('trim', explode(',', $sc->getParameter('images', '')));
            $captions = array_map('trim', explode(',', $sc->getParameter('captions', '')));
            $alts     = array_map('trim', explode(',', $sc->getParameter('alts', '')));

            $slidesHtml = '';
            $dotsHtml   = '';

            foreach ($images as $i => $filename) {
                if (!$filename) continue;
                $url     = $baseUrl . htmlspecialchars($filename, ENT_QUOTES);
                $caption = htmlspecialchars($captions[$i] ?? '', ENT_QUOTES);
                $alt     = htmlspecialchars($alts[$i] ?? '', ENT_QUOTES);
                $eager   = $i === 0 ? 'eager' : 'lazy';
                $active  = $i === 0 ? ' is-active' : '';

                $captionTag = $caption
                    ? '<figcaption class="pgallery__caption">' . $caption . '</figcaption>'
                    : '';

                $slidesHtml .= <<<HTML
      <figure class="pgallery__slide" data-index="{$i}">
        <img src="{$url}" alt="" class="pgallery__bg" aria-hidden="true" loading="{$eager}">
        <img src="{$url}" alt="{$alt}" class="pgallery__fg" loading="{$eager}">
        {$captionTag}
      </figure>
HTML;
                $dotsHtml .= '<span class="pgallery__dot' . $active . '" data-dot="' . $i . '" aria-hidden="true"></span>';
            }

            return <<<HTML
<div class="pgallery">
  <div class="pgallery__frame" role="region" aria-label="Photo gallery">
    {$slidesHtml}
    <div class="pgallery__dots" aria-hidden="true">{$dotsHtml}</div>
  </div>
</div>
HTML;
        });
    }
}
