import { Controller } from 'stimulus';
import 'owl.carousel2/dist/assets/owl.carousel.css';
import 'owl.carousel2/dist/assets/owl.theme.default.css';
import 'owl.carousel2';

/*
 * This is an example Stimulus controller!
 *
 * Any element with a data-controller="hello" attribute will cause
 * this controller to be executed. The name "hello" comes from the filename:
 * hello_controller.js -> "hello"
 *
 * Delete this file or adapt it for your use!
 */
export default class extends Controller {
    static targets = ["showid"];

    connect() {
        var slideshow = this.element;

        $(slideshow).owlCarousel({
            nav: true,
            margin: 15,
            autoplay: false,
            autoplayTimeout: 7000,
            autoplayHoverPause: true,
            navText : ['<span class="swiper-button-prev">&nbsp;</span>','<span class="swiper-button-next">&nbsp;</span>'],
                responsive: {
                0: {
                    items: 1,
                    dots: false,
                },
                600: {
                    items: 2,
                    dots: false,
                },
                1000: {
                    items: 2,
                    dots: false,
                }
            }
        });

        slideshow.classList.remove('hide');
    
        slideshow.querySelectorAll('.show-msg').forEach(function (el) {
            el.addEventListener('click', function (evn) {
                var showId = evn.target.dataset.showId;
                var crop = slideshow.querySelector(`#crop-${showId}`);
                var full = slideshow.querySelector(`#full-${showId}`);

                if (full.classList.contains('d-none')) {
                    crop.classList.add('d-none');
                    full.classList.remove('d-none');
                    evn.target.innerHTML = 'cвернуть';
                } else {
                    crop.classList.remove('d-none');
                    full.classList.add('d-none');
                    evn.target.innerHTML = 'весь отзыв';
                }
            });
        });
    }
}