<?php
/*
* @package		Tech Fry Library
* @license		https://www.gnu.org/licenses/gpl-3.0.en.html
*/

namespace TechFry\Library\View\Sky;

defined('_JEXEC') or die;

use TechFry\Library\TImg;
use TechFry\Library\TResource;

class Gallery extends Bootstrap
{
    public $folder;

    public $images;

    public $class_options = array('image_class', 'border_radius', 'shadow');

    // Image gallery from Joomla folder in images - https://lokeshdhakar.com/projects/lightbox2/
    public function display()
    {
        // config - columns, gap, image_class, border_radius, shadow, lazy_loading, masonry

        $this->folder = 'images/' . $this->data;

        $i = new TImg();
        $this->images = $i->get_images($this->folder);
        
        if (empty($this->images))
        {
            return;
        }

        $image_class = 'img-fluid ' . $this->get_class();

        $gap = isset($this->config['gap']) && $this->config['gap'] ? ' ' . $this->config['gap'] : '';

        $masonry = isset($this->config['masonry']) && $this->config['masonry'] ? ' data-masonry="{&quot;percentPosition&quot;: true }"' : '';
        
        $lazy_loading = isset($this->config['lazy_loading']) && $this->config['lazy_loading'] ? ' loading="lazy"' : '';

        $columns = isset($this->config['columns']) && $this->config['columns'] ? $this->config['columns'] : '2';

        $output = '';

        // Display images as grid
        $output .= '<div class="row row-cols-' . $columns . $gap . '"' . $masonry . '>';

        foreach ($this->images as $k => $image)
        {
            $path_info = pathinfo($image);

            $output .= '<a href="' . $this->folder . '/' . $image . '" data-lightbox="image-gallery" data-title="' . $path_info['filename'] . '">';

            $output .= '<img class="' . $image_class . '" src="' . $this->folder . '/' . $image . '" alt="' . $path_info['filename'] . '"' . $lazy_loading . '>';

            $output .= '</a>';
        }

        $output .= '</div>';

        // Add CSS and Javascript
        $css_url = 'https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.5/css/lightbox.min.css';
        $js_url = 'https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.5/js/lightbox-plus-jquery.min.js';

        $r = new TResource();
        
        $r->add_resource('style', 'lightbox.css', $css_url);
        $r->add_resource('script', 'lightbox.js', $js_url);

        // Masonry Layout (Issue: Images overlapping on first load)
        if (isset($this->config['masonry']) && $this->config['masonry'])
        {
            $masonry_url = 'https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js';
            $r->add_resource('script', 'masonry.js', $masonry_url, [], array('defer' => true));
        }

        return $output;
    }

    public function get_output_amp()
    {
        $this->folder = 'images/' . $this->data;

        $i = new TImg();
        $this->images = $i->get_images($this->folder);

        $r = new TResource();        
        $r->add_resource('https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js', 'js', array('async' => 'async', 'custom-element' => 'amp-lightbox-gallery'));

        $output = '';
        $output = '<div class="columns">';
        foreach ($this->images as $i => $image)
        {
            $image_info = getimagesize($this->folder . '/' . $image);

            $output .= '<div class="column col-12 mb-2">';
                $output .= '<amp-img layout="responsive" src="' . $this->folder . '/' . $image . '" width="' . $image_info[0] . '" height="' . $image_info[1] . '" lightbox></amp-img>';
            $output .= '</div>';
        }
        $output .= '</div>';

        return $output;
    }
}