<?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 Joomla\CMS\Factory;
use TechFry\Library\TResource;

class Slider extends Bootstrap
{
    // Refer: https://splidejs.com/
    public function display()
    {
        // items - array
        // config - controls, effect, loop, slides_per_view, space_between, pagination, auto_play

        if ($this->framework == 'amp')
        {
            return;
        }

        if (empty($this->data))
        {
            return;
        }

        $this->data = (array) $this->data;

        $slider_class = '';
        if (isset($this->config['slider_class']) && !empty($this->config['slider_class']))
        {
            $slider_class =  ' ' . $this->config['slider_class'];
        }

        $slide_track_class = '';
        if (isset($this->config['slide_track_class']) && !empty($this->config['slide_track_class']))
        {
            $slide_track_class =  ' ' . $this->config['slide_track_class'];
        }

        $slide_item_class = '';
        if (isset($this->config['slide_item_class']) && !empty($this->config['slide_item_class']))
        {
            $slide_item_class =  ' ' . $this->config['slide_item_class'];
        }

        $output = '<div class="splide' . $slider_class . '" id="splide" role="group" aria-labelledby="carousel">';

        $output .= '<div class="splide__track' . $slide_track_class . '">';
            $output .= '<ul class="splide__list">';

            foreach ($this->data as $i => $item)
            {
                $output .= '<li class="splide__slide' . $slide_item_class . '">';
                $output .= '<div class="splide__slide__container">';
                    $output .= $item;
                $output .= '</div>';
                $output .= '</li>';
            }

            $output .= '</ul>';
        $output .= '</div>';

        $output .= '</div>';

        $r = new TResource();
        
        // Add CSS
        $css_url = 'https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css';
        $r->add_resource('style', 'splider.css', $css_url);
        
        // Add JavaScript
        $js_url = 'https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js';
        $r->add_resource('script', 'splider.js', $js_url);
        
        // Add javascript
        $script = 'document.addEventListener( \'DOMContentLoaded\', function() {
                var splide = new Splide( \'#splide\', {
                    type: \'' . $this->config['effect'] . '\',
                    perPage: ' . $this->config['slides_per_view'] . ',
                    perMove: ' . $this->config['slides_per_move'] . ',
                    gap: ' . $this->config['space_between'] . ',
                    arrows: ' . $this->config['controls'] . ',
                    pagination: ' . $this->config['pagination'] . ',
                    autoplay: ' . $this->config['auto_play'] . ',
                    interval: ' . $this->config['interval'] . ',
                    speed: ' . $this->config['speed'] . ',
                    padding: ' . $this->config['slider_padding'] . ',
                } );
                splide.mount();
            } );';

        $r->add_script($script);
        
        return $output;
    }
}