import { closeModal, openModal, setupModal } from "../modal";
import $ from "jquery";
import {createEvent} from "./events";

const initModals = () => {
    const modal = document.querySelector('.modal--form');
    const modalOpenBtns = document.querySelectorAll('.js-modal');
    const modalCloseBtn = document.querySelector('.js-close-modal');
    let player;
    const modalGallery = document.querySelector('.modal--gallery')
    const gallerySlides = [...document.querySelectorAll('.gallery__item')];
    const galleryAndVideo = [...document.querySelectorAll('.slider-location__item')];
    const gallerySlider = $('.gallery-modal__slider');

    const modalCloseCallback = () => {
        $('.js-form-validate').show();
        $('.form-message').hide();
    }

    const modalOpenCallback = () => {
        if ($(modalOpenBtns).data('vacancy')) {
            $(modal).find('[name=vacancy_id]').val($(modalOpenBtns).data('vacancy'));
            const $ppLink = $(modal).find('.js-privacy-policy');
            $ppLink.attr('href', $ppLink.data($(modalOpenBtns).data('lang')));

            createEvent({
                event: 'click_apply_now',
                job_title: document.querySelector('h1[itemprop="title"]').innerText,
                job_id: $(modalOpenBtns).data('vacancy'),
            });
        }
    }

    if (modal && modalOpenBtns.length) {
        setupModal(modal, modalCloseCallback, modalOpenBtns, modalOpenCallback);
    }

    if (modalGallery) {
        const counter = modalGallery.querySelector('.gallery-modal__counter span')
        setupModal(modalGallery, false, null);
        gallerySlides.forEach((slide) => {
            const clone = slide.cloneNode(true);
            clone.className = 'gallery-modal__slide';
            gallerySlider.append(clone);

            slide.addEventListener('click', (evt) => {
                evt.preventDefault();
                openModal(modalGallery)
                gallerySlider.slick('slickGoTo', gallerySlides.findIndex(el => slide === el), true)
            })
        });

        galleryAndVideo.forEach((slide) => {
            let clone = '';
            if (slide.dataset.id && slide.dataset.src) {
                clone = `<div class="gallery-modal__slide">
                  <div id="${slide.dataset.id}"></div>
                </div>`;

                const tag = document.createElement('script');
                tag.src = "https://www.youtube.com/iframe_api";
                const firstScriptTag = document.getElementsByTagName('script')[0];
                firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
                window.onYouTubeIframeAPIReady = () =>{
                    player = new YT.Player(slide.dataset.id, {
                        videoId: slide.dataset.src,
                        playerVars: {
                            'playsinline': 1
                        },
                    });
                };
            } else {
                clone = slide.cloneNode(true);
                clone.className = 'gallery-modal__slide';
            }

            gallerySlider.append(clone);

            slide.addEventListener('dragend', (evt) => {
                evt.preventDefault();
            });

            slide.addEventListener('click', (evt) => {
                if (slide.dataset.id && slide.dataset.src && player) {
                    player.playVideo();
                }
                evt.preventDefault();
                openModal(modalGallery)
                gallerySlider.slick('slickGoTo', galleryAndVideo.findIndex(el => slide === el), true)
            })
        });

        gallerySlider.slick({
            prevArrow: modalGallery.querySelector('.slider-arrow.as-prev-btn'),
            nextArrow: modalGallery.querySelector('.slider-arrow.as-next-btn'),
        });

        gallerySlider.on('afterChange', function(event, {$slides: slides}, direction) {
            counter.innerHTML = direction + 1 + ' | ' + slides.length
            if (player) {
                player.pauseVideo();
            }
        });

        document.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowLeft') {
                if (player) {
                    player.pauseVideo();
                }
                gallerySlider.slick('slickPrev');
            } else if (e.key === 'ArrowRight') {
                if (player) {
                    player.pauseVideo();
                }
                gallerySlider.slick('slickNext');
            }
        });

        if (modalCloseBtn) {
            modalCloseBtn.addEventListener('click', () => {
                if (player) {
                    player.pauseVideo();
                }
            });
        }

        modalGallery.addEventListener('click', (e) => {
            if (!e.target.closest('.modal__inner')) {
                if (player) {
                    player.pauseVideo();
                }
            }
        });
    }
}

export {initModals}